Javascript实现视频轮播 -

mywebcode

浏览: 1001534 次

最近访客更多访客>>

u012363178

qq_33632159

cshui

dd_9921

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2181)

社区版块

存档分类

2014-04 ( 138)
2014-03 ( 64)
2014-02 ( 54)
更多存档...

Javascript实现视频轮播

最近客户要求用Javascript实现视频轮播:（单视频，多视频均可以）

有兴趣的同学可以参开一下

下面写了一个程序实现多视频轮播，pc端与移动端均可以实现，(单视频播放实现的原理也是一样)

只要在polyv平台注册一个账号，上传几个视频，就可以利用这段代码了。

实现的原理是，拿到在polyv视频平台上传的视频id,把他放在一个数组里面：

var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7");

然后利用循环，还有调用视频播放结束接口s2j_onPlayOver( );跳转到下一个要播放的视频的id

视频播放函数：printPlayer(index);

多终端控制代码如下，如果用户是利用移动终端看的，（利用Html5）就会执行下面的代码段：

	if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
		var video = document.createElement("video");
		video.src = "http://v.polyv.net/uc/video/getMp4?vid="+vid;
		video.onended=s2j_onPlayOver;
			//video.addEventListener('ended',j2s_onPlayOver, false);
		video.autoplay="true";
		video.controls="controls"
			container.appendChild(video);
	}

如果用户是利用pc端看的，就会执行下面的代码段：

else{
		
      		var swf="http://player.polyv.net/player_polyv_20130926a.swf?vid="+vid;

		   container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>"
		   +"<param name='allowFullScreen' value='true' />"
		   +"<EMBED src='"+swf+"' width='600' height='375'  TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
		   +"</OBJECT>";
		  <!-- container.innerHTML = "<OBJECT>"+swf+"</OBJECT>";-->
          
          
	}

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
<title>Insert title here</title>
</head>       

<p>视频轮播11</p>
   <div id="container"></div>
   
 
   <p>视频轮播22</p>
</body>
<ml>




<script type="text/javascript">
var index=0;
var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7"); 


var container = document.getElementById("container");
function printPlayer(index){
	//alert(arr.length);
	if(index>arr.length-1){
		index=0;
	}
	//container.removeElement;
	container.innerHTML="";
	var vid=arr[index];
	if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
		var video = document.createElement("video");
		video.src = "http://v.polyv.net/uc/video/getMp4?vid="+vid;
		video.onended=s2j_onPlayOver;
			//video.addEventListener('ended',j2s_onPlayOver, false);
		video.autoplay="true";
		video.controls="controls"
			container.appendChild(video);
	}else{
		
      		var swf="http://player.polyv.net/player_polyv_20130926a.swf?vid="+vid;

		   container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>"
		   +"<param name='allowFullScreen' value='true' />"
		   +"<EMBED src='"+swf+"' width='600' height='375'  TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
		   +"</OBJECT>";
		  <!-- container.innerHTML = "<OBJECT>"+swf+"</OBJECT>";-->
          
          
	}
}

printPlayer(index);


/* function j2s_onplayover(){
	index++;
	printPlayer(index);
	
} */

function s2j_onPlayOver() {
alert('ssss');
	index++;
	printPlayer(index);
}
</script>

运行效果：

效果预览地址1：http://www.polyv.net/

效果预览地址2：http://forum.junjing.net/test3.php