Analizar enlace m3u8 con Onebox parser y reproducir con videojs

[Creatures_Prehistori (EvanSun)]

Edito el archivo lib\\onebox\\engine\\video_onebox.rb para analizar enlaces que terminan en m3u8.

Sin embargo, cuando pego el enlace m3u8 de un sitio externo, el video no se analiza correctamente.

Si subo un archivo al sitio web, obtengo un enlace m3u8 de este sitio y luego lo pego en el cuadro de respuesta y actualizo la página, el video se reproduce perfectamente. Sin embargo, hay algunos problemas de estilo con el onebox.

Aquí está el código que edité.

        if file_extension == '.m3u8'
          m3u8_html_tag(escaped_url)
        else
          # Establecer el atributo de tipo según la extensión del archivo
          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

Aquí hay un video de mi proceso.

[Creatures_Prehistori (EvanSun)]

He utilizado VideoJS con éxito para la reproducción de vídeo en streaming. Este hilo ahora está cerrado.

[Arkshine]

¡Genial! ¿Crees que podrías compartir la solución aquí, sería útil para otros usuarios.

[Creatures_Prehistori (EvanSun)]

edita este archivo lib/onebox/engine/video_onebox.rb
debes fusionar el cambio en la rama test-passed.

# frozen_string_literal: true

module Onebox
  module Engine
    class VideoOnebox
      include Engine
      # Añadir coincidencia para archivos 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
        # Determinar si es un archivo m3u8, si es así, usar la plantilla HTML para Video.js
        if @url.match(%r{\\.m3u8$})
          # Obtener la marca de tiempo y añadir un número aleatorio de ocho dígitos
          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
          # El código original para manejar archivos que no son m3u8 permanece sin cambios
          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

---

Reconstruye la imagen docker:
En el proyecto discourse_docker, edita el archivo image\\base\\slim.Dockerfile, busca # Discourse specific bits y cambia el enlace de github a tu proyecto editado.

---

reconstruye la imagen y empújala a dockerhub. cambia la palabra en [].

docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [tu nombre de dockerhub]/[tu nombre de imagen]:[tu etiqueta de imagen]
docker push [tu nombre de dockerhub]/[tu nombre de imagen]:[tu etiqueta de imagen]

---

cambia la línea 95 de launcher:

image="[tu nombre de dockerhub]/[tu nombre de imagen]:[tu etiqueta de imagen]"

luego reconstruye la aplicación

./launcher rebuild app

---

edita el tema:
Personalizar → Temas → CSS/HTML personalizado → Editar CSS/HTML
(Si no tienes este botón, tienes que exportar tu tema e instalarlo desde tu dispositivo.)

añade videojs en el 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>

añade script en el 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); // Pasa el elemento DOM a videojs()
            player.ready(function() {
                console.log("Player is ready!");
            });
        });
    }, 200);
</script>

---

si habilitas CSP, deberías editar la configuración content security policy script src.

[Creatures_Prehistori (EvanSun)]

¿Puedo cambiar el título a: Analizador de Onebox de enlaces m3u8 y reproducción con videojs?