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

前端技术 2023/09/09 JavaScript
最近客户要求用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>

运行效果：
 

本文地址：https://www.stayed.cn/item/24091

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案