马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-5-29 09:51 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
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>
没办法，规定（有图为证）：
为啥这么设计呢？
防止尴尬吧。
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">
loop 属性，指定后，视频就会自动循环播放哦。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-4-30 10:06:55
置顶卡
千斤顶
显身卡
发表于 2019-5-5 12:29:28
发表于 2020-2-12 01:21:50
