Javascript实现视频轮播

最近客户要求用Javascript实现视频轮播:

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

下面写了一个程序实现视频轮播,pc端与移动端均可以实现,

但移动端,存在有一点bug;

 

 

[javascript][/javascript] view plaincopyprint?

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
  2. <html>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”textml; charset=UTF-8″>
  5. <title>Insert title here</title>
  6. </head>
  7. <p>视频轮播11</p>
  8.    <div id=”container”></div>
  9.    <p>视频轮播22</p>
  10. </body>
  11. <ml>
  12. <script type=”text/javascript”>
  13. var index=0;
  14. var arr = new Array(“71da9e4b6985a7b5951dd62ce7bb020d_7”, “71da9e4b691a41961dcd6524593d39ee_7”, “71da9e4b69efa71be86d625508ec9feb_7”);
  15. var container = document.getElementById(“container”);
  16. function printPlayer(index){
  17.     //alert(arr.length);
  18.     if(index>arr.length-1){
  19.         index=0;
  20.     }
  21.     //container.removeElement;
  22.     container.innerHTML=””;
  23.     var vid=arr[index];
  24.     if (navigator.userAgent.match(/iP(od|hone|ad)/i)) {
  25.         var video = document.createElement(“video”);
  26.         video.src = “http://v.polyv.net/uc/video/getMp4?vid=”+vid;
  27.         video.onended=s2j_onPlayOver;
  28.             //video.addEventListener(‘ended’,j2s_onPlayOver, false);
  29.         video.autoplay=”true”;
  30.         video.controls=”controls”
  31.             container.appendChild(video);
  32.     }else{
  33.             var swf=”http://player.polyv.net/player_polyv_20130926a.swf?vid=”+vid;
  34.            container.innerHTML = “<OBJECT width=’600′ height=’375′ ><PARAM NAME=movie VALUE='”+vid+”‘><param name=’allowscriptaccess’ value=’always’>”
  35.            +”<param name=’allowFullScreen’ value=’true’ />”
  36.            +”<EMBED src='”+swf+”‘ width=’600′ height=’375′  TYPE=’application/x-shockwave-flash’ allowscriptaccess=’always’ allowFullScreen=’true’ /></EMBED>”
  37.            +”</OBJECT>”;
  38.           <!– container.innerHTML = “<OBJECT>”+swf+”</OBJECT>”;–>
  39.     }
  40. }
  41. printPlayer(index);
  42. /* function j2s_onplayover(){
  43.     index++;
  44.     printPlayer(index);
  45. } */
  46. function s2j_onPlayOver() {
  47. alert(‘ssss’);
  48.     index++;
  49.     printPlayer(index);
  50. }
  51. </script>

 

 

运行效果:

标签