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

本文介绍了五种网页视频播放器的使用方法,包括Flowplayer、VideoJS、JWPlayer、HTML5 Video及VLC插件,并对它们在不同浏览器上的播放效果进行了实测分析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

1.flowplayer使用方法

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

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

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

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

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

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

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

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

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

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

               <param name='fullscreen' value='http://blog.youkuaiyun.com/WUAINIFU/article/details/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.兼容大多数浏览器。


转自http://www.itdadao.com/articles/c15a703542p0.html

### 回答1: Chrome是一款由Google开发的免费网页浏览器,广泛用于Windows操作系统上。无论是工作、学习还是娱乐,Chrome都能提供稳定且高效的浏览体验。它具有快速加载网页的速度,用户界面简洁直观,并且支持多标签浏览,方便用户在不同网页之间进行切换。Chrome还内置了强大的搜索引擎,可实现智能搜索,快速定位到用户所需的信息。 Windows是由微软开发和推出的操作系统之一。它是目前世界上最常用的计算机操作系统之一,广泛应用于个人电脑、笔记本电脑和平板电脑等设备上。Windows操作系统提供了用户友好的图形用户界面支持多任务处理和多用户登录等功能,使用户能够在一个统一的环境下方便地进行各种任务。 VLC插件是一种可以在Chrome浏览器上使用的多媒体播放器插件。它由VideoLAN开发,能够播放各种音频和视频文件格式,如MP3、MP4、AVI和MKV等。VLC插件具有简单易用的界面支持多种播放控制选项,如播放、暂停、快进、快退等。此外,它还提供了一些高级功能,例如音频和视频调节、字幕显示和网络流媒体播放等。通过安装VLC插件,用户可以在Chrome浏览器上方便地享受多媒体内容,无论是在线观看视频还是收听音频,都能得到优质的播放体验。 综上所述,Chrome浏览器、Windows操作系统和VLC插件都是应用广泛的工具,它们共同为用户提供了便捷、高效和丰富的网页浏览和多媒体播放体验。无论是上网冲浪、办公学习还是享受音视频内容,这些工具都能够满足用户的需求。 ### 回答2: Chrome,Windows和VLC插件是三个不同的事物。 首先,Chrome是一种流行的互联网浏览器。它由谷歌公司开发,并提供广泛的功能和扩展。Chrome可以在Windows操作系统上运行,并且被广泛用于浏览网页、搜索信息、观看视频等。 其次,Windows是一种操作系统,由微软公司开发。它是一种非常流行的桌面操作系统,被广泛用于个人电脑和笔记本电脑。Windows支持各种应用程序和软件,并提供了良好的用户界面和功能。 最后,VLC插件是一种在Chrome上可用的扩展,用于支持VLC媒体播放器VLC是一款开源的跨平台媒体播放器,可以播放各种音频和视频格式。通过安装VLC插件,用户可以在Chrome浏览器中直接播放各种媒体文件,而不用离开浏览器。 综上所述,Chrome,Windows和VLC插件是互相独立但相关的概念。Chrome是一款流行的浏览器,Windows是一种操作系统,而VLC插件则是一种用于在Chrome上支持VLC播放器的扩展。这三个元素共同为用户提供了更好的网络浏览和媒体播放体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值