最近客户要求用javascript实现视频轮播:
有兴趣的同学可以参开一下
下面写了一个程序实现视频轮播,pc端与移动端均可以实现,
但移动端,存在有一点bug;
视频轮播11
视频轮播22
<script type="text/javascript"> <br>var index=0; <br>var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7"); <br><br>var container = document.getElementById("container"); <br>function printPlayer(index){ <br>//alert(arr.length); <br>if(index>arr.length-1){ <br>index=0; <br>} <br>//container.removeElement; <br>container.innerHTML=""; <br>var vid=arr[index]; <br>if (navigator.userAgent.match(/iP(od|hone|ad)/i)) { <br>var video = document.createElement("video"); <br>video.src = "http://v.polyv.net/uc/video/getMp4?vid="+vid; <br>video.onended=s2j_onPlayOver; <br>//video.addEventListener('ended',j2s_onPlayOver, false); <br>video.autoplay="true"; <br>video.controls="controls" <br>container.appendChild(video); <br>}else{ <br><br>var swf="http://player.polyv.net/player_polyv_20130926a.swf?vid="+vid; <br><br>container.innerHTML = "<OBJECT width='600' height='375' ><PARAM NAME=movie VALUE='"+vid+"'><param name='allowscriptaccess' value='always'>" <br>+"<param name='allowFullScreen' value='true' />" <br>+"<EMBED src='"+swf+"' width='600' height='375' TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' />" <br>+""; <br><!-- container.innerHTML = "<OBJECT>"+swf+"";--> <br><br>} <br>} <br><br>printPlayer(index); <br><br><br>/* function j2s_onplayover(){ <br>index++; <br>printPlayer(index); <br><br>} */ <br><br>function s2j_onPlayOver() { <br>alert('ssss'); <br>index++; <br>printPlayer(index); <br>} <br></script>
运行效果:











