HTML5-03-视频播放器全面解析

最新推荐文章于 2024-08-08 07:07:26 发布

优雅哥cc

最新推荐文章于 2024-08-08 07:07:26 发布

阅读量9k

点赞数 1

分类专栏： HTML5 文章标签： HTML5 视频自动播放视频无限循环 HTML5视频控制条

本文链接：https://blog.csdn.net/weixin_43742708/article/details/107072956

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

一、定义video
二、控制菜单

一、定义video

<body>
    <video src="video.mp4" width="500" height="600px"></video>
</body>

效果：
在这里插入图片描述
参考：菜鸟教程

二、控制菜单

2.1 显示控制菜单

<body>
    <video src="video.mp4" width="500" height="600px" controls></video>
</body>

效果：
在这里插入图片描述

2.2 autoplay+muted 实现自动播放(会静音)

自动播放：autoplay
静音:muted

有些浏览器为了给用户更好的使用体验，自动播放的时候需要加上静音才能实现。

<body>
    <video src="video.mp4" width="500" height="600px" autoplay muted controls></video>
</body>

2.3 封面 poster

使用此属性不可设置自动播放，否则没效果，平白浪费带宽加载图片。

<body>
    <video src="video.mp4" width="500" height="600px" autoplay controls poster="girl.jpg"></video>
</body>

效果：
在这里插入图片描述

2.4 preload 视屏加载方式

加载方式	解释
auto	指一旦页面加载，则开始加载音频/视频。(加载页面时，所有数据全部加载)
metadata	指当页面加载后仅加载音频/视频的元数据。(仅加载关键帧、宽高尺寸)
none	指页面加载后不应加载音频/视频。

以下是三种方式的显示效果：
在这里插入图片描述

2.5 loop 循环

视频会无限循环

2.6 source 指定优先加载的视频格式及兼容提示

浏览器会优先尝试使用第一个文件，当该文件不存在或根本无法识别时，依次往下查找能够识别的

 <video width="500" height="600px" loop  autoplay muted controls preload="metadata">
     <source src="video.qlv" type="video/alv">
     <source src="video.mp4" type="video/mp4">
     您当前的浏览器不支持VIDEO视屏标签
 </video>