027 - 一个时代的结束(上)
本帖最后由 不二如是 于 2019-5-29 09:51 编辑上一集:026 - 回眸一笑百媚生
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、Flash时代的结束
历史的必然趋势,在这里我们就不细聊了,参看:Adobe宣判Flash死刑:2020年停止开发和发行
2、video 元素
本节课我们都围绕 video 元素展开,更多玩法参看速查宝典:传送门
当我们在页面中使用 video 时,三个基础属性:
<video src="#" height="x" widht="x">
您的浏览器不支持 HTML5 video 标签。
</video>
width,height 属性指定视频的宽高,可以不写,但是当你编写一个视频网站类网页,尺寸一定要设计好。
src 是视频地址,可以是本地的,也可以是在线的:
src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4"
上面标签中的“您的浏览器不支持 HTML5 video 标签。”,只有在浏览器不支持 video 元素时才会显示。
使用 controls 属性可以在视频素材上增加控制操作:
<video width="640" height="360" src="http://fishc.oss-cn-hangzhou.aliyuncs.com/Web/video_tag.mp4" controls autoplay preload="metadata">
您的浏览器不支持 HTML5 video 标签。
</video>
进度条,播放/暂停钮,静音,放大,下载,画中画
autoplay 属性略显鸡肋,因为必须结合 muted 属性才能自动播放:
<video width="640" height="360" src="#"autoplay muted>
您的浏览器不支持 HTML5 video 标签。
</video>
尴尬之处就在这里,因为自动播放的是一段静音的视频...
没办法,规定(有图为证):
**** Hidden Message *****
为啥这么设计呢?
防止尴尬吧。
preload 属性,用来预加载视频,提升用户体验。
有言在先,为了考虑用户的流量,不要在蜂窝网络下使用,这个需要 JS 来实现,暂时不用管。
如果偏要预加载,建议将 preload 属性的值,指定为“metadata”:
<video width="640" height="360" src="#"preload="metadata">
只加载视频的元数据,提升加载速度。
有一点要注意:
如果同时指定了 autoplay 属性,浏览器会自动忽略 preload 属性。
poster 属性用来给视频添加封面,也就是视频没有播放的情况下的首图。
就像酱紫:
红框内容为有封面款
这是鱼C在BliBli的官方界面,还不快去关注:传送门
实现起来也很容易:
<video width="640" height="360" src="#" poster="img/main.jpg">
自动加载 img 文件下 main.jpg 图片,要注意,图片建议按照视频尺寸调整好大小,以防失真。
loop 属性,指定后,视频就会自动循环播放哦。
课后作业,完成了吗?
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集:028 - 一个时代的结束(下)
如果有收获,别忘了评分{:10_281:} :
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油,如果喜欢本系列学习笔记,请订阅 专辑☞(传送门)(不喜欢更要订阅{:10_297:} )
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
期待着博主的每一篇文章哦! {:5_95:} {:5_102:} 444444444444444444444444 你 尴尬之处就在这 零基础入门学习Web(JavaScript) 期待{:10_254:} 因为为了防止有人恶作剧 顶楼主啦..希望楼主多发精品好帖啦..... 1 00
啊大大 1 回复看看看 11 {:10_254:}{:10_254:}{:10_254:} {:9_231:} 来了
np
页:
[1]
2