网页内嵌媒体的完美实现

项目中经常需要用到视频和音频的插入与控制。但在使用中发现要使浏览器完美地呈现视频和音频并不是那么一件简单的事。各个浏览器不同的解析方式导致这一行为实施起来十分地困难。摸了一大堆石头，发现以下方式是可行的。（我所测试的视频格式swf格式，音频是是mp3格式）

flash视频播放

<video>标签定义视频，比如电影片段或其他视频流。
这样就解决问题了吗，不，它不支持IE8及以下。

提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器不支持的情况下会显示内部文本。

<embed>标签定义嵌入的内容，比如插件。
现在行了吗？还是不行。因为windows平台的IE利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。
而<embed>标签是用于Netscape Navigator2.0及以后的浏览器或其它支持Netscape插件的浏览器。
<object>标签标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash。
浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。
而幸运的是，object 对象提供了解决方案。如果未显示 object 元素，就会执行位于 <object> 和 </object> 之间的代码。通过这种方式，我们能够嵌套多个 object 元素（每个对应一个浏览器）。
注释：标签定义用于对象的 run-time 设置。

最后综合一下就行了：

<object id="" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
        WIDTH="740" HEIGHT="420" id="myMovieName">
            <!-- src -->
            <param name=movie value="http://www.mafengwo.cn/swf/videoPlayer.swf">
            <param name=quality value="high">
            <param name=bgcolor value="#000">
            <param name=allowfullscreen value="true">
            <param name=wmode value="transparent">
            <param name=allowscriptaccess value="always">
            <!-- important -->
            <param name=flashvars value="userid=06232AA4161AAAB6&amp;videoid=E9A575F51098D4C19C33DC5901307461&amp;mode=api&amp;autostart=false&amp;jscontrol=false">
            <embed src="http://www.mafengwo.cn/swf/videoPlayer.swf" quality="high" bgcolor="#000" width="740" height="420"
                        name="myMovieName" align="" type="application/x-shockwave-flash"
                        pluginspage="http://www.macromedia.com/go/getflashplayer" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" flashvars="userid=06232AA4161AAAB6&amp;videoid=E9A575F51098D4C19C33DC5901307461&amp;mode=api&amp;autostart=false&amp;jscontrol=false">
            </embed>
</object>

“classid”和“codebase”属性必须要精确地按上例所示的写法写，它们告诉浏览器自动下载flash player的地址。如果你没有安装过flash player 那么IE3.0以后的浏览器会跳出一个提示框访问是否要自动安装flash player。
“pluginspage”属性告诉浏览器下载flash player的地址，如果还没有安装flash player的话，用户安装完后需要重启浏览器才能正常使用。

音频的播放与控制

<audio> 标签定义声音，比如音乐或其他音频流。
提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器不支持的情况下会显示内部文本。
它与<video>是相似的，它也同样不支持IE8及以下浏览器。
<audio>+<embed>

<audio autoplay="autoplay" id="audio">
  <source src={{audioSrc}} type="audio/mp3" />
  <embed id="embed" height="0" type="audio/mp3" src={{audioSrc}} name="sound" MASTERSOUND />
</audio>

经检测火狐无法播放，其他浏览器可以完美呈现。

<object>
火狐可以完美播放：

<object data={{audioSrc}} type="application/x-mplayer2" width="0" height="0" id="object">
    <param name="src" value={{audioSrc}}>
    <param name="autostart" value="1">
    <param name="playcount" value="infinite">
</object>

现在，我们可以通过浏览器检测的方式，对不同浏览器采用不同的方法。

if(navigator.userAgent.indexOf("Firefox")!=-1){
    //火狐
}else{
    //其他浏览器
}

<audio>、<embed>和<object>的js控制播放和暂停

<audio> : audio.pause() / audio.play();
<embed> : embed.stop() / embed.play();
<object> : obj.controls.stop() / obj.controls.play();

我的博客:http://bigdots.github.io、http://www.cnblogs.com/yzg1/

如果觉得本文不错的话，帮忙点击下面的推荐哦,谢谢！