当前位置: 首页 > 工具软件 > JW PLAYER > 使用案例 >

JWplayer入门及使用

贝杜吟
2023-12-01


网上关于JWplayer的知识和文档很多,本文只介绍如何使用JWplayer。

这里使用JWPlayer,需要搭建网络环境(本文使用appserv2.6.0集成环境)

appserv 2.6.0的安装很简单,apache2.2的启动端口80可能会有冲突,解决方法同样google,安装好最好重启下。

JWPlayer官网http://www.longtailvideo.com/

JWPlayer下载页面http://www.longtailvideo.com/jw-player/download/

解压后,将jwplayer整个文件夹放到appserv/www目录下

1. 新建html文件

<html>
<head>
<script src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id='myplayer'></div> <script type='text/javascript'>    
 jwplayer('myplayer').setup({       
 file: 'testfile/H264_640x480_AAC(LC).mp4',       
 width: '640',        
 height: '480'     }); 
</script>
</body>
</html>

file参数根据自己实际情况进行修改

在浏览器中打开就可以观看了(直接打开无效,要不搭appserv网站环境干嘛)

如:http://127.0.0.1/jwplayer/test.html


2.利用jquery 加一些控制

jquery是一个javascript框架,是一个轻量级的js库,可以下载到本地。具体应用请google

<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id='myplayer'></div>
<input type="button" class="player-play" value="Play" />
<input type="button" class="player-stop" value="Stop" />
<input type="button" class="player-status" value="Status" />
<input type="button" class="player-position" value="TimeStamp" />
<input type="button" class="player-seek" value="Seek_15s" />
<input type="button" class="player-duration" value="Duration" />
<script type='text/javascript'>
 var thePlayer;
 thePlayer = jwplayer('myplayer').setup({   
 file: 'testfile/H264_640x480_AAC(LC).mp4',       
 width: '640',        
 height: '480',
 dock: false,
 repeat: true}); 

 //Play Pause
 $('.player-play').click(function(){
	if(thePlayer.getState() != 'PLAYING'){
		thePlayer.play(true);
		this.value = 'Pause';
	}else {
		thePlayer.play(false);
		this.value = 'Play';
	}
	});
	
 //Stop
 $('.player-stop').click(function(){thePlayer.stop();});
 	
 //Status
 $('.player-status').click(function(){
	var state = thePlayer.getState();
	var msg;
	switch(state){
		case 'BUFFRING':
			msg = 'Buffering';
			break;
		case 'PLAYING':
			msg = 'Playing';
			break;
		case 'PAUSED':
			msg = 'Pause';
			break;
		case 'IDLE':
			msg = 'Stop';
			break;
		}
		alert(msg);
	});

	//get current position
	$('.player-position').click(function() { alert(thePlayer.getPosition()); });

	//Seek
	$('.player-seek').click(function(){
		if(thePlayer.getState()!= 'PLAYING'){
		thePlayer.play();
		}
		thePlayer.seek(15);
	});
	
	//get duration
	$('.player-duration').click(function() {alert(thePlayer.getDuration());});	
	
</script>
</body>
</html>

 类似资料: