jwplayer播放器初探

最新推荐文章于 2024-05-12 09:36:00 发布

别了耳听爱情的年龄

最新推荐文章于 2024-05-12 09:36:00 发布

阅读量3.9k

点赞数

分类专栏： js 文章标签： js jwplayer 视频

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

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天偶然看到看到一个关于页面播放器的文章，对于喜欢看电影的我，带着好奇点了进去。也就看到了今天将要的介绍的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>

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