jQuery Plugin To Play Vine Videos/Audios In A Loop - vineVideoPlayer

vineVideoPlayer is a jQuery script to create an Vine video player on the webpage to play a list of Vine videos or audios in a loop.

How to use it:

1. Include the jQuery javascript library in the Html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

2. Insert an Vine video player into your webpage. Replace the url in the 'src' tag below to replace the starting vid.

<div id="vine-content" class="frame"> 
<iframe 
          class="vine-embed" 
          src="https://vine.co/v/MrZH1BZ3WQw/embed/simple?audio=1" 
          width="500" 
          height="500" 
          frameborder="0"> </iframe>
<script 
          async 
          src="http://platform.vine.co/static/scripts/embed.js" 
          charset="utf-8">
        </script> 
</div>

3. Create a playlist using javascript object array and enable the plugin.

<script type='text/javascript'>
$(function() {
var videoUrls = [
"https://vine.co/v/MrZH1BZ3WQw/embed", // this is the same as the start vid, for when it loops back around
"https://vine.co/v/MXhPJVr2uvQ/embed",
"https://vine.co/v/MXMwbAaAdxi/embed",
"https://vine.co/v/MXraaKzTjT1/embed",
"https://vine.co/v/MXWrDibZpgd/embed",
"https://vine.co/v/MXgrBdIPnPt/embed",
"https://vine.co/v/Mgl1vxnHimg/embed",
"https://vine.co/v/MXX1b0rDMiX/embed"];
var idx = 1;
var $iframe = $('iframe');
var hangTime = 6000; // this is the loop time (in MS)

setInterval(function() {
var newVid = videoUrls[idx]
$iframe.attr('src', newVid + '/simple'); // for videos
// $iframe.attr('src', newVid + '/simple?audio=1'); for audios
idx += 1;
idx = idx % videoUrls.length;
}, hangTime); 
})
</script>

---

This awesome jQuery plugin is developed by drwrchrds. For more Advanced Usages, please check the demo page or visit the official website.