محلل 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
          # Set type attribute based on file extension
          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، إذا كان كذلك، استخدم قالب 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 إلى مشروعك الذي تم تحريره.

---

إعادة بناء الصورة، ودفعها إلى dockerhub. قم بتغيير الكلمة في [].

docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [اسم مستخدم dockerhub الخاص بك]/[اسم صورتك]:[علامة صورتك]
docker push [اسم مستخدم dockerhub الخاص بك]/[اسم صورتك]:[علامة صورتك]

---

قم بتغيير السطر 95 في launcher:

image="[اسم مستخدم dockerhub الخاص بك]/[اسم صورتك]:[علامة صورتك]"

ثم أعد بناء التطبيق

./launcher rebuild app

---

تحرير الثيم:
تخصيص → الثيمات → CSS/HTML مخصص → تحرير CSS/HTML
(إذا لم يكن لديك هذا الزر، يجب عليك تصدير الثيم الخاص بك ثم تثبيته من جهازك.)

أضف 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>

أضف السكربت في الجسم:

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