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

最新推荐文章于 2023-07-06 17:17:14 发布

天天向上99

最新推荐文章于 2023-07-06 17:17:14 发布

阅读量5k

点赞数

web界面播放器使用方法介绍

1.flowplayer使用方法

Flowplayer是基于FlowPlayer的网页播放器。FlowPlayer原生支持HTTP点播。代码如下所示。

<html>
<head>
<script type="text/javascript" src="http://blog.csdn.net/WUAINIFU/article/details/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="http://blog.csdn.net/WUAINIFU/article/details/video-js.css" rel="stylesheet"type="text/css">

<scriptsrc="http://blog.csdn.net/WUAINIFU/article/details/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='http://blog.csdn.net/WUAINIFU/article/details/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="http://blog.csdn.net/WUAINIFU/article/details/jquery-2.2.1.min.js"></script>

<script src="http://blog.csdn.net/WUAINIFU/article/details/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='http://blog.csdn.net/WUAINIFU/article/details/50' />

                      <param name='autoplay' value='http://blog.csdn.net/WUAINIFU/article/details/false' />

                      <param name='loop' value='http://blog.csdn.net/WUAINIFU/article/details/false' />

                      <param name='fullscreen' value='http://blog.csdn.net/WUAINIFU/article/details/false'/>

                      <param name="wmode"value="http://blog.csdn.net/WUAINIFU/article/details/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='http://blog.csdn.net/WUAINIFU/article/details/50' />

               <param name='autoplay' value='http://blog.csdn.net/WUAINIFU/article/details/true' />

               <param name='loop' value='http://blog.csdn.net/WUAINIFU/article/details/false' />

               <param name='fullscreen' value='http://blog.csdn.net/WUAINIFU/article/details/false'/>

</object>

前端web播放器的支持情况实测分析