您的位置：首页 > Web前端 > JavaScript

主流web界面播放器的页面引用以及浏览器的支持情况分析（VLC）

2016-05-26 19:28 393 查看

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>

<a
href="http://video-js.zencoder.com/oceans-clip.mp4"
style="display:block;width:520px;height:330px"
id="player">
</a>

<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播放不了 4000	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.兼容大多数浏览器。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web页面播放器 video标签 VLC浏览器插件 videjs

相关文章推荐

新的分享

章节导航