Onebox 解析 m3u8 链接并用 videojs 播放

[Creatures_Prehistori (EvanSun)]

我编辑了文件 lib\\onebox\\engine\\video_onebox.rb 来解析以 m3u8 结尾的链接。

但是，当我从外部网站粘贴 m3u8 链接时，视频无法正确解析。

如果我将文件上传到网站，从该网站获取 m3u8 链接，然后将其粘贴到回复框中并刷新页面，视频就可以完美播放。但是，onebox 存在一些样式问题。

这是我编辑的代码。

        if file_extension == '.m3u8'
          m3u8_html_tag(escaped_url)
        else
          # 根据文件扩展名设置 type 属性
          type_attribute = case file_extension
                          when '.mov'
                            'video/quicktime'
                          when '.mp4'
                            'video/mp4'
                          when '.webm'
                            'video/webm'
                          when '.ogv'
                            'video/ogg'
                          else
                            ''
                          end
        source_tag = "<source src='#{escaped_url}'"
        source_tag += " type='#{type_attribute}'" unless type_attribute.empty?
        source_tag += '>'
        <<-HTML
          <div class="onebox video-onebox">
            <video class="video-js" controls #{@options[:disable_media_download_controls] ? 'controlslist="nodownload"' : ""}>
                #{source_tag}
              <a href='#{escaped_url}'>#{@url}</a>
            </video>
          </div>
          
          HTML
        end
      end

      def m3u8_html_tag(url)
        <<-HTML
          <div>
            <script src="https://hezheng-fmm.obs.cn-north-4.myhuaweicloud.com/jsdeliver/videojs/video.min.js"></script>
            <link href="https://hezheng-fmm.obs.cn-north-4.myhuaweicloud.com/jsdeliver/videojs/video-js.css" rel="stylesheet">
            <video class="video-js" controls>
              <source src='#{url}' type='application/x-mpegURL'>
            </video>
          </div>
        HTML
      end

这是我的操作视频。

[Creatures_Prehistori (EvanSun)]

我已成功使用 VideoJS 进行视频流播放。此话题现已关闭。

[Arkshine]

太好了！您认为您可以在这里分享解决方案吗？这对其他用户会有所帮助。

[Creatures_Prehistori (EvanSun)]

编辑此文件 lib/onebox/engine/video_onebox.rb
您应该将更改合并到 test-passed 分支。

# 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

---

重建docker镜像：
在项目 discourse_docker 中，编辑文件 image\base\slim.Dockerfile，搜索 # Discourse specific bits 并将 github 链接更改为您编辑过的项目。

---

重建镜像，并将其推送到dockerhub。更改 [] 中的单词。

docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [您的dockerhub名称]/[您的镜像名称]:[您的镜像标签]
docker push [您的dockerhub名称]/[您的镜像名称]:[您的镜像标签]

---

更改 launcher 的第 95 行：

image="[您的dockerhub名称]/[您的镜像名称]:[您的镜像标签]"

然后重建应用程序

./launcher rebuild app

---

编辑主题：
自定义 → 主题 → 自定义 CSS/HTML → 编辑 CSS/HTML
（如果您没有此按钮，则必须导出您的主题，然后从您的设备安装它。）

在 head 中添加 videojs：

<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>

在 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>

---

如果您启用了 CSP，则应编辑 content security policy script src 设置。

[Creatures_Prehistori (EvanSun)]

我可以将标题更改为：“Onebox 解析器 m3u8 链接并使用 videojs 播放”吗？