Парсер Onebox для ссылок m3u8 и воспроизведение через videojs

Разработка
1

Я отредактировал файл 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

Вот видео моего процесса.

2

Я успешно использовал VideoJS для потокового воспроизведения видео. Эта тема закрыта.

3

Отлично! Не могли бы вы поделиться решением здесь? Это было бы полезно для других пользователей. :+1:

4

Отредактируйте файл 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; если да, используется HTML-шаблон для Video.js
        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 на ссылку на ваш отредактированный проект.

Пересоберите образ и отправьте его в Docker Hub. Замените слова в [ ].

docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [ваше имя в Docker Hub]/[имя вашего образа]:[тег вашего образа]
docker push [ваше имя в Docker Hub]/[имя вашего образа]:[тег вашего образа]

Измените строку 95 в launcher:

image="[ваше имя в Docker Hub]/[имя вашего образа]:[тег вашего образа]"

Затем пересоберите приложение:

./launcher rebuild app

Отредактируйте тему:
Customize → Themes → Custom CSS/HTML → Edit CSS/HTML
(Если у вас нет этой кнопки, вам нужно экспортировать вашу тему, а затем установить её со своего устройства.)

Добавьте Video.js в секцию 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>

Добавьте скрипт в 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.

5

Могу ли я изменить заголовок на: Onebox parser m3u8 link and play with videojs?