您的位置：首页 > Web前端 > JavaScript

Javascript实现视频轮播在pc端与移动端均可

2013-09-29 00:00 846 查看

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

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

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

但移动端，存在有一点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>

运行效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航