2 videos

by Fabi F

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.9/video-js.css">
<script src="http://vjs.zencdn.net/4.9/video.js"></script>
<button id="start">Start</button>
<div id="container"></div>

JavaScript

var jsonString = '[{"id":1,"description":"Video","img":["http://video-js.zencoder.com/oceans-clip.mp4","http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4"]}]';
var data = JSON.parse(jsonString);


$('#start').click(function() {
    $.each(data, function() {   
        for(var i=0; i < this.img.length; i++){
            var newNode = document.createElement('div');
            $('#container').append(newNode); 
            playVideo(newNode, this.img[i]);
        };
    });
});    
    

function playVideo(div, visual) {
    var video = '<video class="video-js vjs-default-skin vjs-big-play-centered video-js-fullscreen"' +
                'controls preload="auto" width="480" height="270" autoplay ' +
                'data-setup=\'{ "example_option": true}\'>' +
                '<source src="' + visual + '" type="video/mp4"/>' +
                '</video>';
    $(div).html(video);
    videojs(document.getElementsByClassName("video-js")[0], {}, function () {});
}