H5 video标签使用

8,034 阅读1分钟

相关链接:

♢ 基本用法

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>