PopcornJS playing sequence

PopcornJS playing sequence, reInitialisePopcorn to update the sequence. There might be a better way of doing this by adding and removing the sequence or updating. to the popcorn instance. unless the popcorn instance needs to be initialised with the sequence.

by Pietro Passarelli

HTML

<script src="http://cdn.popcornjs.org/code/dist/popcorn-complete.js"></script>
<div id="videoPreviewContainer">
    <div id="videoPreview"></div>
</div>
<button id="playButton">play</button>

JavaScript

/*PopcornJS playing sequence - working
http://popcornjs.org/popcorn-docs/modules/#sequence
*/

var sequenceArray = [{
    src: "http://solutions.brightcove.com/bcls/assets/videos/Bird_Titmouse.mp4",
    in : 3,
    out: 6
}, {
    src: "http://solutions.brightcove.com/bcls/assets/videos/SeaTurtle.mp4",
    in : 10,
    out: 15
}, {
    src: "http://solutions.brightcove.com/bcls/assets/videos/bumper2.mp4",
    in : 1,
    out: 3
}];

 var sequence;

function instanciatePopcornSq() {
     sequence = Popcorn.sequence("videoPreview", sequenceArray);
}



function removePopcornPreview() {
    //get popcorn div videoPreview id 
    var videoElem = document.getElementById('videoPreview');
    //remove it
    videoElem.parentNode.removeChild(videoElem);
    //create new one
    videoElem = document.createElement('div');
    //with same id
    videoElem.id = "videoPreview";
    //grab containing div videoPreviewContainer
    var videoPreviewContainer = document.getElementById('videoPreviewContainer');
    //add it to containing div
    videoPreviewContainer.appendChild(videoElem);
    //document.body.appendChild(videoPreviewContainer);
}


function reInitialisePopcorn() {
    removePopcornPreview();
    instanciatePopcornSq();   
}

//play button
var playBtn = document.getElementById('playButton');

playBtn.onclick = function (e) {
    reInitialisePopcorn();
    sequence.play();  
}