HTML5 视频:同时显示两个不同的字幕
HTML5 Video: Displaying two different subtitles simultaneously
我正在使用标准 HTML5 视频字幕功能在内置 HTML5 视频播放器中显示字幕(在 srt 和 vtt 中提供)。
<video width="100%" height="100%" autobuffer="" controls="" preload="auto" id="media" class="media embed-responsive-item">
<source type="video/ogg" src="podm.h264.mp4&t=ogv"></source>
<source type="video/mp4" src="podm.h264.mp4&t=mp4"></source>
<track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.vtt"></track>
<track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.srt"></track>
<p>Your browser does not support HTML5 video</p>
</video>
现在我需要同时显示两个不同的字幕,所以第二个字幕显示在第一个字幕之上。
(出乎意料)我在网络上找不到任何有关在 HTML5 视频中显示多个字幕的有用信息。我很确定我需要为此目的定制 hack。
我正在寻求建议 and/or 参考如何实现此功能(不使用 nonfree/windows-only 库和像 DivX 这样的播放器)。
你理解的是HTML5,有代码标准,谁会想要同时显示2srt ??
解决方案:
只需提供一个 srt,在每个字幕中还包括第二个字幕作为文本!!
示例 srt 脚本包括 ENG + FR 字幕:
1
00:00:30,342 --> 00:00:33,082
I came from city
Je suis venu de la ville
2
00:00:33,202 --> 00:00:36,530
do you play football?
ne vous jouez au football?
3
00:00:36,650 --> 00:00:39,965
to pay rent
de payer le loyer
我不确定,对于换行,你可以尝试使用:|或 \n 或 \N
使用浏览器的 built-in <video>
控件,您不能 select 两个文本轨道。
显示两个文本轨道,例如第一和第二,你可以使用 javascript:
video.textTracks[0].mode = 'showing';
video.textTracks[1].mode = 'showing';
在 Firefox 中有效,在 Chrome 中部分有效,在 Safari 中无效。
function main(){
let video = document.querySelector('#video');
video.textTracks[0].mode = 'showing';
video.textTracks[1].mode = 'showing';
/* fix cue overlap for Chrome */
if(window.chrome){
let sheet = document.querySelector('#videoStyle').sheet;
let rule = Array.prototype.find.call(sheet.rules, (r) => r.selectorText === 'video::-webkit-media-text-track-display');
let observer = new ResizeObserver((entries) => {
let height = entries[0].contentRect.height;
let controlsHeight = 72;
let maxCueLines = 4; // TODO adjust this according to your vtt
rule.style.setProperty('top', `calc(${Math.floor((1 - controlsHeight / height) * 100)}% - ${maxCueLines}em)`, 'important');
});
observer.observe(video);
}
}
document.addEventListener('DOMContentLoaded', main);
<div>
<strong>Showing two text tracks</strong><br/>
Firefox: supported, built-in<br/>
Chrome: partially supported, need trick to fix<br/>
Safari: not supported yet<br/>
</div>
<video id="video" width="640" height="360" controls=""
src="https://storage.googleapis.com/media-session/caminandes/short.mp4" crossorigin="anonymous" preload="metadata">
<track kind="captions" srclang="en" src="https://static.3playmedia.com/p/files/6157318/threeplay_transcripts/18335056.vtt?project_id=10127&format_id=51&refresh=1620709875" default="" />
<track kind="captions" srclang="en-GB" src="https://static.3playmedia.com/p/files/6157318/threeplay_transcripts/18335056.vtt?project_id=10127&format_id=51&refresh=1620709875" />
</video>
<style id="videoStyle">
video::cue {
background-color: transparent;
text-shadow: 1px 1px 2px #666666;
}
/* fix cue overlap for Chrome */
video::-webkit-media-text-track-display {
position: relative!important;
transform: none!important;
}
</style>
我正在使用标准 HTML5 视频字幕功能在内置 HTML5 视频播放器中显示字幕(在 srt 和 vtt 中提供)。
<video width="100%" height="100%" autobuffer="" controls="" preload="auto" id="media" class="media embed-responsive-item">
<source type="video/ogg" src="podm.h264.mp4&t=ogv"></source>
<source type="video/mp4" src="podm.h264.mp4&t=mp4"></source>
<track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.vtt"></track>
<track default="" label="English" srclang="en" kind="subtitle" src="podm.h264.srt"></track>
<p>Your browser does not support HTML5 video</p>
</video>
现在我需要同时显示两个不同的字幕,所以第二个字幕显示在第一个字幕之上。
(出乎意料)我在网络上找不到任何有关在 HTML5 视频中显示多个字幕的有用信息。我很确定我需要为此目的定制 hack。
我正在寻求建议 and/or 参考如何实现此功能(不使用 nonfree/windows-only 库和像 DivX 这样的播放器)。
你理解的是HTML5,有代码标准,谁会想要同时显示2srt ??
解决方案: 只需提供一个 srt,在每个字幕中还包括第二个字幕作为文本!!
示例 srt 脚本包括 ENG + FR 字幕:
1
00:00:30,342 --> 00:00:33,082
I came from city
Je suis venu de la ville
2
00:00:33,202 --> 00:00:36,530
do you play football?
ne vous jouez au football?
3
00:00:36,650 --> 00:00:39,965
to pay rent
de payer le loyer
我不确定,对于换行,你可以尝试使用:|或 \n 或 \N
使用浏览器的 built-in <video>
控件,您不能 select 两个文本轨道。
显示两个文本轨道,例如第一和第二,你可以使用 javascript:
video.textTracks[0].mode = 'showing';
video.textTracks[1].mode = 'showing';
在 Firefox 中有效,在 Chrome 中部分有效,在 Safari 中无效。
function main(){
let video = document.querySelector('#video');
video.textTracks[0].mode = 'showing';
video.textTracks[1].mode = 'showing';
/* fix cue overlap for Chrome */
if(window.chrome){
let sheet = document.querySelector('#videoStyle').sheet;
let rule = Array.prototype.find.call(sheet.rules, (r) => r.selectorText === 'video::-webkit-media-text-track-display');
let observer = new ResizeObserver((entries) => {
let height = entries[0].contentRect.height;
let controlsHeight = 72;
let maxCueLines = 4; // TODO adjust this according to your vtt
rule.style.setProperty('top', `calc(${Math.floor((1 - controlsHeight / height) * 100)}% - ${maxCueLines}em)`, 'important');
});
observer.observe(video);
}
}
document.addEventListener('DOMContentLoaded', main);
<div>
<strong>Showing two text tracks</strong><br/>
Firefox: supported, built-in<br/>
Chrome: partially supported, need trick to fix<br/>
Safari: not supported yet<br/>
</div>
<video id="video" width="640" height="360" controls=""
src="https://storage.googleapis.com/media-session/caminandes/short.mp4" crossorigin="anonymous" preload="metadata">
<track kind="captions" srclang="en" src="https://static.3playmedia.com/p/files/6157318/threeplay_transcripts/18335056.vtt?project_id=10127&format_id=51&refresh=1620709875" default="" />
<track kind="captions" srclang="en-GB" src="https://static.3playmedia.com/p/files/6157318/threeplay_transcripts/18335056.vtt?project_id=10127&format_id=51&refresh=1620709875" />
</video>
<style id="videoStyle">
video::cue {
background-color: transparent;
text-shadow: 1px 1px 2px #666666;
}
/* fix cue overlap for Chrome */
video::-webkit-media-text-track-display {
position: relative!important;
transform: none!important;
}
</style>