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

最新推荐文章于 2019-11-08 08:48:27 发布

VIP文章 dadayuanye

最新推荐文章于 2019-11-08 08:48:27 发布

阅读量2.2k

点赞数

分类专栏： web界面播放器文章标签： web页面播放器 video标签 VLC浏览器插件 videjs

本文链接：https://blog.csdn.net/wuainifu/article/details/51509945

版权

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>