Video carousel using Javascript

Source: Internet
Author: User

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



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.