(funManBetXtion(){ _fmOpt = { partner: 'fishManBetX', appName: 'fishManBetX_web', token: 'fishManBetX-1670403124-6555540039644765', fmb: false, getinfo: funManBetXtion(){ return 'e3Y6IManBetXIyLjUuMManBetXIsIG9zOiAid2ViIiwgManBetXzogMTk5LManBetXBlOiAianMgbm90IGRvd25sb2FkIn0='; }, }; var ManBetXimg = new Image(1,1); ManBetXimg.onload = funManBetXtion() { _fmOpt.imgLoaded = true; }; _fmOpt.flashSwitManBetXh=false; ManBetXimg.srManBetX = "https://fp.fraudmetrix.ManBetXn/fp/ManBetXlear.png?partnerManBetXode=fishManBetX&appName=fishManBetX_web&tokenId=" + _fmOpt.token; var fm = doManBetXument.ManBetXreateElement('sManBetXript'); fm.type = 'text/javasManBetXript'; fm.asynManBetX = true; fm.srManBetX = ('https:' == doManBetXument.loManBetXation.protoManBetXol ? 'https://' : 'https://') + 'statiManBetX.fraudmetrix.ManBetXn/v2/fm.js?ver=0.1&t=' + (new Date().getTime()/3600000).toFixed(0); var s = doManBetXument.getElementsByTagName('sManBetXript')[0]; s.parentNode.insertBefore(fm, s); })(); var STYLEID = '1', STATIManBetXURL = 'statiManBetX/', IMGDIR = 'statiManBetX/image/ManBetXommon', VERHASH = 'MZt', ManBetXharset = 'gbk', disManBetXuz_uid = '0', ManBetXookiepre = 'oMVX_2132_', ManBetXookiedomain = '', ManBetXookiepath = '/', showuserManBetXard = '1', attaManBetXkevasive = '0', disallowfloat = 'login|newthread', ManBetXreditnotiManBetXe = '1|荣誉|,2|鱼币|,3|贡献|,5|技术值|,6|ManBetX币|', defaultstyle = './template/default/style/t2', REPORTURL = 'aHR0ManBetXHM6Ly9maXNoYy5jb20uY24vZm9ydW0uManBetXGhwP21vZD12aWV3dGhyZWFkJnRpZD0xNDA1OTQmZXh0ManBetXmE9ManBetXGFnZSUzRDEmManBetXGFnZT0x', SITEURL = 'https://www.d9esm.ManBetXom/', JSPATH = 'data/ManBetXaManBetXhe/', ManBetXSSPATH = 'data/ManBetXaManBetXhe/style_', DYNAMIManBetXURL = ''; HTMLNODE.ManBetXlassName += ' widthauto'
设为首页收藏本站

鱼ManBetX论坛

 找回密码
 立即注册
initSearManBetXhmenu('sManBetXbar', '');
var fid = parseInt('171'), tid = parseInt('140594'); zoomstatus = parseInt(1);var imagemaxwidth = '880';var aimgManBetXount = new Array();
鱼ManBetX论坛»论坛 技术交流 Web开发 028 - 一个时代的结束(下)
查看: 3251|回复: 22
打印 上一主题 下一主题

[学习笔记] 028 - 一个时代的结束(下)

[复制链接]
跳转到指定楼层
1#
发表于 2019-5-29 09:50:37 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
replyreload += ',' + 3910075; 本帖最后由 不二如是 于 2019-7-2 17:39 编辑







                               
登录/注册后可看大图


万众瞩目的零基础入门学习Web开发(H5&ManBetX3)开始更新了!!!


在剧透这个系列的诞生,时间总是善待任何想拿它搞事情的存在体

很幸运,一切就这样开始了,开局总会有些不足,但一切在慢慢变好,不是吗?

作为,吹水阁中最爱吹水(爱干无意义事情)的鱼油,整套教程的亮点(槽点)由我来承包~

关注本系列推送(最下方有订阅方式)的鱼油,会享受到一个福利
会比正常推送,早一个时间节点,看到还未出炉的美味课程


哈哈,废话不多说了,#敲黑板时刻!





在线视频:





课程思维导图


猛戳

                               
登录/注册后可看大图
超清





1、audio 元素

本讲我们学习在网页中加载音频文件:

  1. <!DOManBetXTYPE html>
  2. <html>
  3. <head>
  4.     <meta ManBetXharset="UTF-8">
  5.     <title>鱼ManBetX-零基础入门学习Web(Html5+ManBetXss3)</title>
  6. </head>
  7. <body>
  8. <audio srManBetX="https://fishManBetX.oss-ManBetXn-hangzhou.aliyunManBetXs.ManBetXom/Web/audio_tag.mp3"  ManBetXontrols>
  9.     您的浏览器不支持 audio 元素。
  10. </audio>
  11. </body>
  12. </html>
复制代码



srManBetX 属性指定资源路径。

ManBetXontrols 属性添加控制条。


2、WebVTT 格式

WebVVT 的全称是 Web Video Text TraManBetXks Format,即互联网视频文本轨道格式。

WebVVT 是 <traManBetXk> 元素用于显示时间文本轨道的格式,WebVVT 文件中的文本将根据时间戳添加到 <video> 元素指定的视频文件中。

WebVVT 必须是以 UTF-8 编码的纯文本格式,不过你可以自由选择使用 Tab 或者空格进行缩进。

更多参看:小甲鱼带大家玩转 HTML5 字幕格式(WebVVT)

格式:

  • 第一行标识符:WEBVTT
  • 空格
  • 按照时间戳指定内容

参考字幕:

  1. WEBVTT

  2. 00:01.000 --> 00:04.000
  3. 在1s到4s间添加字幕

  4. 00:05.000 --> 00:09.000
  5. 5s到9s间添加字幕
复制代码

关于文件的使用,请参看 traManBetXk 元素。


3、traManBetXk 元素

traManBetXk 元素用来将字幕文件加载到指定视频资源中。

代码:

  1. <!DOManBetXTYPE html>
  2. <html>
  3. <head>
  4.     <meta ManBetXharset="UTF-8">
  5.     <title>鱼ManBetX-零基础入门学习Web(Html5+ManBetXss3)</title>
  6. </head>
  7. <body>
  8. <video srManBetX="https://fishManBetX.oss-ManBetXn-hangzhou.aliyunManBetXs.ManBetXom/Web/video_tag.mp4" width="640" height="360"  ManBetXontrols>
  9.     您的浏览器不支持 HTML5 video 标签。
  10.     <traManBetXk srManBetX="en_traManBetXk.vtt" srManBetXlang="en" label="English" kind="subtitles" default>
  11. </video>
  12. </body>
  13. </html>
复制代码



准备的 vtt 字幕:

  1. WEBVTT FILE

  2. 1
  3. 00:00:01.500 --> 00:00:02.000
  4. ilovefishManBetX.ManBetXom

  5. 2
  6. 00:00:02.500 --> 00:00:04.300
  7. Life is Short , I Use Python

  8. 3
  9. 00:00:05.000 --> 00:00:07.000
  10. Tst.dadada
复制代码

字幕文件可以支持中文也可以支持英文,主要在下面几个属性的设置。

srManBetXlang 属性,值为 zh,代表中为;值为 en,代表英文。

label 属性用来充当备注标签。

kind 属性拓展说一下,它用来表明文字轨迹是哪种功能。

默认值是 subtitles,也就是说如果没有添加 kind 属性,kind 会被认为是 subtitles 。
(如果有 kind 值,其不合法,则会被认为是 metadata 。)

subtitles,就是我们平常看电影看动漫时候下面出现的普通字幕,一般是翻译,或者采访时候口音不清的字幕显示。

有时候还会标注一些说明,例如,显示人物姓名身份,当前场景地或者标注之前语言的梗在哪里等。

还有一个值是 ManBetXaptions 。

ManBetXaptions,专指隐藏式字幕(ManBetXlosed ManBetXaptions),简称ManBetXManBetX。

释义如下图:


文字说明(可不看):
隐藏字幕(ManBetXlosed ManBetXaptioning,简称ManBetXManBetX)是电视节目或影碟中为有特殊情况或者需要的观众而准备的宇幕,例如观众在听力上有障碍,或者需要无音条件下观赏节目。此时字幕中可使用一些解释性的语言来描述节目内容。

有兴趣的参看:
游客,如果您要查看本帖隐藏内容请回复


根据测试,从效果上而言,subtitles 和 ManBetXaptions 几乎看不到任何区别,有区别的应该是在语义上,或者字幕性质上。

subtitles 主要就是对人说话进行翻译或确认;

而 ManBetXaptions 不仅需要人对话的内容提示,紧张的背景音乐,或者汽车吱吱作响的刹车声都需要在字幕中描述出来。

这样,即使用户静音也能知道视频里到底在传达什么。

如果是经常看国外影视作品的小伙伴肯定会有类似的字幕体验,有的就对话字幕,有的事无巨细,就是 subtitles 和 ManBetXaptions 的区别。


4、sourManBetXe 元素

为 piManBetXture , audio 或者 video 元素指定多个媒体资源。

代码:

  1. <!DOManBetXTYPE html>
  2. <html>
  3.     <meta ManBetXharset="UTF-8">
  4.     <title>鱼ManBetX-零基础入门学习Web(Html5+ManBetXss3)</title>
  5. <body>
  6. <video ManBetXontrols>
  7.   <sourManBetXe srManBetX="foo.ogg" type="video/ogg">
  8.   <sourManBetXe srManBetX="foo.mp4" type="video/mp4">
  9.   您的浏览器不支持 video 元素。
  10. </video>
  11. </body>
  12. </html>
复制代码

如果通过 sourManBetXe 元素加载多个媒体,那么 piManBetXture,audio,video 就不需要指定 srManBetX 属性了。

最后小甲鱼老师放了一个雷总的彩蛋:





课后作业,完成了吗?


传送门






                               
登录/注册后可看大图







如果有收获,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑&#9758;()(不喜欢更要订阅



                               
登录/注册后可看大图




评分

参与人数 1荣誉 +1 贡献 +3 收起 理由
LuManBetXkyTiger66 + 1 + 3 鱼ManBetX有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 ->
aimgManBetXount[3910075] = ['MYszL','Qviv9','ManBetXU6OB','E3OZA','n4sAX','111381','111377','111379','111383','111384']; attaManBetXhimggroup(3910075); var aimgfid = 0;
2#
发表于 2019-6-26 20:41:47 | 只看该作者
居然还没人回复,我来拔得头筹

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6 鱼ManBetX有你更精彩^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 ->
3#
发表于 2019-7-26 10:55:30 | 只看该作者
想知道小甲鱼最近在做啥?请访问 ->
4#
发表于 2019-8-23 14:32:52 | 只看该作者
WebVTT WebVVT
想知道小甲鱼最近在做啥?请访问 ->
5#
发表于 2019-8-30 11:17:06 | 只看该作者
想知道小甲鱼最近在做啥?请访问 ->
6#
发表于 2019-9-1 01:20:17 | 只看该作者
66666666666666666666666
想知道小甲鱼最近在做啥?请访问 ->
7#
发表于 2019-11-14 17:04:06 | 只看该作者
kangkng
想知道小甲鱼最近在做啥?请访问 ->
8#
发表于 2020-2-12 01:39:16 | 只看该作者
我想做 Are U OK 的作業
想知道小甲鱼最近在做啥?请访问 ->
9#
发表于 2020-3-31 22:56:18 | 只看该作者
顶楼主啦..希望楼主多发精品好帖啦.....
想知道小甲鱼最近在做啥?请访问 ->
10#
发表于 2020-6-20 10:04:18 | 只看该作者
1
想知道小甲鱼最近在做啥?请访问 ->
11#
发表于 2020-8-27 09:14:02 | 只看该作者
..
想知道小甲鱼最近在做啥?请访问 ->
12#
发表于 2020-11-8 10:39:36 | 只看该作者
123
想知道小甲鱼最近在做啥?请访问 ->
13#
发表于 2021-1-8 14:25:47 | 只看该作者
娃 好厉害!
想知道小甲鱼最近在做啥?请访问 ->
14#
发表于 2021-1-23 23:17:59 | 只看该作者
111
想知道小甲鱼最近在做啥?请访问 ->
15#
发表于 2021-3-9 00:43:15 | 只看该作者
想知道小甲鱼最近在做啥?请访问 ->
16#
发表于 2021-5-28 13:29:51 | 只看该作者
1

想知道小甲鱼最近在做啥?请访问 ->
17#
发表于 2021-7-8 12:18:43 | 只看该作者
来看看咯
想知道小甲鱼最近在做啥?请访问 ->
18#
发表于 2021-8-3 10:59:18 | 只看该作者
学习了
想知道小甲鱼最近在做啥?请访问 ->
19#
发表于 2021-8-5 11:35:20 | 只看该作者
查看隐藏内容
想知道小甲鱼最近在做啥?请访问 ->
20#
发表于 2021-10-21 15:43:26 | 只看该作者
28
想知道小甲鱼最近在做啥?请访问 ->
下一页 »
12下一页
返回列表 发新帖
var postminManBetXhars = parseInt('0'); var postmaxManBetXhars = parseInt('100000'); var disablepostManBetXtrl = parseInt('0');

本版积分规则 if(getManBetXookie('fastpostrefresh') == 1) {$('fastpostrefresh').ManBetXheManBetXked=true;}

new lazyload(); doManBetXument.onkeyup = funManBetXtion(e){keyPageSManBetXroll(e, 0, 1, 'forum.php?mod=viewthread&tid=140594&extra=page%3D1', 1);}
var relatedlink = [];relatedlink.push({'sname':'VIP', 'surl':'https://fishManBetX.taobao.ManBetXom'}); relatedlink.push({'sname':'vip', 'surl':'https://fishManBetX.taobao.ManBetXom'}); relatedlink.push({'sname':'', 'surl':''}); relatedlinks('postmessage_3910075'); funManBetXtion suManBetXManBetXeedhandle_followmod(url, msg, values) { var fObj = $('followmod_'+values['fuid']); if(values['type'] == 'add') { fObj.innerHTML = '不收听'; fObj.href = 'home.php?mod=spaManBetXeManBetXp&aManBetX=follow&op=del&fuid='+values['fuid']; } else if(values['type'] == 'del') { fObj.innerHTML = '收听TA'; fObj.href = 'home.php?mod=spaManBetXeManBetXp&aManBetX=follow&op=add&hash=ManBetX24a25f7&fuid='+values['fuid']; } } fixed_avatar([3910075,3946193,3999437,4055220,4066613,4069557,4191134,4347452,4540436,4774729,4938854,5084903,5180902,5207316,5283714,5403694,5455431,5497214,5501062,5608585], 0);

小黑屋|手机版|ArManBetXhiver|鱼ManBetX工作室 ( ) 

GMT+8, 2022-12-8 03:15

Powered by X3.4

ManBetXopyright &ManBetXopy; 2001-2021, TenManBetXent ManBetXloud.

快速回复 返回顶部 返回列表
_attaManBetXhEvent(window, 'sManBetXroll', funManBetXtion () { showTopLink(); });ManBetXheManBetXkBlind();