关键词:HTML/video/track/WebVTT/字幕/subtitle

来源：互联网发布：网红晚晚有淘宝店吗编辑：程序博客网时间：2024/05/04 06:32

本人从事浏览器开发相关工作, 近期因工作需要对video的字幕进行部分课题调查. 与大家分享如下.

文件一: <<test.html>>

<html><head><title>Simple view test</title><style type="text/css">::cue(.red){ color: red; }::cue(.blue){ color: blue; }::cue(.green){ color: green; }::cue(.yellow){ color: yellow; }::cue(.background-red){ background-color: red; }::cue(.background-blue){ background-color: blue; }::cue(.background-green){ background-color: green; }::cue(.background-yellow){ background-color: yellow; }::cue(.font-family-Georgia){ font-family:Georgia; }::cue(.font-style-italic){ font-style:italic; }::cue(.font-size-60){ font-size:60px; }::cue(.font-size-12){ font-size:40px; }::cue(.text-decoration-underline){ text-decoration:underline; }::cue(.text-decoration-underline-color){ border-bottom:3px solid #00F; color:#090 }::cue(.text-shadow){ font-size:40px; text-shadow: -1px 0 #f00,0 -1px #f00,1px 0 #f00,0 1px #f00; }::cue(.outline){ outline:#00ff00 dotted thick; }::cue(.webkit-text-stroke){ font-size:40px; -webkit-text-stroke: 2px #FF75BF; }.divcss5-00F{ border-bottom:3px solid #00F; color:#090 } </style></head><p> <span class="divcss5-00F">dddddddddddddddddddd</span></p> <p> <span style="font-size:40px; -webkit-text-stroke: 2px #FF75BF ">-webkit-text-stroke: 2px #FF75BF</span></p> <p> <span style="font-size:40px; text-shadow: -1px 0 #f00,0 -1px #f00,1px 0 #333,0 1px #333; ">text-shadow</span></p> <body>        <video width="800" height="480" controls autoplay>  <source src="1.mp4" type="video/mp4" />  <track src="subtitles.vtt" kind="caption" srclang="en" label="English" />  <track src="subtitles.vtt" kind="caption" srclang="zh-cn" label="简体中文" /></video></body></html>

文件二:<<subtitles.vtt>>

WEBVTT FILE100:00:00.500 --> 00:00:02.000 D:vertical A:startThe Web is always changing200:00:02.500 --> 00:00:04.300 position:90% align:end size:35%<i>and the way we access it is changing</i>300:00:05.000 --> 00:00:07.000 position:50% align:end size:35%<b>The source of that change is <c.highlight>you</c></b>400:00:07.100 --> 00:00:11.000 region:fred align:middle<b>Developers all around the world who are using our tools to create great new things</b>500:00:11.200 --> 00:00:13.200 region:fred align:middle<u>and with so many tools, the sky is the limit</u>600:00:14.500 --> 00:00:16.500 position:90% align:end size:35%<u>But it cant happen without you and your ideas</u>700:00:17.500 --> 00:00:18.700 position:90% align:end size:35%We want to know you better800:00:18.700 --> 00:00:21.000 position:90% align:end size:35% so we created a new place just for that900:00:21.000 --> 00:00:22.000 line:10%to hear from <u>you</u>1000:00:22.500 --> 00:00:25.000 line:50%We want to hear what inspires you as a developer1100:00:25.500 --> 00:00:27.000 line:80%and how we can help.1200:00:27.000 --> 00:00:30.800  line:50%Here you can record a video, share stories with us and more1300:00:31.000 --> 00:00:34.000 Let us know what being a Google developer means to you1400:00:34.000 --> 00:00:38.200 and you can talk to us in person at Google Developer events all over the world.1500:00:38.500 --> 00:00:41.000 so we can learn how to support you better.1600:00:41.000 --> 00:00:44.600 <c.text-decoration-underline>Oh, btw, we also started rolling a new site for Google Developers</c>1700:00:44.700 --> 00:00:49.400 Not just code but community, news, tools and other resources1800:00:49.400 --> 00:00:51.000 <c.background-blue>and cake</c>1900:00:51.200 --> 00:00:54.000 <c.font-size-60>Like any open source project it's a work in progress</c>2000:00:54.100 --> 00:00:57.000 <c.font-family-Georgia>with your help it can be great</c>2100:00:57.000 --> 00:01:00.000 L:12%"developers.google.com/stories"2200:01:00.500 --> 00:01:20.000 line:50%<c.green.background-blue.font-family-Georgia.font-style-italic.font-size-60.text-decoration-underline.text-shadow>This text is red</c>2300:01:20.500 --> 00:01:40.000<c.text-shadow>font color</c>2400:01:40.500 --> 00:03:40.000end, bye.

0 0