|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-7-2 17:39 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
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
- 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)是电视节目或影碟中为有特殊情况或者需要的观众而准备的宇幕，例如观众在听力上有障碍，或者需要无音条件下观赏节目。此时字幕中可使用一些解释性的语言来描述节目内容。
有兴趣的参看：
根据测试，从效果上而言，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 属性了。
最后小甲鱼老师放了一个雷总的彩蛋：
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
|
评分
-
查看全部评分
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-5-29 09:50:37
置顶卡
千斤顶
显身卡
发表于 2019-6-26 20:41:47
发表于 2020-2-12 01:39:16
