16264人阅读
前端（91）
& & & & 译自：& & & &&转载请标明出处：蒋宇捷的博客()& & & & --------& & & & 我们在几年前就已经可以不需要插件在浏览器里播放视频了。但是在编码解码器方面，仍然存在一些困扰。现在问题已经集中在视频本身上面了：下一步将是添加资源到视频里，使其更容易访问并且为观众提供更多选择。& & & & 我们目前还没有说到下面的内容，这代表视频还不是非常便利，用户还不能非常轻松的定位到某一个特定的段落。值得庆幸的是，有一个名为的新格式标准正在筹划中。截止目前，它还只是在WHATWG的规范中，但是最近成立的将会很快在W3C中引入WebVTT规范。“你可能还记得一个类似的名为WebSRT的格式，最近正在讨论中。WebSRT已经被改名并被WebVTT所替代。”& & & & 一个WebVTT（.vtt）文件是一个简单的纯文本，里面包含了几种类型的视频信息：& & & &&字幕& & & &&关于对话的转译或者翻译。& & & &&标题& & & &&类似于标题，但是还包括音响效果和其他音频信息。& & & &&说明& & & &&预期为一个单独的文本文件，通过屏幕阅读器描述视频。& & & &&章节& & & &&旨在帮助用户浏览整个视频。& & & &&元数据& & & &&默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。& & & & 本文主要讨论，但是也会简单的提及。&“超出本文的范围但是值得提到的是，除其他内容外，表示共有多少文本轨道以及已经载入和准备使用多少轨道。如果你已经使用了这个API，。”如何制作并链接到一个WebVTT文件& & & &&制作一个WebVTT文件所需的只是一个简单的文本编辑器。在文件的第一行输入WEBVTT并且将其保存为一个.vtt格式的文件。未来我们预计现有的字幕工具如可以导出WebVTT格式。------------------------------------------------------------------------------------------------------------------------------------------WEBVTT这是一个最简单有效的WebVTT文件------------------------------------------------------------------------------------------------------------------------------------------& & & &&这就是所有你需要开始的。下一步，我们要在HTML文档中链接到这个文件。我们通过video元素的子元素来实现这一点。&track&元素包括一些可选的属性：o 源WebVTT文件（src）o 轨道的语言（srclang）o 用户可读的标签（label）以及o 是什么类型（kind）的轨道。类型属性的值来自于上面的列表（例如subtitles、captions等）。& & & &&在下面的例子里，我们使用一个&track&字幕元素。&video width=&640& height=&480& controls&
&source src=&video.mp4& type=&video/mp4& /&
&source src=&video.webm& type=&video/webm& /&
&track src=&subtitles.vtt& kind=&subtitles& srclang=&en& label=&English& /&
&!-- 用于垃圾浏览器的降级 --&
&/video&& & & &&关于属性的一些说明：o 如果没有指定类型，默认为字幕（subtitles）。o 如果类型是字幕（subtitles），需要指定srclang。o 不能有两个相同类型（king）的轨道有同一个标签（label）。& & & &&在上面的例子中，我们为一个&video&元素使用了两个不同的&src&元素（为了美妙的跨浏览器）。紧跟视频源后的是&track&元素，你可以有多个&track&元素来设置不同语言的字幕、标题和说明。“&track&并没有预设成一种特定的文件格式。支持，但是这种格式不会被其他浏览器厂商所支持”。WebVTT内容& & & &&现在我们知道如何创建一个WebVTT文件，以及如何在HTML文档中引用它。但它里面有什么内容？在该文件中，我们列出什么是“索引”。WebVTT文件可能只有一个索引，但它也可以包含任何你想要的个数。每个索引从一个ID开始，紧跟的是时间的设置，然后是文字。每个索引由一个空行分隔。这里有一个标题的示例：------------------------------------------------------------------------------------------------------------------------------------------WEBVTT1<span style="color:#:01.000 --& <span style="color:#:10.000这是文本的第一行，从第1秒显示到第10秒。2<span style="color:#:15.000 --& <span style="color:#:20.000这是文本的第二行被分割为两行WebVTT示例内容------------------------------------------------------------------------------------------------------------------------------------------& & & &&上面的例子有两个索引。 时间必须写成hh:mm:ss.mmm格式，所以在这个例子中，时间发生在20秒内。 第二个索引会自动的被分成两行文字。& & & &&如果你有一段文本，需要以卡拉OK /彩绘标题的样式显示，那么你可以将计时器与文本内联：------------------------------------------------------------------------------------------------------------------------------------------1<span style="color:#:01.000 --& <span style="color:#:10.000 Never gonna give you up &00:00:01.000& Never gonna let you down &00:00:05.000& Never gonna run around and desert you卡拉OK风格的标题（译者注：以上歌词来自于歌曲《never gonna give you up》）------------------------------------------------------------------------------------------------------------------------------------------样式选项& & & &&前面的例子中指定了字幕和标题所需的最低配置，但你也可以为标题设置样式。让我们从索引的设置开始，可以写在时间设置的同一行：& & & &&D:vertical / D:vertical-lr& & & &&垂直的显示文本而不是水平的。 它也指定文本是增长到左边（ vertical）还是右侧（ vertical-lr ）。& & & &&L:X / L:X%& & & &&一个数字或百分比。 如果是一个百分点，那么它指从框架顶部开始的位置。如果是一个数字，它表示会是在多少行。& & & &&T:X%& & & &&视频上的水平文字位置。T:100% 表示文本会放在视频的右侧。& & & &&A:start / A:middle / A:end& & & &&文本在盒子内的对齐方式。start是左对齐， middle是居中对齐， end是右对齐。& & & &&S:X%& & & &&文本盒子的宽度，表示为视频宽度的百分比。& & & &&要使用这些设置，像下面这样把它们放在时间设置的旁边：& & & &&<span style="color:#:01.000 --& <span style="color:#:10.000 A:middle T:50%& & & &&00:00:01.000 --& <span style="color:#:10.000 A:end D:vertical& & & &&<span style="color:#:01.000 --& <span style="color:#:10.000 A:start T:100% L:0%& & & &&这会表现为以下的效果：------------------------------------------------------------------------------------------------------------------------------------------&字幕显示和对齐的例子------------------------------------------------------------------------------------------------------------------------------------------& & & &&除了上面的索引设置，你还可以为文本使用内联样式：& & & &&粗体文本& & & &&&b&Lorem ipsum&/b&& & & &&斜体文本& & & &&&i&dolor sit amet&/i&& & & &&带下划线的文本& & & &&&u&consectetuer adipiscing&/u&& & & &&Ruby文本（译者注：见我的《》一文）& & & &&&ruby&見&rt&み&/rt&&/ruby&& & & &&你甚至可以使用&c.myClass&&/c&来为一段文字应用CSS样式，给我们更多的样式选择。& & & &&最后，您可以添加一个声明，代表声音命名的&v Tom&&/v&。本声明完成了三件事情：1. 标题将在标题文本外展示语音（男声）。2. 语音的名字可以被一个屏幕阅读器读取，为男性或女性使用不同的声音事件。3. 它为样式提供了一个勾子，例如，所有男声的标题可以显示为蓝色的。章节& & & &&你可以和提供字幕、标题同样的方式提供一个视频章节的列表。开始同样的使用WEBVTT声明，然后是每个索引、声明的的章节编号，启动和停止时间、章节标题：------------------------------------------------------------------------------------------------------------------------------------------&track src=&chapters.vtt& kind=&chapters& srclang=&en& /&HTML&track&元素为视频提供章节设置------------------------------------------------------------------------------------------------------------------------------------------WEBVTT&Chapter 1&00:00:01.000 --& <span style="color:#:10.000Introductionto HTML5WebVTT文件包含视频章节标记------------------------------------------------------------------------------------------------------------------------------------------浏览器支持& & & &&关于WebVTT一个小问题：目前没有一个单独的浏览器支持它。 所有主流浏览器实现它的工作已经开始，所以我们应该很快的可以看到一些成果。值得庆幸的是，在此期间，有几个JavaScript polyfills（译者注：术语polyfill来源于一种填补裂缝的黏土的英国品牌 Polyfilla-即美国人熟知的填泥料。这里polyfill用来填补浏览器功能上的漏洞，模拟HTML5相关功能和技术）可用：o o o o 播放器(以及即将到来的)o 演示& & & &&我们发布了一个使用 polyfill的。我们最开始使用，但它不像那样支持许多特性，例如文本多行分隔和CSS样式。 在演示中，字幕在2秒到15秒间使用了粗体、下划线以及自定义样式。 这里是相关联的 。结论& & & &&本文介绍了为视频创建合适的WebVTT文件来添加字幕或者标题的基础知识。我们知道如何添加索引和章节，以及如何添加样式和修改视频上文本出现的方式。 虽然还没有浏览器正式支持它，但是未来会有很多为可访问的视频而支持，所以敬请。& & & & 最后，让我们感谢抽出时间来回答有关WebVTT的一些问题，以及她在这一领域的大量工作。阅读o 关注o o o o o o o o o o
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1823019次
积分：18901
积分：18901
排名：第483名
原创：158篇
转载：12篇
译文：46篇
评论：1434条
信天创投合伙人，百度魔图联合创始人
工作经历：百度、创新工场、腾讯、傲游
阅读：20644
文章：34篇
阅读：459819
文章：84篇
阅读：1090792
(1)(1)(1)(1)(1)(1)(2)(3)(1)(2)(5)(1)(1)(4)(5)(4)(3)(3)(6)(2)(5)(4)(3)(10)(9)(4)(4)(7)(3)(3)(2)(2)(4)(7)(10)(14)(4)(2)(1)(1)(2)(14)(4)(18)(31)十周年苹果发布会，不知道这一次在发布会上又会出现什么惊奇的演示APP。
随着 iPhone 8 的到来，我们也要开始进入面部识别时代了。新机所搭载的独特技术，据说...
据悉iOS 11 beta 10 的改进主要是集中在 iTunes、App Store、备忘录以及 Books 的后台...
这一次，“iPhone 8”又能改变什么呢？
苹果在 iOS 11 系统中对视频播放器进行了重新设计。
菲利普·席勒平时十分低调的，不过这次做慈善就很大手笔啊~
苹果支付的 Apple Music 收入分成将低于此前的协议。
如果没有意外的话，我们在几周之后就可以使用 ARKit。
从 PC 端到移动端，我们最爱的三国志回来了。
在平面设计世界，汉字是人类社会有史以来最伟大最成功的设计。
已经改旗易帜的知名手机游戏厂商 Gameloft 最近又有了新的动作，他们在全球范围内推出...
原著小说千万销量，动漫班底声优献声，预约阶段场面火爆，网易游戏呕血自研！不得不说...
如今这个满眼都是“屠龙宝刀油腻师姐点击就送开局只有一条狗”的辣眼网络文案世界，《...
早就已经在 Steam 上闯出名堂的独立游戏《归家异途》在无数玩家期盼的目光当中，于今...
《Dungeon Time Turbo》这款游戏的主题便是在地牢中探索，游戏采用俯瞰的方式进行，玩...
被掐住了供应链的上游，“iPhone 8” 想要获得成功，苹果还得找到新的供应商伙伴。
新 MacBook Pro 设备端口向 USB-C 过渡，iPhone 7 取消了 3.5mm 耳机接口，然而 Beats...
好吧，它们可能看起来很奇怪，但无线耳机能否成为我们与电脑互动的关键方式呢？
DockCase 保护壳解决了 MacBook Pro 的最大难题。
这款产品让 iPhone 用户更容易备份文件以及扩大存储。
在某些情况下，通过无线进行文件传输的效率依然赶不上物理介质。
从规格来说，你觉得这款摄像头怎么样？
品胜起诉苹果 MFI 认证涉嫌垄断，已经获得了北京知识产权法院立案受理。
本主题需要才能查看，如没有账号，戳我！
威锋旗下产品
Hi~我是威威！
沪公网安备 29号　|　沪ICP备号-1
新三板上市公司威锋科技（836555）
增值电信业务经营许可证：
Powered by Discuz!在html&title&&/title&标签添加图标，网页title左边显示网页的logo图标
来源：it-home
如图在黑色所画圆之中显示一个图标：
步骤一：在图片中显示图标，这里的图片只支持ico格式，需要转换图片格式.原始图像可以接受: .jpg .jpeg .gif .png等图像格式在这个网址http://www.bitbug.net/上传你的原始图片然后生成ico格式图标(百度ico可以找到制作ico图标的网站)；注意：图标要用 16*16 色的。。。(保证了兼容性，无论在哪个地方都可以显示)
步骤二：把图标放到网站根目录在引入图标网页标题左侧显示：收藏夹显示图标：&!DOCTYPE html&&html&
&meta charset="utf-8" /&
&title&一个有梦想咸鸭蛋&/title&
&!--网页标题左侧显示--&
&link rel="icon" rel="nofollow" href="1111.ico" type="image/x-icon"&
&!--收藏夹显示图标--&
&link rel="shortcut icon" rel="nofollow" href="1111.ico" type="image/x-icon"&
&/body&&/html&复制代码建议把生成的图标名称改掉，在引用；如生成后是bitbug_favicon.ico改为你起的名字.ico如果没有生效关闭浏览器重新打开；
怎么样获取别人的Logo
在网站首页 打开开发者工具；在Elements里里找到
点击右键在新标签页打开链接；Goolge是Open link in new tab注意要在href的链接地址右键不然没有Open link in new tab这个选项。
免责声明：本站部分内容、图片、文字、视频等来自于互联网，仅供大家学习与交流。相关内容如涉嫌侵犯您的知识产权或其他合法权益，请向本站发送有效通知，我们会及时处理。反馈邮箱&&&&。
学生服务号
在线咨询，奖学金返现，名师点评，等你来互动HTML5 &details& 标签_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
HTML5 &details& 标签
W3Cschool（）最大的技术知...|
总评分0.0|
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
你可能喜欢