Runtime Properties

[howardkitto]

This directive is great! It saved me so much time.

I need to log information about HLS playback quality. What is the best way for me to display the video.js runtime properties for example player.hls.segmentXhrTime, player.hls.bandwidth, player.hls.bytesReceived while the video is playing?

Huge thanks

[ghost]

Hi @howardkitto, glad to see it's helpful.

To get a reference to runtime properties you can listen for the vjsVideoReady event to fire. Note that if you are managing more than one video you may need to add additional logic if (such as checking the id of the video) to determine which video the callback is handling. It should work something like the following from within the controller/directive the videos are invoked:

        scope.$on('vjsVideoReady', function (e, data) {
            //data contains `id` and `vid`
            console.log('e.data.vid:', data.id);
            console.log('e.data.vid:', data.vid);
            console.log('e.data.vid:', data.vid.player());
        });

For more information, check out this section of the README. Let me know if that helps/solves your problem!

[howardkitto]

Thanks so much, this helps a lot however I can't figure out how to get at the hls runtime data or even find any examples!

[ghost]

@howardkitto are you using this?

If so you_should_ be able to access the hls data like so (although I haven't tested using hls data myself):

scope.$on('vjsVideoReady', function (e, data) {
     //data contains `id` and `vid`
     console.log('e.data.vid:', data.vid.player().hls.segmentXhrTime);
});

[howardkitto]

Yes that's exactly what I tried first of all but I get:

e.data.vid: undefined

[ghost]

Looks like I had a typo there, it shouldn't be e.data.vid but data.vid! I'll pudeste the docs!

[ghost]

Looks like if you copied the code the e.dva.vid is just the comment, are you getting a non null value for the data.vid variable?

[howardkitto]

Hey Lonny

I'm pretty new to Angular, so some of this is black magic to me! In Test A
I have this:

• var app = angular.module('videoPlayer', ['vjs.video']);*

•        app.controller('swapSource', ['$scope', function(scope) {*
  

•         scope.$on('vjsVideoReady', function (e, data) {*
  

•         console.log('data.vid:', data.vid.player());*
  

•    });*
  

and I console logs this:

data.vid: Player {player: Player, options_: Object, id_: "vjs_video_3",
name_: null, children_: Array[8]…}_

All good.

In Test B I have this:

• var app = angular.module('videoPlayer', ['vjs.video']);*

  •        app.controller('swapSource', ['$scope', function(scope) {*
    

•         scope.$on('vjsVideoReady', function (e, data) {*
  

•         console.log('data.vid:',
  

  data.vid.player().hls.segmentXhrTime);*

•    }); *
  

and when the page loads I get this...

TypeError: Cannot read property 'segmentXhrTime' of undefined

and this when I load the video:

data.vid: undefined

But the video plays with no problem

My guess is that I need to listen for some other event to fire, like when
the segments are downloaded, but I can't find out what that might be. I put
a question on Stackoverflow
http://stackoverflow.com/questions/34252325/video-js-hls-runtime-properties
but haven't got any answers yet

Thanks so much for your help so far!

Howard

On 13 December 2015 at 17:37, Lonny Gomes notifications@github.com wrote:

Looks like if you copied the code the e.dva.vid is just the comment, are
you getting a non null value for the data.vid variable?

—
Reply to this email directly or view it on GitHub
#21 (comment)
.

[ghost]

@howardkitto Out of curiosity, is this only an issue when used with the directive? If so I wonder if there is an issue with how the video.js hls plugin is getting initialized.