Recent customer requests to use JavaScript to implement video carousel:
Interested students can participate in the Open
The following write a program to achieve video carousel, PC end and mobile end can be realized,
But the mobile side, there is a little bug;
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "textml; Charset=utf-8 ">
<title>insert title here</title>
<p> Video Carousel 11</p>
<div id= "Container" ></div>
<p> Video Carousel 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= ' height= ' 375 ' ><param name=movie" "Value=" +vid+ ><PARAM ' allowScriptAccess ' value= ' always ' > '
+ "<param name= ' allowfullscreen ' value= ' true '/>"
+ "<embed src= '" +swf+ "' width= ' 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>
Operation Effect:
