I edit file lib\onebox\engine\video_onebox.rb to parser link that endwith m3u8.
However, when I paste the m3u8 link from an external site, the video fails to parse correctly.
If I upload a file to the website, get an m3u8 link from this site, and then paste it into the reply box and refresh the page, the video plays perfectly. However, there are some styling issues with the onebox.
Here is the code I edited.
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
edit this file lib/onebox/engine/video_onebox.rb
you should merge change into test-passed branch.
# 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 [].
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.)