如何解决在不同浏览器版本下播放视频的问题。

最近在做公式官网，需要播放公司的宣传视频。

在网上找到了方便的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浏览器，为了让视频在不同的浏览器播放。

我的做法是：在视频加载前判断浏览器的类型，如果是谷歌使用[b]<video>.是iE就使用<embed>[/b]

代码如下：

       $(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浏览器

        })

这样就解决在不同浏览器下播放视频的问题。有什么不足的地方请大家尽情补充。