js 控制 Windows Media Player播放列表

最新推荐文章于 2024-05-08 09:41:08 发布

qiruiduni

最新推荐文章于 2024-05-08 09:41:08 发布

阅读量2.2k

点赞数

分类专栏： js 文章标签： media player 播放列表

本文链接：https://blog.csdn.net/qiruiduni/article/details/40537215

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

近期要做一个视频播放的功能，从数据库读取二进制数据流，然后转为输出流播放，但在连播的时候，却不能自动播放下一个，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>

效果图：