danielcebrian / rangeslider-videojs

This is a plugin to create a range slider to select a region of the video
Apache License 2.0
78 stars 69 forks source link

I got error when trying to clone the video and initialize the plugin again. #16

Open noppanit opened 8 years ago

noppanit commented 8 years ago

Hi

Thanks for the awesome plugin. I'm trying to clone the video with a selected range but after initialize the plugin with the cloned div I get this error.

Here's my code that I append to your demo.html

function cloneVideo() {
    var rand = Math.floor(Math.random() * 100) + 1;
    var $video = $('<video></video>')
        .addClass('video-js vjs-default-skin')
        .attr('id', 'klon' + rand)
        .attr('controls', true)
        .attr('width', 640)
        .attr('height', 264)
        .attr('poster', 'http://video-js.zencoder.com/oceans-clip.png');
    var $source = $('<source></source>')
        .attr('src', 'http://video-js.zencoder.com/oceans-clip.mp4')
        .attr('type', 'video/mp4');
    $video.append($source);

    $('body').append($video);
    var options ={hidden:false, locked:false},
    clonedPlayer = videojs('klon' + rand);
    clonedPlayer.rangeslider(options);
    clonedPlayer.play();
        clonedPlayer.unlockSlider();

    var start = document.getElementById('Start').value;
    var end = document.getElementById('End').value;
    clonedPlayer.loopBetween(start, end);

}

Then I get these errors

Loaded Plugin RangeSlider
rangeslider.js:96 Loaded Plugin RangeSlider
rangeslider.js:1011 Uncaught TypeError: Cannot read property 'ctpl' of undefinedvideojs.ControlTimePanel.enable @ rangeslider.js:1011RangeSlider.unlock @ rangeslider.js:169videojs.Player.unlockSlider @ rangeslider.js:407cloneVideo @ demo.html:104onclick @ demo.html:118
14rangeslider.js:564 Uncaught TypeError: ctd.localize is not a functionvideojs.SeekRSBar.onMouseMove @ rangeslider.js:564a @ video.min.js:1d.dispatcher @ video.min.js:1
rangeslider.js:96 Loaded Plugin RangeSlider
rangeslider.js:1011 Uncaught TypeError: Cannot read property 'ctpl' of undefinedvideojs.ControlTimePanel.enable @ rangeslider.js:1011RangeSlider.unlock @ rangeslider.js:169videojs.Player.unlockSlider @ rangeslider.js:407cloneVideo @ demo.html:104onclick @ demo.html:118
46rangeslider.js:564 Uncaught TypeError: ctd.localize is not a function
danielcebrian commented 8 years ago

maybe because you have a function and $video is overwritten. I am not sure only with this

rizwanarshad commented 8 years ago

This plugin works fine on page load but issues when trying to add / remove dynamically on user selection. Not sure if plugin supports this.