Javascript實現視頻輪播

最後更新：2013-11-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

最近客戶要求用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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More