最近在做公式官网,需要播放公司的宣传视频。
在网上找到了方便的H5标签 --<video> 标签定义视频,比如电影片段或其他视频流。
关于<video>标签的说明用法--http://www.w3school.com.cn/html5/html5_video.asp
代码如下:
<video id="movie" style=" margin-top:20px;" src="视频地址" width="304" height="180" preload controls>
<source src="pr6.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="pr6.ogv" type="video/ogg; codecs=theora,vorbis" />
<source src="视频地址" />
</video>
效果:
于是就简单的完成了视频播放功能。
但是在IE8一下的浏览器却是不支持H5标签的。
于是我又找到了IE8以下版本的播放方式:<embed>
代码如下:
<embed src="<%=spsrc %>" style=" margin-top:20px;" autostart="false" width="304" height="220" title="双击全屏" controls="controls"></embed>
效果:
这两种方式虽然播放界面不同,但是功能都达到了我想要的效果。(第二中没有找到显示全面按钮的方法,有谁知道吗?。。)
现在多数电脑仍然会使用低版本的IE浏览器,为了让视频在不同的浏览器播放。
我的做法是:在视频加载前判断浏览器的类型,如果是谷歌使用<video>.是iE就使用<embed>
代码如下:
$(document).ready(function () {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
if (userAgent.indexOf("Chrome") > -1) {
document.getElementById("sp").innerHTML = "<video id='movie' style=' margin-top:20px;' src='<%=spsrc %>' width='304' height='180' preload controls><source src='pr6.webm' type='video/webm; codecs=vp8,vorbis' /><source src='pr6.ogv' type='video/ogg; codecs=theora,vorbis' /><source src='<%=spsrc %>' /></video>"
}
else {
document.getElementById("sp").innerHTML = "<embed src='<%=spsrc %>' style=' margin-top:20px;' autostart='false' width='304' height='220' title='双击全屏' preload controls='controls'></embed>";
} //判断是否IE浏览器
})
这样就解决在不同浏览器下播放视频的问题。有什么不足的地方请大家尽情补充。