::cue伪元素和::cue()函数使用示意实例页面

展示

代码

• HTML：

  <video id="video" width="180" height="314" autoplay>
      <source src="./sing-song.mp4" type="video/mp4">
      <track src="./sing-song_style.vtt" kind="subtitles" label="中文字幕" srclang="zh" default>
  </video>
  <p><button onClick="video.play();">播放</button></p>

• 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;
  }

• WebVTT：

  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
  <v hanmeimei>请把你的微笑留下…… 
  
  00:00:07.501 --> 00:00:10.000
  <v lilei>请把你的锅
  
  00:00:10.001 --> 00:00:12.000
  <c.red>带回你的虾
  
  00:00:12.001 --> 00:00:15.000
  请把你的微笑留下<i>扭摆</i>