Analyseur Onebox lien m3u8 et lecture avec videojs

J’ai modifié le fichier lib\\onebox\\engine\\video_onebox.rb pour analyser les liens se terminant par m3u8.

Cependant, lorsque je colle un lien m3u8 d’un site externe, la vidéo ne s’analyse pas correctement.

Si je télécharge un fichier sur le site, que j’obtiens un lien m3u8 de ce site, puis que je le colle dans la zone de réponse et que je rafraîchis la page, la vidéo se lit parfaitement. Cependant, il y a quelques problèmes de style avec le onebox.

Voici le code que j’ai modifié.

        if file_extension == '.m3u8'
          m3u8_html_tag(escaped_url)
        else
          # Définir l'attribut type en fonction de l'extension du fichier
          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

Voici une vidéo de mon processus.

J’ai utilisé avec succès VideoJS pour la lecture de vidéos en streaming. Ce fil de discussion est maintenant clos.

Super ! Pensez-vous pouvoir partager la solution ici, cela serait utile pour d’autres utilisateurs.

modifier ce fichier lib/onebox/engine/video_onebox.rb
vous devriez fusionner le changement dans la branche test-passed.

# frozen_string_literal: true

module Onebox
  module Engine
    class VideoOnebox
      include Engine
      # Ajout de la correspondance pour les fichiers 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
        # Déterminer s'il s'agit d'un fichier m3u8, si c'est le cas, utiliser le modèle HTML pour Video.js
        if @url.match(%r{\\.m3u8$})
          # Obtenir le timestamp et ajouter une chaîne aléatoire de huit chiffres
          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
          # Le code de traitement d'origine pour les fichiers non-m3u8 reste inchangé
          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

Reconstruire l’image docker :
Dans le projet discourse_docker, modifier le fichier image\\base\\slim.Dockerfile, rechercher # Discourse specific bits et changer le lien github vers votre projet modifié.

reconstruire l’image, et la pousser sur dockerhub. changer le mot entre crochets [].

docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [votre nom dockerhub]/[votre nom d'image]:[votre tag d'image]
docker push [votre nom dockerhub]/[votre nom d'image]:[votre tag d'image]

changer la ligne 95 de launcher :

image="[votre nom dockerhub]/[votre nom d'image]:[votre tag d'image]"

puis reconstruire l’application

./launcher rebuild app

modifier le thème :
Personnaliser → Thèmes → CSS/HTML personnalisé → Modifier CSS/HTML
(Si vous n’avez pas ce bouton, vous devez exporter votre thème puis l’installer depuis votre appareil.)

ajouter videojs dans le 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>

ajouter le script dans le 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); // Passer l'élément DOM à videojs()
            player.ready(function() {
                console.log("Player is ready!");
            });
        });
    }, 200);
</script>

si vous activez CSP, vous devriez modifier le paramètre content security policy script src.

Puis-je changer le titre en : Analyseur Onebox de liens m3u8 et lecture avec videojs ?

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