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

最新推荐文章于 2024-09-13 22:02:55 发布

dadayuanye

最新推荐文章于 2024-09-13 22:02:55 发布

阅读量2.2k

点赞数

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

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

版权

本文介绍了主流web界面播放器的使用方法，包括flowplayer、videojs、jwplayer、video以及VLC浏览器插件。针对VLC，详细阐述了安装、注册和引用步骤，并提供了不同浏览器的引用代码。此外，还进行了前端web播放器的支持情况实测分析，覆盖了多种浏览器版本和视频类型。

摘要由CSDN通过智能技术生成

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>