在DIV+CSS布局中怎么插入视频

html-css09

在DIV+CSS布局中怎么插入视频,第1张

通常情况下,使用<video>标签插入视频。这是HTML5中新增加的标签,某些老版本浏览器可能不会兼容(例如ie7)。简单设置视频的样式和控件即可(下面是代码)。

对于早期浏览器,使用Adobe flashplayer插件加载视频吧。

<video src="url" autoplay="autoplay" loop="loop" controls="controls" width="XXXpx">

    请更新你的浏览器到最新版本

</video>

<video controls="controls" >此标签中添加preload="auto"是预备播放点击后播放, 添加autoplay="autoplay"可以实现自动播放,详见W3school教程:网页链接

source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一,有些浏览器例如有些浏览器支持 mp4格式 ,那么它就播放第一个 mp4 格式的视频,如果它不支持就检查是不是支持下面的 ogg 视频,如果支持就播放,不支持的话继续向下,下面没有source了,那么就显示“Your browser does not support the video tag.”

注意:

如果你在 <video>内设置了 muted 属性,是可以通过 autoplay 实现视频的自动播放,反之则需要用户手动授权,点击播放才可以实现自动播放。

因为谷歌浏览器禁止页面在没有用户授权的情况下进行有声的视频播放