设为首页 - 加入收藏 焦点技术网
热搜:java
当前位置:首页 >

Javascript实现视频轮播

2013-09-28 09:30:00.0 Javascript javascript 视频  
导读:最近客户要求用Javascript实现视频轮播:(单视频,多视频均可以)      有兴趣的同学可以参开一下      下面写了一个程序实现多视频轮播,pc端与移动端均可以实现,(单视频播放实现的原理也是一样)      只要在polyv平台注册一个账号,上传几个视频,就可以利用这段代码了。实现的原理是,拿到在polyv视频平台上传的视频id,把他放在一个数组里面:var arr = new Ar...。。。

最近客户要求用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 = ""     +""     +""     +"";                         }

完整代码:

Insert title here       

视频轮播11

视频轮播22

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 = "" +"" +"" +""; }}printPlayer(index);/* function j2s_onplayover(){ index++; printPlayer(index); } */function s2j_onPlayOver() {alert('ssss'); index++; printPlayer(index);}


运行效果:

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

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



(编辑: u010363836)

网友评论