Recently, the customer requested to use Javascript For video carousel: (single video and multiple videos are acceptable)
If you are interested, you can take a look.
The following describes a program to achieve multi-video carousel, which can be implemented on both pc and mobile terminals. (The same is true for single-video playback)
You only need to register an account on the polyv platform and upload several videos to use this code.
The principle is to get the video id uploaded on the polyv video platform and put it in an array:
var arr = new Array("71da9e4b6985a7b5951dd62ce7bb020d_7", "71da9e4b691a41961dcd6524593d39ee_7", "71da9e4b69efa71be86d625508ec9feb_7"); Then, the loop is used to call the Video Playback End Interface s2j_onPlayOver (); to jump to the id of the next video to be played.
Video playback function: printPlayer (index );
The multi-terminal control code is as follows:
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);}
If the user looks at it on a pc, the following code segment will be executed:
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>";--> }
Complete code:
<! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">
Running effect:
Effect preview address 1: http://www.polyv.net/
Effect preview address 2: http://forum.junjing.net/test3.php