jwplayer播放器初探

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

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



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值