温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML5 视频播放 <video>

发布时间:2020-02-26 00:39:23 来源:网络 阅读:577 作者:Hello_Prudence 栏目:移动开发

HTML5 中的视频播放

=====================================================================

<video>

-------不需要下载任何额外的浏览器视频播放插件

-------完全由浏览器自身实现视频的解码和播放


<video src=" " controls  poster="xx.jpg"></video>


 ------video标签的属性---------

controls 显示视频播放控件 (布尔属性)

autoplay 页面加载后自动播放视频 (布尔属性)

        preload---1.none 视频播放前,浏览器不会预先下载视频资源,用户不点击播放,会节省带宽

 2.metadata  视频播放前,浏览器不会预先下载视频资源,但会获取资源的元数据(视频大小,


持续时间,视频格式,前几帧画面。

 3.auto(默认) 浏览器根据实际情况动态决定。


*******如果设置了autoplay属性,那么preload属性的值会被忽略

muted  静音播放  (布尔属性)

loop   自动循环播放  (布尔属性)

poster  设置视频的封面

width height

---------------------------------------视频文件的格式--------------------------------------

HTML5 视频播放 <video>


---------------------------------------------------------------------

html5 提供了 source 标签,浏览器从上到下查找source元素,直到找到它能播放的一种格式

HTML5 视频播放 <video>  

    对于每个source元素,浏览器都会加载视频文件的元文件,查看能不能播放这个视频,这个过程可能很耗费时间。

解决方案:

HTML5 视频播放 <video>

HTML5 视频播放 <video>


兼容所有浏览器:

HTML5 视频播放 <video>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI