Javascript实现视频轮播

最新推荐文章于 2024-06-17 15:29:34 发布

kenhins

最新推荐文章于 2024-06-17 15:29:34 发布

阅读量7.7k

点赞数 2

分类专栏： Javascript 文章标签： javascript 视频

本文链接：https://blog.csdn.net/kenhins/article/details/12107961

版权

Javascript 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

最近客户要求用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.οnended=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.οnended=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

kenhins

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现视频轮播

Javascript实现视频轮播Insert title here 视频轮播11 视频轮播22var index=0;var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7",
复制链接

扫一扫