JW Player是一款非常优秀的网页媒体播放器,支持H.264 ( .mp4, .mov, .f4v )、FLV ( .flv ) 、3GPP ( .3gp, .3g2 )、OGG Theora ( .ogv )和WebM ( .webm )视频格式,MP3 ( .mp3 )、AAC ( .aac, .m4a )、OGG Vorbis ( .ogg )和WAV ( .wav )音频,同时也支持swf和图片( gif 、jpg、png)和YouTube格式视频。
支持HTML5,有着非常丰富的插件可用(部分是收费的,如广告插件)。
JW Player的最新版是5.7,官方网址:http://www.longtailvideo.com/players/jw-flv-player/?search=Playlist
jwplayer.js和player.swf是核心文件,必须引入这两个文件。
代码
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" %>
<html>
<head>
<script type="text/javascript" src="../jwplayer/jwplayer.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div id='my-video'></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('my-video').setup({
autostart: true,//自动播放
//file: 'rtmp://101.200.2.53/live/test1',
file: 'http://101.200.2.53:8080/HealthcarePlatform/data/MP4/test.mp4',
width: '480',
height: '270'
});
$('.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>
<br>
<br>
</body>
</html>