Javascript實現(xiàn)視頻輪播在pc端與移動端均可
更新時間：2013年09月29日 15:13:55 作者：
用Javascript實現(xiàn)視頻輪播，畢竟是客戶的需求嗎？所以盡量實現(xiàn)下,下面有個實現(xiàn)視頻輪播的示例，pc端與移動端均可以實現(xiàn)，感興趣的朋友可以了解下
最近客戶要求用Javascript實現(xiàn)視頻輪播:
有興趣的同學(xué)可以參開一下
下面寫了一個程序?qū)崿F(xiàn)視頻輪播，pc端與移動端均可以實現(xiàn)，
但移動端，存在有一點bug;
<!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>
運行效果：
有興趣的同學(xué)可以參開一下
下面寫了一個程序?qū)崿F(xiàn)視頻輪播，pc端與移動端均可以實現(xiàn)，
但移動端，存在有一點bug;
復(fù)制代碼 代碼如下:
<!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>
運行效果：
相關(guān)文章
容易被忽略的JS腳本特性，學(xué)習(xí)js的朋友可以參考下。2011-09-09
這篇文章全面解析了Bootstrap表單的使用方法，本文重點介紹Bootstrap表單控件，感興趣的小伙伴們可以參考一下2015-11-11
javascript改變position值實現(xiàn)菜單滾動至頂部后固定
現(xiàn)在很多網(wǎng)站都有這樣的一個效果，當(dāng)頁面滾動到一定高度時，菜單欄會固定在頁面頂部;該效果在 ie6 下不支持，因為ie6不支持 position:fixed,效果很不錯，感興趣的朋友可以了解下啊2013-01-01
下面用js實現(xiàn)可以生成用戶所需行數(shù)的表格，具體步驟及效果圖如下，感興趣的朋友，可以參考下哈，希望對大家有所幫助2013-07-07
JavaScript其他類型的值轉(zhuǎn)換為布爾值的規(guī)則詳解
在JavaScript中,所有的值在邏輯上下文中都會被轉(zhuǎn)換為布爾類型（Boolean）,理解這些轉(zhuǎn)換規(guī)則對開發(fā)者來說至關(guān)重要,尤其是在條件判斷、短路運算、邏輯非（!）等場景下,正確掌握布爾轉(zhuǎn)換可以避免潛在的bug,本文將詳細(xì)介紹 JavaScript 其他類型的值是如何轉(zhuǎn)換為布爾值的2025-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
下面小編就為大家?guī)硪黄狫s操作DOM元素及獲取瀏覽器高寬的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了通過微信公眾平臺獲取公眾號文章的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
javascript中利用柯里化函數(shù)實現(xiàn)bind方法
這篇文章主要為大家詳細(xì)介紹了javascript中利用柯里化函數(shù)實現(xiàn)bind方法，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了Openlayers學(xué)習(xí)之加載鷹眼控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09