jwplayer播放器初探_jwplayer mp4-CSDN博客

本文链接：https://blog.csdn.net/u012038649/article/details/56685766

今天偶然看到看到一个关于页面播放器的文章，对于喜欢看电影的我，带着好奇点了进去。也就看到了今天将要的介绍的jwplayer了，各种特点优势就不详细赘述了，直接上代码看看自己在项目中如何嵌入吧。

当然首先要去官网下个播放器，官方直达：https://www.jwplayer.com/，下载后，解压后目录如下，版本不同，对应的文件名可能稍有不同，不过大致扫一眼，就应该知道需要引入的核心文件了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jQuery/jquery-2.1.4.min.js" type="text/javascript"></script>  
<script src="js/jwplayer/jwplayer.js" type="text/javascript"></script>  
</head>
<body>

<div id="container"></div>
<input type="button" class="player-play" value="播放"/>
<input type="button" class="player-stop" value="停止"/>
<input type="button" class="player-status" value="取得状态"/>
<input type="button" class="player-current" value="当前播放秒数"/>
<input type="button" class="player-goto" value="转到第30秒播放"/>
<input type="button" class="player-length" value="视频时长(秒)"/>

</body>
<script type="text/javascript">
var thePlayer; //保存当前播放器以方便操作
$(function(){
	thePlayer = jwplayer("container").setup({
		flashplayer:'js/jwplayer/jwplayer.flash.swf',
		file:'js/jwplayer/10.mp4',
		width:500,
		height:350,
		dock:false
	});

	//播放 暂停
	$(".player-play").click(function(){
		if(thePlayer.getState() != 'PLAYING'){
			thePlayer.play(true);
			this.value="暂停";
		}else{
			thePlayer.play(false);
			this.value="播放";
		}
	});
	
	//停止
	$(".player-stop").click(function(){
		thePlayer.stop();
	});
	
	//获取状态
	$(".player-status").click(function(){
		var state = thePlayer.getState();
		var msg;
		switch(state){
		case 'BUFFERING':
			msg="加载中";
			break;
		case 'PLAYING':
			msg="正在播放 ";
			break;
		case 'PAUSED':
			msg="暂停";
			break;
		case 'IDLE':
			msg="停止";
			break;
		}
		alert(msg);
	});
	
	
	//获取播放进度
	$(".player-current").click(function(){
		if(thePlayer.getState() != 'PLAYING'){
			//若当前未播放,先启动播放器
			thePlayer.play();
		}
		thePlayer.seek(300);//从指定位置开始播放（单位秒）
	});
	
	//获取视频长度
	$(".player-length").click(function(){
		alert(thePlayer.getDuration());
	});
	
});

</script>

</html>

页面写完了，之间用浏览器打开页面，即可观看视频了，当然，前提是你得有网！！！