常用视频播放器插件汇总

因为项目中需要用到视频播放，所以查了不少资料，发现各类视频播放插件真是形形色色。现就常用的几个做一个汇总，以供以后使用参考。

HTML video标签

其实html中就已经提供了相对应的标签<video>用于视频的播放。

<video src="url" controls="controls"></video>

该标签中提供了一系列的属性以及方法，来保证开发者可以更好的对视频进行操作。

Video 对象方法(摘自W3School)

方法	描述
addTextTrack()	向视频添加新的文本轨道
canPlayType()	检查浏览器是否能够播放指定的视频类型
load()	重新加载视频元素
play()	开始播放视频
pause()	暂停当前播放的视频

这里必须要提醒注意的是：video标签是HTML 5的新标签，并且IE浏览器只支持IE9及其以上版本。

参考资料：HTML video标签 /Video 对象相关属性以及方法

jQueryVideo.js

其实该视频播放器插件使用的就是<video>标签，只不过集成了很多方法，避免大家再去造轮子。

需要引入video.js的css以及js

<link href="css/video-js.min.css" rel="stylesheet">
<script src="js/video.min.js"></script> 

示例

<video id="my-video" class="video-js" controls preload="auto" width="960" height="400"
		  poster="m.jpg" data-setup="{}">
        <source src="url" type="video/mp4">
    	<source src="url" type="video/webm">
    	<source src="url" type="video/ogg">
</video>
<script type="text/javascript">
	var myPlayer = videojs('my-video');
	videojs("my-video").ready(function(){
		var myPlayer = this;
		myPlayer.play();
	});
</script> 

在初始化video以及操作视频的时候，可以参考上面video标签的相关属性以及方法，这样方便理解以及使用。

参考资料：Video.js官网/demo下载

jPlayer

使用jPlayer给我的感觉就是相对复杂，但是功能强大。它可以做音频播放，视频播放，甚至是多个视频音频列表的展示。
最让人惊喜的就是它的兼容性，官网显示，它可以向下兼容到IE6。

同样的，使用前需要引入相关的css以及js

<link href="../../skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../dist/jplayer/jquery.jplayer.min.js"></script>

示例(以下代码都是从官方示例代码中copy出来的，可以自行下载研究)

<div class="jp-type-single">
	<!-- 视频位置 -->
	<div id="jquery_jplayer_1" class="jp-jplayer"></div>
	<div class="jp-gui">
		<div class="jp-video-play">
			<!-- 屏幕中心播放按钮 -->
			<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
		</div>
		<div class="jp-interface">
			<div class="jp-progress">
				<div class="jp-seek-bar">
					<div class="jp-play-bar"></div>
				</div>
			</div>
			<!-- 进度条 -->
			<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
			<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
			<div class="jp-controls-holder">
				<div class="jp-controls">
					<!-- 播放暂停按钮 -->
					<button class="jp-play" role="button" tabindex="0">play</button>
					<button class="jp-stop" role="button" tabindex="0">stop</button>
				</div>
				<!-- 音量控制 -->
				<div class="jp-volume-controls">
					<button class="jp-mute" role="button" tabindex="0">mute</button>
					<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
					<div class="jp-volume-bar">
						<div class="jp-volume-bar-value"></div>
					</div>
				</div>
				<div class="jp-toggles">
					<!-- 重复播放/全屏 -->
					<button class="jp-repeat" role="button" tabindex="0">repeat</button>
					<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
				</div>
			</div>
			<div class="jp-details">
				<div class="jp-title" aria-label="title">&nbsp;</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$("#jquery_jplayer_1").jPlayer({ready: function () {
			$(this).jPlayer("setMedia", {
				title: "Big Buck Bunny",
				m4v: "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v",
				ogv: "http://www.jplayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv",
				webmv: "http://www.jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm",
				poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
			});
		},
		swfPath: "../../dist/jplayer",
		supplied: "webmv, ogv, m4v",//支持格式
		size: {
			width: "640px",
			height: "360px",
			cssClass: "jp-video-360p"
		},
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true,
		remainingDuration: true,
		toggleDuration: true
	});
</script>

许多按钮样式都可以自行定义，官方下载插件后，在examples文件夹下有各种各样的demo可供参考。

参考资料：jPlayer官方下载地址

ckplayer

超酷flv播放器插件，使用简单。除了支持mp4、flv、f4v、m3u8格式外，还支持rtmp协议。并且播放器会自动选择使用html5还是flashplayer进行播放，html5播放器优先。最主要的是用户可以自定义播放器的风格。

示例：

<script type="text/javascript" src="ckplayer/x/ckplayer.js"></script>
<div class="video" style="width: 1000px;height: 600px;"></div>
<script type="text/javascript">
	var videoObject = {
		container: '.video',//'#'代表容器的ID，'.'或''代表容器的class
		variable: 'player',//该属性必需设置，值等于下面的new chplayer()的对象
		poster:'pic/wdm.jpg',//封面图片
		video:'url'//视频地址
	};
	var player=new ckplayer(videoObject);
</script>

需要注意的是：此款播放器需要放在网络环境里方可正常使用，直接下载插件打开示例无法使用。

参考资料：ckplayer官网

Cyberplayer

百度云web播放器，功能强大。不过需要在百度云平台注册获取accessKey才能使用。当然，如果你的项目文件存储使用的是百度云的话，那么配合此播放器实在是再方便不过了。

示例

<div id="playercontainer"></div>
<script type="text/javascript" src="player/cyberplayer.js"></script>
<script type="text/javascript">
    var player = cyberplayer("playercontainer").setup({
        width: 680, // 宽度，也可以支持百分比(不过父元素宽度要有)
        height: 448, // 高度，也可以支持百分比
        title: "基本功能", // 标题
        file: "上传百度云存放视频地址url", // 播放地址
        image: "", // 预览图
        autostart: false, // 是否自动播放
        stretching: "uniform", // 拉伸设置
        repeat: false, // 是否重复播放
        volume: 100, // 音量
        controls: true, // controlbar是否显示
        starttime: 0, // 视频开始播放时间点(单位s)，如果不设置，则可以从上次播放时间点续播
        logo: { // logo设置
            linktarget: "_blank",
            margin: 8,
            hide: false,
            position: "top-right", // 位置
            file: "./img/logo.png" // 图片地址
        },
        ak: "xxxxxxxxxxxxxxxx" // 公有云平台注册即可获得accessKey
    });
</script>

有关此播放器就不过多介绍了，官方demo中写的实在是太详细了。

参考资料：百度云 CyberplayerDemo

总结

以上是我能找到的几款主流的视频播放器插件，也许还有更多更好的。当然在选择时一定要结合自己的项目实际情况，然后整体统一一种风格进行使用。适合的才是最好的。