2. 技术
    3. HTML5-03-视频播放器 全面解析

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

    技术2022-07-11  88

    文章目录

    一、定义video二、控制菜单2.1 显示控制菜单2.2 autoplay+muted 实现自动播放(会静音)2.3 封面 poster2.4 preload 视屏加载方式2.5 loop 循环2.6 source 指定优先加载的视频格式 及 兼容提示

    一、定义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>

    参考：菜鸟教程 source-type属性

    效果：

    当不支持VIDEO标签时：

    Processed: 0.010, SQL: 9