您的位置：首页 > 其它

开源网页播放器JWplayer使用

2015-08-10 10:48 323 查看

网上关于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] view
plaincopy

<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] view
plaincopy

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航