027 - 一个时代的结束(上)

不二如是 · 发表于 2019-4-30 10:06:55

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

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

x

本帖最后由不二如是于 2019-5-29 09:51 编辑

上一集：026 - 回眸一笑百媚生

登录/注册后可看大图

万众瞩目的零基础入门学习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">

复制代码

自动加载 img 文件下 main.jpg 图片，要注意，图片建议按照视频尺寸调整好大小，以防失真。

loop 属性，指定后，视频就会自动循环播放哦。

课后作业，完成了吗？

传送门

登录/注册后可看大图

下一集：028 - 一个时代的结束(下)

如果有收获，别忘了评分

：

登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅专辑☞（传送门）（不喜欢更要订阅

）

登录/注册后可看大图

徐硕风 · 发表于 2019-5-5 12:29:28

期待着博主的每一篇文章哦！

by2014 · 发表于 2019-8-22 21:38:39

莫西莫西 · 发表于 2019-8-30 10:35:35

药水哥 · 发表于 2019-9-1 01:16:05

444444444444444444444444

LeoDong-77 · 发表于 2019-11-8 00:10:16

cc887498 · 发表于 2019-12-14 22:32:20

尴尬之处就在这

LuckyTiger66 · 发表于 2020-2-12 01:21:50

零基础入门学习Web（JavaScript）期待

MYlindaxia · 发表于 2020-3-10 13:09:29

因为为了防止有人恶作剧

aa887498 · 发表于 2020-3-31 23:03:51

顶楼主啦..希望楼主多发精品好帖啦.....

Fire4EVER · 发表于 2020-6-19 17:11:09

昵称_cwb · 发表于 2020-8-27 09:08:47

pym131420 · 发表于 2020-11-8 09:23:43

啊大大

ingram123 · 发表于 2020-12-15 09:34:41

natapon · 发表于 2021-1-8 13:35:50

回复看看看

只想白嫖 · 发表于 2021-1-20 20:31:07

Bright06 · 发表于 2021-3-3 13:04:21

鱿鱼追不上我 · 发表于 2021-3-9 00:34:27

殷殷殷 · 发表于 2021-5-28 12:42:16

来了

747263992 · 发表于 2021-5-30 09:48:11

账号		自动登录	找回密码
密码			立即注册

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

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

评分

本帖被以下淘专辑推荐: