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

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



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

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

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

{:5_95:}

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

{:5_102:}

药水哥 发表于 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） 期待{:10_254:}

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

因为为了防止有人恶作剧

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

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

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

1

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

00

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

啊大大

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

1

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

回复看看看

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

11

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

{:10_254:}{:10_254:}{:10_254:}

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

{:9_231:}

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

来了

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

np
页: [1] 2
查看完整版本: 027 - 一个时代的结束(上)