Onebox parser link m3u8 e riproduzione con videojs

Sviluppatore
1

Ho modificato il file lib\\onebox\\engine\\video_onebox.rb per analizzare i link che terminano con m3u8.

Tuttavia, quando incollo un link m3u8 da un sito esterno, il video non viene analizzato correttamente.

Se carico un file sul sito web, ottengo un link m3u8 da questo sito, quindi lo incollo nella casella di risposta e aggiorno la pagina, il video viene riprodotto perfettamente. Tuttavia, ci sono alcuni problemi di stile con il onebox.

Ecco il codice che ho modificato.

        if file_extension == '.m3u8'
          m3u8_html_tag(escaped_url)
        else
          # Imposta l'attributo type in base all'estensione del file
          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

Ecco un video del mio processo.

1 Mi Piace
2

Ho utilizzato con successo VideoJS per la riproduzione di video in streaming. Questa discussione è ora chiusa.

1 Mi Piace
3

Fantastico! Pensi di poter condividere la soluzione qui, sarebbe utile per altri utenti. :+1:

2 Mi Piace
4

modifica questo file lib/onebox/engine/video_onebox.rb
dovresti unire la modifica nel branch test-passed.

# frozen_string_literal: true

module Onebox
  module Engine
    class VideoOnebox
      include Engine
      # Aggiunge la corrispondenza per i file 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
        # Determina se si tratta di un file m3u8, in caso affermativo, utilizza il template HTML per Video.js
        if @url.match(%r{\\.m3u8$})
          # Ottiene il timestamp e aggiunge otto cifre casuali
          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
          # Il codice originale per gestire i file non m3u8 rimane invariato
          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

Ricostruisci l’immagine docker:
Nel progetto discourse_docker, modifica il file image\base\slim.Dockerfile, cerca # Discourse specific bits e cambia il link di github con il tuo progetto modificato.

ricostruisci l’immagine e caricala su dockerhub. cambia la parola tra parentesi [].

docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [il tuo nome dockerhub]/[il tuo nome immagine]:[il tuo tag immagine]
docker push [il tuo nome dockerhub]/[il tuo nome immagine]:[il tuo tag immagine]

modifica la riga 95 di launcher:

image="[il tuo nome dockerhub]/[il tuo nome immagine]:[il tuo tag immagine]"

quindi ricostruisci l’app

./launcher rebuild app

modifica tema:
Personalizza → Temi → CSS/HTML personalizzato → Modifica CSS/HTML
(Se non hai questo pulsante, devi esportare il tuo tema e poi installarlo dal tuo dispositivo.)

aggiungi videojs nell’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>

aggiungi script nel 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); // Passa l'elemento DOM a videojs()
            player.ready(function() {
                console.log("Player is ready!");
            });
        });
    }, 200);
</script>

se abiliti CSP, dovresti modificare l’impostazione content security policy script src.

1 Mi Piace
5

Posso cambiare il titolo in: Analizzatore Onebox link m3u8 e riproduzione con videojs?

1 Mi Piace
6

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.