jQuery Plugin To Play Vine Videos/Audios In A Loop - vineVideoPlayer
File Size: | 1.59 KB |
---|---|
Views Total: | 1725 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.