学习：从零玩转HTML5前端+跨平台开发（video标签(掌握)）

最新推荐文章于 2021-06-05 06:19:08 发布

转载最新推荐文章于 2021-06-05 06:19:08 发布 · 435 阅读

31 篇文章

订阅专栏

A:video属性:播放视频
1.autoplay: 自动播放
2.controls: 控制条
3.poster: 占位图片
4..loop: 广告视频循环播放
5.muted: 静音
6.preload: 预加载视频和autoplay冲突
7.height: 800px
8.width: 300px
B:第二种格式浏览器适配问题三种适配格式
<video>
<source src = "" type = "video/webm"> </source>
<source src = "" type = "video/mp4"> </source>
<source src = "" type = "video/ogg"> </source>
</video>
video播放视频浏览器必须支持HTML5 用JS框架html5media

audio播放音频标签和video基本一样但是属性height/width/poster不能用

视频标签<video>
格式：
<video src="mage/NJ.jpg" autoplay="autoplay" controls=“controls” poster="image/NJ.jpg" loop="loop" preload="preload>
</video>
标签属性解析：
如果设置了autoplay属性，那么preload就会失效
autoplay:用于告诉viideo标签是否需要播放视频
controls:用于告诉viideo标签是否需要显示控制条（播放按钮已经进度条等）
poster::用于告诉viideo标签视频没有播放之前的占位（显示）图片
loop：一般用于做广告视频，用于告诉video视频播放完毕之后是否循环播放
muted:静音

video标签属性：
src：用于高速video标签需要播放的视频地址
autoplay：用于高速video标签是否需要自动播放视频
control：用于高速video标签是否需要显示控制条
poster：用于高速video标签视频没有播放之前显示的占位图片
loop：一般用于做广告视频，用于高速video标签视频播放外币之后，是否需要循环播放
preload：预加载视频，但是需要preload和autoplay相冲，如果设置了autoplay属性，那么preload属性就会失效
muted：静音
width：和img标签中的一模一样
height：

什么是video标签
作用:
播放视频
格式:
<video src=""></video>
video标签的属性
src：用于告诉video标签需要播放的视频地址
autoplay：用于告诉video标签是否需要自动播放视频
controls：用于告诉video标签是否显示控制条
poster：用于告诉video标签视频没有播放之前显示的图片
loop：一般用于做广告视频，用于告诉video标签视频播放完毕后是否需要循环播放
preload：预加载视频，但是需要注意proload和auto相冲，如果设置了autoplay属性，那么proload属性失效
unted：静音的功能

格式2的由来：
由于视频数据非常非常重要，所以五大浏览器厂商都不愿意支持别人的视频格式，所以导致没有一种视频格式是所有浏览器都支持的。这个时候，W3C为了解决这个问题，所以推出了第2种格式
video支持3种视频格式，可以通过source标签指定三种不同的视频格式，那么播放的时候，就会从三种格式中选择一种支持的播放。

video标签的第二种格式
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>

由于视频数据非常非常重要，所以五大浏览器常山都不愿意支持别人的视频格式，所以导致了没有一种视频给事是所有浏览器都支持的，这个时候W3C为了解决这个问题，所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题

当前通过video第二种格式，虽然所有浏览器都支持的视频格式，但是显然所有浏览器都通过video标签播放视频还有个前提条件，就是浏览器必须支持h5标签，否则同样无法播放；
通过js框架html5media来实现

当前video标签的第2种格式虽然能够指定所有浏览器都支持的视频格式，但是还浏览器需要支持video标签，支持HTML5标签；否则同样无法播放。为了让过去的一些不支持video标签的浏览器版本能够播放视频，需要通过JS框架（html5media框架）