web界面播放器使用方法介绍
1.flowplayer使用方法
Flowplayer是基于FlowPlayer的网页播放器。FlowPlayer原生支持HTTP点播。代码如下所示。
<html>
<head>
<script type="text/javascript" src="flowplayer-3.2.8.min.js"></script>
<title>Sample Player FlowPlayer</title>
</head>
<body>
<h1>Sample Player FlowPlayer</h1>
<!-- this A tag is where your Flowplayer will be placed. it can be anywhere -->
<a
href="http://video-js.zencoder.com/oceans-clip.mp4"
style="display:block;width:520px;height:330px"
id="player">
</a>
<!-- this will install flowplayer inside previous A- tag. -->
<script>
flowplayer("player", "flowplayer-3.2.8.swf");
</script>
</body>
</html>
2.videojs使用方法
VideoJS是基于Video.js播放器，是支持HTTP点播的网页播放器，代码如下所示。
<!DOCTYPE html>
<html>
<head>
<title>Sample PlayerVideojs</title>
<linkhref="video-js.css" rel="stylesheet"type="text/css">
<scriptsrc="video.js"></script>
<script>
videojs.options.flash.swf ="video-js.swf";
</script>
</head>
<body>
<h1>Sample PlayerVideojs</h1>
<videoid="example_video_1" class="video-js vjs-default-skin"controls preload="none" width="640" height="264"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup="{}">
<sourcesrc="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4'/>
<sourcesrc="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'/>
<sourcesrc="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg'/>
</video>
</body>
</html>3.jwplaye使用方法
JWPlayer是基于JW Player的播放器。支持HTTP点播的网页播放器，代码如下所示。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample Player JWPlayer</title>
<script type='text/javascript'src='jwplayer.js'></script>
</head>
<body>
<h1>Sample Player JWPlayer</h1>
<div id='mediaspace'>This text will bereplaced</div>
<script type='text/javascript'>
jwplayer('mediaspace').setup({
'flashplayer': 'player.swf',
'file': 'sintel.mp4',
'controlbar': 'bottom',
'width': '640',
'height': '360'
});
</script>
</body>
</html>
4.video使用方法
利用html5播放视频的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>my player</title>
<script src="jquery-2.2.1.min.js"></script>
<script src="video.js"></script>
</head>
<body>
<video id="myvideo" width="842" controls >
<source src="D:\myplayer\1.mp4"type="video/mp4">
您的浏览器不支持 HTML5 video 标签。
</video>
</div>
</body>
</html>5.VLC使用方法
要想使用VLC的浏览器插件需要完成一下三步：
1. 安装VLC播放器
2. 注册VLC浏览器插件（regsvr32 axvlc.dll）
3. 根据浏览器类型选择不同的web页面代码，来引用VLC。
IE浏览器：
<object type='application/x-vlc-plugin' id='vlc' events='True'
classid='clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921' height='625px;'width='50%'>
<param name='mrl'value='http://192.168.72.75:8080/hdfs/stream?fpath=/liudi/yuanye.mp4' />
<param name='volume' value='50' />
<param name='autoplay' value='false' />
<param name='loop' value='false' />
<param name='fullscreen' value='false'/>
<param name="wmode"value="transparent" />
</object>非IE浏览器：
<object type='application/x-vlc-plugin' id='vlc' events='True'height='625px;' width='50%'>
<param name='mrl'value='http://192.168.72.75:8080/hdfs/stream?fpath=/liudi/yuanye.mp4'/>
<param name='volume' value='50' />
<param name='autoplay' value='true' />
<param name='loop' value='false' />
<param name='fullscreen' value='false'/>
</object> 前端web播放器的支持情况实测分析
测试环境
浏览器：IE10.0.9200.16521、IE11.0.9600.17843、Firefox45.0.1 Google Chrome 36.0.1985.125 safari 5.1.7
视频：类型：MP4、flv 大小：1.91GB（MP4） flv(2M)
Web服务器：tomcat7
测试结果统计
测试结果如下图所示：
浏览器类型播放器类型 | IE10 | IE11 | Firefox | Safari | Google Chrome | 备注 |
flowplayer | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | 1.需要浏览器安装adobe flash插件。 2.只有缓冲的部分才能进行点播和拖动进度条。 |
jwplayer | MP4播放不了
FLV播放不了 | MP4正常播放
FLV播放不了（提示下载） | MP4播放不了
FLV播放不了 | MP4播放不了
FLV播放不了 | MP4播放不了
FLV播放不了 |
1.不需要浏览器安装adobe flash插件。
|
VideoJs | MP4播放不了
Flv正常播放 | MP4正常播放
Flv播放不了 | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | 1.需要使用HTML5的video标签。 2.可以屏蔽浏览器不支持video标签的缺陷。（前提是需要浏览器安装了adobe flash插件） |
Video | MP4正常播放
Flv播放不了 | MP4正常播放
Flv播放不了 | MP4正常播放
Flv播放不了 | MP4播放不了
FLV播放不了 | MP4正常播放
Flv播放不了 |
1.不需要浏览器安装adobe flash插件。 2.目前只有MP4格式的视频才能被大多数浏览器支持 |
VLC插件 （ActiveX、Mozilla） | MP4正常播放
Flv正常播放 | MP4正常播放
Flv正常播放 | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | MP4正常播放
FLV正常播放 | 1.需要安装VLC播放器。 2.需要注册VLC播放器插件 3.反应速度很快，跟浏览器无关。 4.兼容大多数浏览器。 |