HTML5 video视频WebVtt字幕与样式控制实例页面

回到相关文章 »

效果:

代码:

CSS代码:
::cue {
    background: none;
    color: #fff;
    text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
    font-size: medium;
}
::cue(v[voice=hanhan]) {
   color: green;
}
::cue(.red) {
    color: red;
}
                
HTML代码:
<video id="video" width="180" height="314" autoplay autobuffer>
    <source src="//video.zhangxinxu.com/video/sing-song.mp4" type="video/mp4">
    <track src="./sing-song_style.vtt" kind="subtitles" label="中文字幕" srclang="zh" default>
</video>
                
sing-song.vtt代码:
WEBVTT

00:00:00.001 --> 00:00:01.000
请把你的锅

00:00:01.001 --> 00:00:03.500
带回你的虾

00:00:03.501 --> 00:00:07.000
请把你的微笑留下…… 

00:00:07.501 --> 00:00:10.000
<v hanhan>请把你的锅

00:00:10.001 --> 00:00:12.000
<c.red>带回你的虾

00:00:12.001 --> 00:00:15.000
请把你的微笑留下<i>扭摆</i>