CODEWITHSUNDEEP
javascriptangularjsvideovideo.js
Aidan Gee
Aidan Gee

Reputation: 579

how to dynamically add videojs player with javascript?

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

Upvotes: 3

Views: 4113

Answers (1)

Aidan Gee
Aidan Gee

Reputation: 579

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.

Upvotes: 2

Related Questions