028 - 一个时代的结束(下)
本帖最后由 不二如是 于 2019-7-2 17:39 编辑上一集： 027 - 一个时代的结束(上)
http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg
万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、audio 元素
本讲我们学习在网页中加载音频文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<audio src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/audio_tag.mp3"controls>
您的浏览器不支持 audio 元素。
</audio>
</body>
</html>
src 属性指定资源路径。
controls 属性添加控制条。
2、WebVTT 格式
WebVVT 的全称是 Web Video Text Tracks Format，即互联网视频文本轨道格式。
WebVVT 是 <track> 元素用于显示时间文本轨道的格式，WebVVT 文件中的文本将根据时间戳添加到 <video> 元素指定的视频文件中。
WebVVT 必须是以 UTF-8 编码的纯文本格式，不过你可以自由选择使用 Tab 或者空格进行缩进。
更多参看：小甲鱼带大家玩转 HTML5 字幕格式（WebVVT）
格式：
[*]第一行标识符：WEBVTT
[*]空格
[*]按照时间戳指定内容
参考字幕：
WEBVTT
00:01.000 --> 00:04.000
在1s到4s间添加字幕
00:05.000 --> 00:09.000
5s到9s间添加字幕
关于文件的使用，请参看 track 元素。
3、track 元素
track 元素用来将字幕文件加载到指定视频资源中。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
</head>
<body>
<video src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4" width="640" height="360"controls>
您的浏览器不支持 HTML5 video 标签。
<track src="en_track.vtt" srclang="en" label="English" kind="subtitles" default>
</video>
</body>
</html>
准备的 vtt 字幕：
WEBVTT FILE
1
00:00:01.500 --> 00:00:02.000
ilovefishc.com
2
00:00:02.500 --> 00:00:04.300
Life is Short , I Use Python
3
00:00:05.000 --> 00:00:07.000
Tst.dadada
字幕文件可以支持中文也可以支持英文，主要在下面几个属性的设置。
srclang 属性，值为 zh，代表中为；值为 en，代表英文。
label 属性用来充当备注标签。
kind 属性拓展说一下，它用来表明文字轨迹是哪种功能。
默认值是 subtitles，也就是说如果没有添加 kind 属性，kind 会被认为是 subtitles 。
（如果有 kind 值，其不合法，则会被认为是 metadata 。）
subtitles，就是我们平常看电影看动漫时候下面出现的普通字幕，一般是翻译，或者采访时候口音不清的字幕显示。
有时候还会标注一些说明，例如，显示人物姓名身份，当前场景地或者标注之前语言的梗在哪里等。
还有一个值是 captions 。
captions，专指隐藏式字幕（Closed Captions），简称CC。
释义如下图：
文字说明（可不看）：
隐藏字幕（Closed Captioning，简称CC)是电视节目或影碟中为有特殊情况或者需要的观众而准备的宇幕，例如观众在听力上有障碍，或者需要无音条件下观赏节目。此时字幕中可使用一些解释性的语言来描述节目内容。
有兴趣的参看：**** Hidden Message *****
根据测试，从效果上而言，subtitles 和 captions 几乎看不到任何区别，有区别的应该是在语义上，或者字幕性质上。
subtitles 主要就是对人说话进行翻译或确认；
而 captions 不仅需要人对话的内容提示，紧张的背景音乐，或者汽车吱吱作响的刹车声都需要在字幕中描述出来。
这样，即使用户静音也能知道视频里到底在传达什么。
如果是经常看国外影视作品的小伙伴肯定会有类似的字幕体验，有的就对话字幕，有的事无巨细，就是 subtitles 和 captions 的区别。
4、source 元素
为 picture , audio 或者 video 元素指定多个媒体资源。
代码：
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>鱼C-零基础入门学习Web（Html5+Css3）</title>
<body>
<video controls>
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
您的浏览器不支持 video 元素。
</video>
</body>
</html>
如果通过 source 元素加载多个媒体，那么 picture，audio，video 就不需要指定 src 属性了。
最后小甲鱼老师放了一个雷总的彩蛋：
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：029 - 小姐姐，我住在这个城市
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
居然还没人回复，我来拔得头筹 {:5_109:} WebVTT WebVVT{:5_94:} {:5_102:} 66666666666666666666666 kangkng 我想做 Are U OK 的作業 顶楼主啦..希望楼主多发精品好帖啦..... 1 .. 123 娃 好厉害！ 111 {:9_231:} 1
来看看咯 学习了 查看隐藏内容
28
页:
[1]
2