HTML5基础知识 - Track元素

通过Track元素和vtt文件可以为一个视频video对象添加本地化字幕。

track

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1362
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
        font: 100% "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
        margin: 0;
    }
    #log {
        background-color: gray;
        color: white;
        padding: 10px;
        margin-left: 20px;
        display: inline-block;
    }
    header {
        background: #FFCC99;
        color: white;
        -moz-box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
        -webkit-box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
        box-shadow: 0 2px 8px -3px rgba(0, 0, 0, .5), 0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;
        text-shadow: 1px 1px 1px #444;
    }
    header h1,
    header h2 {
        display: inline-block;
        padding: 12px 15px;
        font-size: 105%;
        line-height: 1;
        margin: 0;
    }
    header h1 {
        background: #FF9966;
    }
    #excerpt {
        padding: 20px;
        background: #fcfaea;
    }
    .arrow-right {
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 18px solid transparent;
        border-bottom: 18px solid transparent;
        border-left: 18px solid #FF9966;
        margin-bottom: -11px;
    }
    #content {
        padding: 20px;
        color: #333;
    }
    input,
    textarea {
        font-size: 100%;
    }
    </style> <style> #video-column {
        float: left;
        width: 50%;
        margin-top: 20px;
    }
    #reflection-button {
        margin: 20px 0;
    }
    #track-column {
        float: left;
        width: 45%;
        margin-top: 20px;
    }

HTML

<header>
    <h1>Track Element</h1>
    <div class="arrow-right"></div>
    <h2>Showing timed subtitles on video</h2>
</header>
<div id="excerpt">
    The track element let's you use a vtt file to render subtitles in a video element. Play the video to test this feature.
</div>
<div id="content">
    <div id="video-column" class="center">
        <video width="390" id="clip" class="playr_video" controls>
            <source src="/uploads/141102/google_developer_stories.webm" type='video/webm; codecs="vp8, vorbis"' />
            <track label="English subtitles" kind="subtitles" srclang="en" src="/uploads/141102/video-subtitles-en.vtt" default /> Your browser does not support the video tag
        </video>
    </div>

<div id="track-column" class="center">
        <textarea style="font-size: 13px; font-family: monospace, courier; width: 380px; height: 250px" readonly>
            WEBVTT FILE 1 00:00:00.500 --> 00:00:02.000 D:vertical A:start The Web is always changing 2 00:00:02.500 --> 00:00:04.300 and the way we access it is changing 3 00:00:05.000 --> 00:00:07.000 The source of that change is
            <c.highlight>you</c>

4 00:00:07.100 --> 00:00:11.000 Developers all around the world who are using our tools to create great new things 5 00:00:11.200 --> 00:00:13.200 and with so many tools, the sky is the limit 6 00:00:14.500 --> 00:00:16.500 But it cant happen without
                you and your ideas 7 00:00:17.500 --> 00:00:18.700 We want to know you better 8 00:00:18.700 --> 00:00:21.000 so we created a new place just for that 9 00:00:21.000 --> 00:00:22.000 to hear from <u>you</u> 10 00:00:22.500
                --> 00:00:25.000 We want to hear what inspires you as a developer 11 00:00:25.500 --> 00:00:27.000 and how we can help. 12 00:00:27.000 --> 00:00:30.800 Here you can record a video, share stories with us and more 13 00:00:31.000 --> 00:00:34.000
                Let us know what being a Google developer means to you 14 00:00:34.000 --> 00:00:38.200 and you can talk to us in person at Google Developer events all over the world. 15 00:00:38.500 --> 00:00:41.000 so we can learn how to support you
                better. 16 00:00:41.000 --> 00:00:44.600 Oh, btw, we also started rolling a new site for Google Developers 17 00:00:44.700 --> 00:00:49.400 Not just code but community, news, tools and other resources 18 00:00:49.400 --> 00:00:51.000 and
                cake 19 00:00:51.200 --> 00:00:54.000 Like any open source project it's a work in progress 20 00:00:54.100 --> 00:00:57.000 with your help it can be great 21 00:00:57.000 --> 00:01:00.000 L:12% developers.google.com/stories 21 00:01:00.500
                --> 00:01:04.000 Change is important to the Web. Help us keep changing it together
        </textarea>
    </div>
    <p id="log"></p>

通过Track元素和vtt文件可以为一个视频video对象添加本地化字幕。

track

编辑器支持Emmet

快捷键

通过Track元素和vtt文件可以为一个视频video对象添加本地化字幕。

track

HTML5 Canvas一直指向鼠标方向的箭头

HTML5 SVG变色龙吃小飞虫动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：