H5 video标签使用

相关链接：

• H5 video开发问题及相关知识点
• H5 video 全屏播放

♢ 基本用法

video 标签最基本的使用是，指定src并加上controls属性，这样在支持的浏览器上便可以播放了。如果浏览器不支持video标签则会显示标签中的提示文字

<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls>
    当前浏览器不支持video标签
</video>
复制代码

提示文字可以再放在其他标签中，如再套个p标签

<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls>
    <p> 当前浏览器不支持video标签 </p>
</video>
复制代码

♢ 使用source标签

source标签可以为同一video元素指定不同的视频格式（来源），让浏览器自行选择自己支持的格式播放，不支持的视频源会被忽略

<video controls>
    <source src="some-video.mp4" type="video/mp4">
    <source src="some-video.ogg" type="video/ogg">
    <p> 当前浏览器不支持video标签 </p>
</video>复制代码

♢ 配置多个属性，满足需求

给video标签设置属性，以满足一定的需求，如loop进行循环播放，width指定video的宽度

<video
    controls
    loop
    width="400"
    src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
     <p>当前浏览器不支持video标签</p>
 </video>复制代码

转载于:https://juejin.im/post/5ce0370de51d4510b168864a