html5结合flash实现视频文件在所有主流浏览器兼容播放

原创 2012年05月04日 18:19:55
由于html5的出现,让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持,并且各浏览器对于视频编码格式的支持不一致,这就需要我们考虑一个综合的实现方案,使得视频在不同浏览器中都能顺利播放,而且在老版本的浏览器中也能得到支持。

以下是结合项目经验,总结出的几种方案,与大家分享。

方案1、使用VideoJS插件实现兼容 插件下载http://videojs.com

使用新版VideoJS插件需要注意的是其使用方法:

使用步骤一:head部分添加

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

说明:上述javascript代码进适用于支持html5元素的IE版本,对于老版本的IE可以通过HTML5shiv来使不支持HTML5的浏览器支持HTML新标签。htnl5shiv主要解决HTML5提出的新的元素不被IE6/IE7/IE8识别,这些新元素不能作为父节点包裹子元素,且不能应用CSS样式。让CSS 样式应用在未知元素只需执行 document.createElement(elementName) 即可实现。html5shiv的工作原理也就是基于此。html5shiv的使用很简单,由于IE9是支持html5的,故只需要在head中添加如下代码即可:

<!–[if lt IE 9]> 
	<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]–>

使用步骤二:body显示视频部分添加

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="275" height="200" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">
	<source src="http://www.feiliu.com/zt/video/mv00.mp4" type='video/mp4'/>
	<source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/>
</video>

说明:这里的webm格式是针对FF浏览器的播放格式。

目前VideoJS最新升级的版本v3.2.0,本人已测试的V3.0以上都不支持IE6/IE7/IE8/,因此我们这里采用老版本v2.0.2实现。
例如文章《VideoJs Version 3 doesn't work on IE7 / IE8》 的相关说明请查看帮助文档http://help.videojs.com/
使用方法是:

步骤一:在页面head部分添加如下代码:

<link rel="stylesheet" href="css/video-js.css" type="text/css"/>
<script type="text/javascript" src="js/video.js"></script>
<script type="text/javascript">
// Must come after the video.js library

// Add VideoJS to all video tags on the page when the DOM is ready
VideoJS.setupAllWhenReady();//可选。不写此函数默认为显示播放控制条,鼠标移开隐藏

/* ============= OR ============ */

// Setup and store a reference to the player(s).
// Must happen after the DOM is loaded
// You can use any library's DOM Ready method instead of VideoJS.DOMReady

/*
VideoJS.DOMReady(function(){
  
  // Using the video's ID or element
  var myPlayer = VideoJS.setup("example_video_1");
  
  // OR using an array of video elements/IDs
  // Note: It returns an array of players
  var myManyPlayers = VideoJS.setup(["example_video_1", "example_video_2", video3Element]);

  // OR all videos on the page
  var myManyPlayers = VideoJS.setup("All");

  // After you have references to your players you can...(example)
  myPlayer.play(); // Starts playing the video for this player.
});
*/

/* ========= SETTING OPTIONS ========= */

// Set options when setting up the videos. The defaults are shown here.

/*
VideoJS.setupAllWhenReady({
  controlsBelow: false, // Display control bar below video instead of in front of
  controlsHiding: true, // Hide controls when mouse is not over the video
  defaultVolume: 0.85, // Will be overridden by user's last volume if available
  flashVersion: 9, // Required flash version for fallback
  linksHiding: true // Hide download links when video is supported
});
*/

// Or as the second option of VideoJS.setup

/*
VideoJS.DOMReady(function(){
  var myPlayer = VideoJS.setup("example_video_1", {
    // Same options
  });
});
*/
</script>
步骤二:在body显示视频位置添加如下代码:
<div class="vd">
    <!-- Begin VideoJS -->    
    <div class="video-js-box">
    <video id="example_video_1" class="video-js" width="280" height="210" controls preload="none" poster="http://www.feiliu.com/zt/img/20120417/img01.jpg">
        <source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4;' />
        <source src="http://www.feiliu.com/zt/video/test2.webm" type='video/webm'/>
        <object id="flash_fallback_1" class="vjs-flash-fallback" width="280" height="210" type="application/x-shockwave-flash" data="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf">
        <param name="movie" value="http://www.feiliu.com/zt/flash/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["http://www.feiliu.com/zt/img/20120417/img01.jpg", {"url": "http://www.feiliu.com/zt/video/mv01.flv","autoPlay":false,"autoBuffering":true}]}' />
        <img src="http://www.feiliu.com/zt/img/20120417/img01.jpg" width="280" height="210" alt="Poster Image"  title="No video playback capabilities." />
      </object>
    </video>
    </div>
    <!-- End VideoJS -->
</div>



说明:这段视频代码外层以一个class=“vd”的div分隔区别。这样,支持html5的浏览器,会逐个检测提供的视频编码格式,直到找到可以播放的格式为止,如果所有格式都不能播放,则尝试使用flowplayer这个flash播放器(支持上述mp4格式)对视频进行解码。对于不支持html5的浏览器,也使用flash播放。因此,使用该方案只需要提供一个mp4格式的视频即可实现在所有浏览器上播放,不过flash播放器对mp4格式的文件解码较慢,为了照顾用户体验,故而上述我们又增加了一种flv格式的选择。

这个方法有一缺点:算上页面上的其他js效果,由于使用了大量的js,视频检测机制占用了很大的系统资源,而且我的项目页面上有11个视频之多,造成了页面加载慢,降低了用户体验。出于此,第二套方案诞生。

方案2、由于目前大多数设备的浏览器对flash支持的很好,所以考虑页面一还是使用object/embed传统标签嵌入视频,用Adobe Flash Player播放。而对于不支持flash的苹果设备,制作另一个页面二。然后根据通过js程序对User-Agent的判断给不同的设备浏览器用户显示不同的页面,优酷网曾采用这种模式。

页面一flash传统标签的代码:

<div class="vd">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="280" height="210">
		<param name="movie" value="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false" />
		<param name="quality" value="high" />
		<param name="bgcolor" value="#ffffff" />
		<param name="play" value="true" />
		<param name="loop" value="true" />
		<param name="wmode" value="transparent" />
		<param name="scale" value="showall" />
		<param name="menu" value="true" />
		<param value="true" name="allowfullscreen" />
		<param name="devicefont" value="false" />
		<param name="salign" value="" />
		<param name="allowScriptAccess" value="sameDomain" />
		<param name="flashvars" value="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999"/>			 
		<embed height="210" align="middle" width="280" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="aprilfools" flashvars="isShowRelatedVideo=false&showAd=0&show_pre=1&show_next=1&isAutoPlay=false&isDebug=false&UserID=&winType=interior&playMovie=true&MMControl=false&MMout=false&RecordCode=1001,1002,1003,1004,1005,1006,2001,3001,3002,3003,3004,3005,3007,3008,9999" src="http://static.youku.com/v/swf/qplayer.swf?winType=adshow&VideoIDS=XMzg2NzQ2OTU2&isAutoPlay=false&isShowRelatedVideo=false"  menu="true" play="true" allowfullscreen="true" allowscriptaccess="sameDomain" quality="high" wmode="transparent" bgcolor="#fff" ver="10.0.0"></embed>
	</object>		
</div>

说明:这里使用的优酷的视频迷你播放器,减小了播放控制条的显示大小,比优酷普通播放器的画面大一些,用户体验好一些。

页面二针对mac设备代码:

<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="280" height="210" poster="http://www.feiliu.com/zt/img/20120417/preview.jpg" data-setup="{}">
	<source src="http://www.feiliu.com/zt/video/mv01.mp4" type='video/mp4'/>
</video>

说明:mac设备的Safari浏览器支持mp4格式,如果视频文件放在自己服务器,使用上述mp4格式的视频链接即可;也可以使用优酷的链接,优酷提供自动转码到iOS支持格式这一机制。例如优酷视频地址为http://player.youku.com/player.php/sid/XMzkwNzY2NTEy/v.swf,其iOS设备格式地址只需要改为 http://v.youku.com/player/getRealM3U8/vid/XMzkwNzY2NTEy/type//video.m3u8 。

相关文章请考考《分析优酷HTML5地址》地址http://blog.xiaohai.co/archives/youku-html5/

统一采用优酷地址的好处是保证了两个页面的一致性,又减轻自己服务器压力,而且可以与优酷合作更好的营销。

页面访问的设备检测代码如下:

<script type="text/javascript">
	if ((/iPhone|iPad|iPod/i).test(navigator.userAgent) || (/Mac68K|MacPPC|Macintosh|MacIntel/i).test(navigator.platform)){
		 window.location.href = "####page2.html"
	}
</script> 

补充:安卓系统从Android 2.1版本就开始部分支持flash,可下载安装flash插件播放视频。Adobe Flash Player 10.1.92.8已经支持所有android 2.2智能手机。目前主流的安卓智能机系统都在版本2.3以上,android4.0已大行其道。因此无须对安卓设备采用单独的视频处理方案,安卓系统和windows系统采用同样的方案,使用flash播放器即可实现。


html5media是一个让video、audio标签在旧版IE中全面兼容的JavaScript类库,它不依赖于任何JavaScript框架。页面使用了html5media之后,当老版本的浏览器不支持HTML5时,它将会自动切换成Flash模式的flowplayer播放器尝试播放。。

使用html5media的方法:

1、首先在页面head部分加入如下脚本
<script src="http://api.html5media.info/1.1.4/html5media.min.js"></script>
你可以通过使用IE条件注释的方法,只在旧版IE浏览器中加载这条JS脚本。
2、然后在body部分使用audio或video标签,添加音频视频相关代码。
<!-- 视频媒体标签 -->
<video src="http://www.feiliu.com/zt/video/mv02.mp4" width="480" height="320" controls preload></video>
<!-- 音频媒体标签 -->
<audio src="http://www.feiliu.com/zt/audio/test.mp3" controls loop></audio>
这样你便可以在IE6-IE8浏览器中使用audio和video标签了。
                                                                       by:清枫    2012-05-04 青年节


Web视频播放总结,avi、swf、兼容IE6/7/8

使用SWF完成兼容各个浏览器的WEB视频播放
  • msst1234
  • msst1234
  • 2016年03月17日 14:58
  • 5189

HTML html5播放flash SWF播放器

  • wangliqiang1014
  • wangliqiang1014
  • 2014年07月28日 15:26
  • 7599

video-js视频播放器 支持flash播放

  • 2014年08月26日 12:19
  • 130KB
  • 下载

HTML 页面加载 Flash 插件的几种方法

前言 之所以写这篇文章,主要是因为组长给提的一个新的需求——使用浏览器调用电脑的摄像头,来实现即时拍照的功能。在网上查了很多资料,由于这样那样的原因,最终选择了使用flash插件来调用pc的...
  • happylee6688
  • happylee6688
  • 2014年06月25日 15:06
  • 30272

最简单的基于Flash的流媒体示例:网页播放器(HTTP,RTMP,HLS)

本文继续上一篇文章,记录一些基于Flash的流媒体处理的例子。本文记录一些基于Flash技术的网页播放器。基于Flash的网页播放器相比于其他网页播放器来说最大的优势就是“免插件安装”了,这一点可以很...
  • leixiaohua1020
  • leixiaohua1020
  • 2015年02月25日 14:04
  • 145774

HTML嵌套Flash播放视频

1、 视频内容来源于本地,通过本地播放器播放代码:
  • sunboy_2050
  • sunboy_2050
  • 2011年12月21日 09:21
  • 21036

强力推荐几种多媒体播放器方案(jQuery、Flash、HTML5)

记得以前我们想要在网页中插入一段音频或者视频时,首先,baidu或者google一下,目的是要找那段又长又臭的object和embed代码,然后再把它们贴到网页中,然后还发现不同的浏览器写法还不一样,...
  • GoodShot
  • GoodShot
  • 2013年05月06日 15:41
  • 11339

html中flash播放器

  • 2008年07月29日 16:15
  • 1.8MB
  • 下载

H5和flash的区别

HTML5的优点主要在于,开发周期短,开发成本低,且可以跨平台使用。与Flash技术相比,H5技术不但不需要插件、而且还是开发免费,以及对搜索引擎友好等特点更适应移动端开发的特点深受广大开发者的喜爱。...
  • u011159607
  • u011159607
  • 2017年01月05日 16:44
  • 6750

Html5结合flash在所有主流播放器播放视频的方法

转自http://www.aimks.com/html5-combined-with-flash-method-in-all-mainstream-video.html Html5结合flash...
  • u010953266
  • u010953266
  • 2015年04月26日 15:18
  • 8305
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5结合flash实现视频文件在所有主流浏览器兼容播放
举报原因:
原因补充:

(最多只允许输入30个字)