近期要做一个视频播放的功能,从数据库读取二进制数据流,然后转为输出流播放,但在连播的时候,却不能自动播放下一个,Media player总是就绪状态。原来的做法,以为将播放项添加到Media player自带的播放列表,就可以自动播放了,经测试后,不会自动播放,网上查了下,说是在播放下一个时,播放器仍处于上一首的播放状态,就停住了,具体什么原因就不清楚了,于是又换了种方式,将从库中读取到的播放列表添加到select控件中,然后用 setinterval()方法不停地去检查播放器的状态,如果当前视频播放完毕,就从select控件中选择下一项并取得其值作为播放器的URL,这样就可以正常播放了。
具体步骤:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String scapId = request.getParameter("scapId");
String agentId = request.getParameter("agentId");
String startTime = request.getParameter("startTime");
String endTime = request.getParameter("endTime");
%>
<html>
<head>
<title>预览</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/inc/jquery.js"></script>
<script type="text/javascript">
var state;
/** 渲染页面 */
function initpage() {
var scapId = '<%=scapId %>';
loadPlayList();
if(scapId == '' && scapId == 'null') {
/* var sObj = document.getElementById('playList');
sObj.options[0].selected = true;
playVideo(); */
} else {
player.url = "<%=request.getContextPath()%>/query/scapQuery.do?method=viewVideo&scapId=<%=scapId %>" ;
}
state = setInterval('monitorState()', 1000);
}
/** 播放下一个 */
function playNext() {
var sObj = document.getElementById('playList');
if(sObj.selectedIndex >= 0 && sObj.selectedIndex < sObj.options.length - 1) {
sObj.options[sObj.selectedIndex + 1].selected = true;
playVideo();
state = setInterval('monitorState()', 1000);
}
}
/** 监控视频播放状态 */
function monitorState() {
if(player.playState == 1) {
//alert("播放下一首");
clearInterval(state);
playNext();
}
}
/** 播放视频 */
function playVideo() {
var sObj = document.getElementById('playList');
var scapId = sObj.options[sObj.selectedIndex].value;
var url = "<%=request.getContextPath()%>/query/scapQuery.do?method=viewVideo&scapId=" + scapId;
player.URL = url;
player.controls.play();
}
/** 加载当前终端的播放清单 */
function loadPlayList(){
$.ajax({
type: "GET",
url: "<%=request.getContextPath()%>/query/scapQuery.do?method=getPlayList&agentId=<%=agentId %>&startTime=<%=startTime %>&endTime=<%=endTime %>",
dataType: "json",
success: function(data){
var len = data ? data.length : 0;
var scapId = '<%=scapId %>';
var selectObj = document.getElementById('playList');
<%-- if(player.settings.mediaAccessRights != "full"){
document.getElementById("player").settings.requestMediaAccessRights("full");
}
var playlist = player.currentPlaylist;
var url = "<%=request.getContextPath()%>/query/scapQuery.do?method=viewVideo&scapId=";
var currentUrl; --%>
var flag = false;
for(var i = 0; i < len; i++) {
selectObj.options.add(new Option(data[i].createTime.replace('.0', ''), data[i].scapId));
if(data[i].scapId == scapId) {
currentItem = i;
selectObj.options[i].selected = true; // 选中状态
flag = true;
}
// var item = player.newMedia(url + data[i].scapId);
// playlist.appendItem(item);
}
if(!flag) {
selectObj.options[0].selected = true;
setTimeout('playVideo()', 1000);
}
// playlist.currentPlaylist.Item[i]
// alert(player.currentMedia.getItemInfo('sourceURL'));
// player.settings.setMode("loop", true);
}
});
}
/** 点击播放列表事件 */
function selectChange(obj) {
player.url = "<%=request.getContextPath()%>/query/scapQuery.do?method=viewVideo&scapId=" + obj.value;
player.controls.play();
state = setInterval('monitorState()', 1000);
}
/** 显示/隐藏 “播放列表”栏 */
var flag = 1;
function changeBar() {
var imgObj = document.getElementById('controlImg');
if(flag++ % 2 == 0) {
imgObj.src = '../images/control-left.png';
imgObj.alt = "隐藏播放列表";
} else {
imgObj.src = '../images/control-right.png';
imgObj.alt = "显示播放列表";
}
$("#playListBar").toggle();
}
</script>
<style type="text/css">
body {
overflow:auto;
font-size:12px;
cursor:default;
}
#table01 {
font-size:14px;
background-Color:black;
color:white;
}
#playListTitle {
background-Color:#001122;
color:white;
font-size:12px;
font-weight:bold;
width:100%;
height:16px;
}
#playList {
width:100%;
height:99%;
margin:0px;
font-size:14px;
background-Color:black;
color:white;
}
</style>
</head>
<body οnlοad="initpage();">
<table id="table01" height="100%" width="100%">
<tr>
<td id="playListBar" width="13%" style="vertical-align: top;>
<div id="playListTitle" style="display:inline;">
<div style="padding-left: 5px; float: left;">播放列表</div>
</div>
<select id="playList" size="3" οnchange="selectChange(this);"> </select>
</td>
<td width="1%" bgcolor="rgba(237, 237, 237, 1)" >
<img id="controlImg" src="../images/control-left.png" style="cursor: pointer;" οnclick="changeBar();" alt="隐藏播放列表">
</td>
<td width="86%">
<object classid="clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6" id="player" width="100%" height="100%">
<param value="0" name="showStatusBar">
</object>
</td>
</tr>
</table>
<!-- <script language="JavaScript" for=player event=playstatechange(newstate)>
if(newstate == 8) {
playNext();
}
</script> -->
</body>
</html>