浏览器不能播放nginx指向的视频浏览器不支持h5视频播放

转载

mob64ca13fa6a3c 2024-03-06 16:48:47

文章标签 浏览器不能播放nginx指向的视频视频 swf 浏览器 WEB视频播放 文章分类 运维

最近完成了一个支持各个浏览器的视频播放功能，现做一些总结

第一步

起初设想使用H5，但是事与愿违，各浏览器对视频格式兼容不一致，又不可能转换出所有格式的视频,并且H5无法支持IE9以下版本，所以无法单独使用H5完成视频播放功能；

下面是对H5的一些总结：

1、H5 video元素不支持AVI格式视频；
2、实例：

<video width="320" height="240" controls="controls"> 
 
 <source src="movie.ogg" type="video/ogg"> 
 
 <source src="movie.mp4" type="video/mp4"> 
 
 Your browser does not support the video tag. 
 
 </video> 
 
 说明：Your browser does not support the video tag. 为当不支持H5video标签后显示的内容；controls="controls" 属性显示提供的播放、暂停和音量控件 
 

 3、当前，video 元素支持三种视频格式： 
 
 格式 IE Firefox Opera Chrome Safari 
 
 Ogg No 3.5+ 10.5+ 5.0+ No 
 
 MPEG 4 9.0+ No No 5.0+ 3.0+ 
 
 WebM No 4.0+ 10.6+ 6.0+ No 
 
 Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 
 
 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 
 
 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

第二步

之后想到是否可以使用widow media play在页面上播放，但是结果不太令人满意，虽然可以在win7上的IE9测试通过，但是在winxp下却无法播放，查找到原因是widow media play若要播放AVI视频，必须是12版本以上，并且XP系统只能支持到版本11，若想在XP一下版本播放，必须另外安装解码器，所以很不适合WEB播放要求，又无法实现；

一些参考资料：

一、调用widow media play播放
1、使用wmp只能在win7下的wmp12版本才能播放AVI格式视频；
2、wmp在xp系统只能安装wmp11版本，无法解码AVI格式，需要单独安装AVI解码器，不符合当初需求；
3、wmp对各个格式的视频解码存在以下缺陷，所以大部分视频播放不再用此方法来实现WEB播放视频；mp4格式同上；
3、html的代码如下：

<object id="MediaPlayer" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" width="600" height="600" standby="Loading Windows Media Player components…" 
 type="application/x-oleobject" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,7,1112">
 <param name="FileName" value="mov_bbb.avi">  //视频源
 <param name="AutoStart" value="true">                  //自动开始播放
 <param name="ShowControls" value="true">          //显示控制条
 <param name="BufferingTime" value="2">
 <param name="ShowStatusBar" value="false">     //下方显示播放列表；
 <param name="AutoSize" value="true">
 <param name="InvokeURLs" value="false">
 <param name="AnimationatStart" value="false">
 <param name="TransparentatStart" value="false">  //设置播发器下方的一个小条
 <param name="Loop" value="1">
 </object>

参数为一些属性的设置，如AutoStart：自动播放；ShowStatusBar：下方显示播放列表；

第三步

这里就只能看看优酷等视频网站怎么实现各个浏览器的兼容性了；

查看优酷视频web代码，如下：

<div class="player" id="player" err="" style="">
 <object type="application/x-shockwave-flash" data="http://static.youku.com/v1.0.0607/v/swf/loader.swf" width="100%" height="100%" id="movie_player">
 <param name="allowFullScreen" value="true">
 <param name="allowscriptaccess" value="always">
 <param name="allowFullScreenInteractive" value="true">
 <param name="flashvars" value="VideoIDS=XODc5NDQ5ODQ0&ShowId=295450&category=85&Cp=authorized&Light=on&THX=off&unCookie=0&frame=0&pvid=1457932612486jaz1sp&uepflag=0&Tid=0&isAutoPlay=true&Version=/v1.0.120&show_ce=0&winType=interior&openScanCode=1&scanCodeText="限时" 扫码免广告&embedid=AjIxOTg2MjQ2MQJpLnlvdWt1LmNvbQIvdS9VTVRJNE5qa3dNamMwTUE9PQ==&vext=bc%3D%26pid%3D1457932612486jaz1sp%26unCookie%3D0%26frame%3D0%26type%3D0%26svt%3D1%26stg%3D20150125%26emb%3DAjIxOTg2MjQ2MQJpLnlvdWt1LmNvbQIvdS9VTVRJNE5qa3dNamMwTUE9PQ%3D%3D%26dn%3D%E7%BD%91%E9%A1%B5%26hwc%3D1%26mtype%3Doth&pageStartTime=1457932612486">
 <param name="movie" value="http://static.youku.com/v1.0.0607/v/swf/loader.swf">
 <div class="player_html5">
 <div class="picture" style="height:100%">
 <div style="line-height:460px;">
 <span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span>
 </div>
 </div>
 </div>
 </object>
 </div>

大概研究了一下，type="application/x-shockwave-flash" 标识使用shockwave-flash插件播放，data="http://static.youku.com/v1.0.0607/v/swf/loader.swf"这个是什么？后来查找过程中渐渐认识到此为播放器的“壳“，也就是下方暂停，时间进度、音量、全屏等的这些控制的绘制SWF文件， name="flashvars" 属性其实就是最主要的参数部分，他可以向loader.swf传递必要参数，从而实现视频的播放。为什么需要这个loader.swf来播放视频呢？原来是由于我们能看到的优酷的视频源都是SWF格式的，swf直接用FLASH播放是无法显示控制条的，也就是暂停、播放、音量等；

第四步

在基本了解到这些信息后，开始搜索可以使用的类似优酷loader.swf的播放载体，网上找了几个，但在使用到我的项目中出现了不少问题；

1、首先使用如下网友提供的控件；

静态网页看了一下，时间显示有个bug，但是可以取消，还可以忍受；视频宽高设置有存在问题，视频会和进度条重叠，设置了半天才搞出一个可以用的宽高；并且进度条有点小了。。。。当使用到ASP.NET的动态网页中，需要根据参数播放不同的视频源，问题出现了：视频源配置在XML格式中，只能更新XML文件中的视频源参数后再来播放。实现后，发现播放视频只能是第一次播放的视频，之后修改视频源后都无法播放，只能播放第一次的！！！！！缓存造成的？找到各种方法去让播放页面都从服务器中加载，正在思考的时候，发现此法不通，按照此法怎么实现并发访问？？？如此，此方案不行！（不知道有啥办法，以后有时间在研究一下）。

2、走了不少弯路后，找到此网友分享的SWF，完成了最终我想要的效果；（连接：）

一个小栗子：

前端代码如下：

<object type="application/x-shockwave-flash" width="640" height="480" 
 wmode="transparent data="flvplayer.swf?file=你要播放的视频源名称.swf">
 <param name="movie" value="flvplayer.swf?file=<%#URLstring %>" />
 <param name="wmode" value="transparent" />
 <param name='allowfullscreen' value='true' />
 <div class="picture" style="height:100%">
 <div style="line-height:460px;">
 <span style="font-size:18px">您还没有安装flash播放器,请点击<a href="http://www.adobe.com/go/getflash" target="_blank">这里</a>安装</span>
 </div>
 </div>
 </object> 
后端：
 
protected void Page_Load(object sender, EventArgs e)
 {
 this.DataBind();
 }
 protected string URLstring
 {
 get
 {
 string s = ".\\public\\" + Session["URL"].ToString();
 return s;
 }
 }

使用了一个SESSION简单验证了一下，一个页面修改SESSION，然后点击播放后跳转到此页面进行播放，每次可以播放传来的视频源；

至此，基本完成。

使用SWF格式，通过flash插件播放，基本上可以支持所有window系统的浏览器播放，需要注意的是需要在flash7以上版本，目前使用FLASH7播放时会无法播放，所以需要JS判断flash版本进行提示；

最后再说一下，为什么使用SWF，因为SWF格式才能在IE6/7/8上播放（目前我知道是这样），这也是优酷、土豆等为什么使用SWF完成WEB播放。