how to dynamically add videojs player with javascript?

Question

any enlightenment on this problem would be very helpful.

All I'm trying to do is dynamically add a videojs player with javascript.

<div class="video-wrapper" ng-repeat="videos in panel">
        <button class="remove-video" ng-click="removeFromPanel($index)">x</button>
        <video id="{{videos.id}}" class="video-js vjs-default-skin" preload="none" controls width="300" height="210"
              poster="" >
              <source src="{{videos.directory}}" type='video/mp4' />
        </video>
    </div>

So for each object in the array "panel" I want a video to show. If I try to add a video after the page has loaded the videos do not initialise properly, they just add as normal video tags.

I have tried to use :

_V_("player id", { "controls": true, "autoplay": false, "preload": "auto" }, function(){
        // Player (this) is initialized and ready.

        });

to set up the player manually, but to no success.

anybody had this problem and managed to fix it ?

I would love to do a js fiddle for this but I have used angular for my app and I can never make it work correctly in jsfiddle.

Thanks for reading and the help in advance

Aidan Gee · Accepted Answer · 2013-11-18 16:14:43Z

2

I solved this by using

myPlayer.dispose();

on the player object then using

_V_("player id", { "controls": true, "autoplay": false, "preload": "auto" }, function(){
    // Player (this) is initialized and ready.
    });

to initialise it after I had created a new player object in the dom.

So I assume my problem was something to do with having 2 references to the same player object.

answered Nov 18, 2013 at 16:14

Aidan Gee

5791 gold badge11 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to dynamically add videojs player with javascript?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related