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
제 작업 과정을 담은 영상이 있습니다.
VideoJS를 사용하여 동영상 스트리밍 재생에 성공했습니다. 이 스레드는 이제 닫힙니다.
좋아요! 다른 사용자들에게 도움이 될 테니, 여기에서 해결책을 공유해 주실 수 있을까요? 
이 파일 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 파일인지 확인하고, 해당되는 경우 Video.js에 적합한 HTML 템플릿 사용
if @url.match(%r{\.m3u8$})
# 타임스탬프를 가져오고 8자리 무작위 숫자를 추가
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에 push하세요. [] 안의 단어를 변경하세요.
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]
launcher 95번째 줄을 변경하세요:
image="[your dockerhub name]/[your image name]:[your image tag]"
그 후 앱을 재빌드하세요
./launcher rebuild app
테마 편집:
Customize → Themes → Custom CSS/HTML → Edit CSS/HTML
(이 버튼이 없다면 테마를 내보낸 후 내 기기에서 설치해야 합니다.)
head에 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>
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); // DOM 요소를 videojs()에 전달
player.ready(function() {
console.log("Player is ready!");
});
});
}, 200);
</script>
CSP를 활성화한 경우, content security policy script src 설정을 편집해야 합니다.
제목을 Onebox parser m3u8 link and play with videojs으로 변경해도 될까요?