Onebox parser m3u8 link and play with videojs

Development
4

edit this file lib/onebox/engine/video_onebox.rb
you should merge change into test-passed branch.

# frozen_string_literal: true

module Onebox
  module Engine
    class VideoOnebox
      include Engine
      # 添加对m3u8文件的匹配
      matches_regexp(%r{^(https?:)?//.*\.(mov|mp4|webm|ogv|m3u8)(\?.*)?$}i)
      def always_https?
        AllowlistedGenericOnebox.host_matches(uri, AllowlistedGenericOnebox.https_hosts)
      end
      def to_html
        # 判断是否是m3u8文件，如果是，则使用适用于Video.js的HTML模板
        if @url.match(%r{\.m3u8$})
          # 获取时间戳，并添加一段八位随机数
          randomId = Time.now.to_i.to_s + rand(100000000).to_s
          video_tag_html = <<-HTML
          <div class="onebox video-onebox videoWrap">
            <video id='#{randomId}' class="video-js vjs-default-skin vjs-16-9" controls preload="auto" width="100%" data-setup='{"fluid": true}'>
              <source src="#{@url}" type="application/x-mpegURL">
            </video>
          </div>
          HTML
        else
          # 原有处理非m3u8文件的代码保持不变
          escaped_url = ::Onebox::Helpers.normalize_url_for_output(@url)
          video_tag_html = <<-HTML
            <div class="onebox video-onebox">
              <video width='100%' height='100%' controls #{@options[:disable_media_download_controls] ? 'controlslist="nodownload"' : ""}>
                <source src='#{escaped_url}'>
                <a href='#{escaped_url}'>#{@url}</a>
              </video>
            </div>
          HTML
        end
        video_tag_html
      end

      def placeholder_html
        SiteSetting.enable_diffhtml_preview ? to_html : ::Onebox::Helpers.video_placeholder_html
      end
    end
  end
end

Rebuild docker image:
In project discourse_docker, edit file image\base\slim.Dockerfile, search # Discourse specific bits and change github link to your edited project.

rebuild image, and push it to dockerhub. change word in [].

docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [your dockerhub name]/[your image name]:[your image tag]
docker push [your dockerhub name]/[your image name]:[your image tag]

change launcher 95 line :

image="[your dockerhub name]/[your image name]:[your image tag]"

then rebuild app

./launcher rebuild app

edit theme:
Customize-> Themes → Custom CSS/HTML->Edit CSS/HTML
(If you dont have this button, you have to Export your theme then install it From your device.)

add videojs in head :

<link href="https://vjs.zencdn.net/8.10.0/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/8.10.0/video.min.js"></script></script>

add script in Body:

<script>
    setTimeout(() => {
        const domList =  document.querySelectorAll('.video-js');
        console.log(domList,'==domList');
        domList.forEach((ele, i) => {
            const videoElement = domList[i];
            const player = videojs(videoElement); // 将 DOM 元素传递给 videojs()
            player.ready(function() {
                console.log("Player is ready!");
            });
        });
    }, 200);
</script>

if you enable CSP, you should edit content security policy script src setting .