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