# Onebox parser m3u8 link and play with videojs

**URL:** <https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426>\
**Category:** Development\
**Tags:** onebox\
**Created:** [February 23, 2024, 4:26am UTC](https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426 "2024-02-23T04:26:20Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Creatures\_Prehistori](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/creatures_prehistori/32/329607_2.png) [@Creatures\_Prehistori](https://meta.discourse.org/u/Creatures_Prehistori)\
**Post date:** [February 26, 2024, 5:56am UTC](https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426/4 "2024-02-26T05:56:21Z")

</div>

edit this file `lib/onebox/engine/video_onebox.rb`  
you should merge change into `test-passed` branch.

```plaintext
# 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文件，如果是，则使用适用于Video.js的HTML模板
        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

```

* * *

Rebuild docker image:  
In project `discourse_docker`, edit file `image\base\slim.Dockerfile`, search `# Discourse specific bits ` and change github link to your edited project.

* * *

rebuild image, and push it to dockerhub. change word in `[]`.

```plaintext
docker build --no-cache -t mydiscourse -f slim.Dockerfile .
docker tag mydiscourse:latest [your dockerhub name]/[your image name]:[your image tag]
docker push [your dockerhub name]/[your image name]:[your image tag]

```

* * *

change `launcher` 95 line :

```plaintext
image="[your dockerhub name]/[your image name]:[your image tag]"

```

then rebuild app

```plaintext
./launcher rebuild app

```

* * *

edit theme:  
Customize-\> Themes → Custom CSS/HTML-\>Edit CSS/HTML  
(If you dont have this button, you have to Export your theme then install it From your device.)

add videojs in head :

```plaintext
<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>

```

add script in Body:

```plaintext
<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>

```

* * *

if you enable CSP, you should edit `content security policy script src ` setting .

---

_[View the full topic](https://meta.discourse.org/t/onebox-parser-m3u8-link-and-play-with-videojs/296426)._