How to use the "Player" API?

[JohnBernardsson]

Hi, first of all, thanks for this directive :)

I've been a while playing around with this, but I definitely don't know how to do it. I need to access the methods of the Player API : http://docs.videojs.com/docs/api/player.html, so I can manually control the position of the video, get the video currentTime, etc.

My last try was something like this:

scope.$on('vjsVideoReady', function(evt, videoData) {
    scope.videoPlayer = window.videojs.Player(videoData.vid.tag);           
});

But I am getting the following error:

TypeError: this.getTagSettings is not a function
    at Function.vjs.Player.vjs.Component.extend.init (video.min.js:1)
    at Function.a [as Player] (video.min.js:1)
    at videoLibrary.js:3241
    at Scope.$emit (angular.js:12934)
    at null.<anonymous> (vjs.directive.js:236)
    at vjs.Component.ready (video.min.js:1)
    at vjs.Component.vjs.CoreObject.extend.init (video.min.js:1)
    at a [as constructor] (video.min.js:1)
    at vjs.Player.vjs.Component.extend.init (video.min.js:1)
    at new a (video.min.js:1)

The video.js version seems to be 4.2, according to window.videojs.CDN_VERSION (I entered to an ongoing project in my company, so the videojs library was already there, that's what I am looking at that CDN_VERSION property).

Any clues about how to achieve what I want?

[ghost]

hi @EvilJohnny,

The way it works is the videoData.vid parameter is a reference to the player api. I don't think you were alone in this confusion which is why the vid parameter is going to be deprecated and renamed to player to make it clear what element the parameter refers to.

With that said, you should be able to get the current time like this:

scope.$on('vjsVideoReady', function(evt, videoData) {
    scope.videoPlayer = videoData.vid.tag;
    scope.videoPlayer.currentTime();
});

I will try to update the documentation to make this a bit more clear. Let me know if that works out for you!

[JohnBernardsson]

I see! Sweet!

Then the problem might be a different one... Because if I call videoData.duration() it returns undefined. But I think that's because I am using ng-src in the element, like this:

<video class="video-js vjs-default-skin"
    ng-src="{{video.videoUrl}}"
    vjs-video
    data-setup="{}" 
    controls
    width="320" height="180">
</video>

So 'vjsVideoReady' is fired but seems that "ng-src" still didn't add the correct url to the src attribute (at some point it does, because the video loads and plays clicking on play button).

Any clues?

(Maybe I should close this issue and add a different one for this?)

[JohnBernardsson]

Solved it with this workaround:

scope.$on('vjsVideoReady', function(evt, videoData) {

    if (!videoData.vid.tag.src) {
        $timeout(function() {
            scope.loadVideo(videoData);
        });
    }else {
        scope.loadVideo(videoData);
    }

});

And in the scope.loadVideo I can call videoData.vid.load(), for example, to get the video start loading automatically 😃

[ghost]

Hmm, what version of video.js are you using? I think I may have found a bug with the timing on when vjsVideoReady is fired with video.js 5.x.

[JohnBernardsson]

The version is 4.2 😃

Anyways the workaround is pretty easy.