html5如何实现自动播放视频

html-css032

html5如何实现自动播放视频,第1张

我们使用html5的video标签,可以不依赖于任何第三方的插件或控件,直接在浏览器中实现视频播放功能。

在了解了video标签之后,下面我们就使用html5的video标签来实现视频播放。

现在,我们打开浏览器,看一看具体的效果:

为了更好地兼容各种浏览器,你可以为一个video标签添加多个source子标签,每个source标签引用一个不同格式的视频文件。这样,html5浏览器会自动在这些source标签中从上到下依次寻找并识别出该浏览器可以播放的第一个视频文件并进行播放,从而实现兼容多个浏览器的视频播放功能。

注:html5的video标签目前只支持播放.mp4、.ogg、.webm等几种格式的视频文件,暂不支持其他格式的视频文件。此外,不同的html5浏览器支持的视频文件格式也略有不同,这种状况可能会在未来的html5中得以改善。

HTML5中的video和audio标签中有一个autoplay属性,添加这个属性后就会在文件加载完成以后自动播放。具体代码如下:

video:

<video autoplay="autoplay">

  <source src="视频路径" />

</video>

audio:

<audio autoplay="autoplay">

  <source src="视频路径" />

</audio>

除此属性外还有如下属性:

controls:如果出现该属性,则向用户显示控件,比如播放按钮。

height:设置视频播放器的高度。

loop:如果出现该属性,则当媒介文件完成播放后再次开始播放。

URL:要播放的视频的 URL。

preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。不与autoplay同用。

1、打开Hbuilder,在项目管理器中放置mp4格式视频点击index.html进入。

2、在这里通过红色方框中的命令来建立一个HTML5的文件。

3、这个时候添加video元素就可以插入视频了,用autoplay设置自动播放,controls设置控制栏。

4、用source可以连接对应的视频资源;

5、完成以后左边的是播放按钮、视频进度控制条等工具。

6、而右边可以调节声音大小和全屏播放,有服务器的话还可以下载。