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

Javascript实现视频轮播,毕竟是客户的需求吗?所以尽量实现下,下面有个实现视频轮播的示例,pc端与移动端均可以实现,感兴趣的朋友可以了解下

最近客户要求用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></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 ><PARAM NAME=movie VALUE='"+vid+"'><param value='always'>"
+"<param value='true' />"
+"<EMBED src='"https://www.jb51.net/article/+swf+"' TYPE='application/x-shockwave-flash' allowscriptaccess='always' allowFullScreen='true' /></EMBED>"
+"</OBJECT>";
<!-- container.innerHTML = "<OBJECT>"https://www.jb51.net/article/+swf+"</OBJECT>";-->

}
}

printPlayer(index);


/* function j2s_onplayover(){
index++;
printPlayer(index);

} */

function s2j_onPlayOver() {
alert('ssss');
index++;
printPlayer(index);
}
</script>


运行效果:

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

 

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdzdjj.html