Some general doubts about video.js [closed]

Question

I have some general doubts about the player. I'll list them:

1. Does video.js support HLS video format? If it does, on what plataforms? (Browser, Devices, browser...?). Sorry, I searched for this on the web site and didn't find anything.

2. I saw that Ogg and MP4 file formats are the most supported file types, and WebM isn't so much. I have searched about what's WebM... is that HLS? Are there other supported file formats than those not listed on the website?

3. Does video.js support Video Advertising and Google Analytics?

4. Playback features, something like a list in the final of a video where I can choose another one. Is that possible?

5. Is there support to adaptive streaming? That is, adjust the quality of a video delivered to a web page based on changing network conditions?

6. Is it easy to customize the player creating skins and applying them on it? Can I put a symbol of my web site on the player, for example?

I think is that.

I'll be very happy if anyone could help.

Answer 1

Does video.js support HLS video format? If it does, on what plataforms? (Browser, Devices, browser...?). Sorry, I searched for this on the web site and didn't find anything.

Yes, today on any platform that supports it through HTML5 (iPhone, Desktop Safari) using the 'application/x-mpegURL' mimetype on your source. Soon to support HLS on all desktops as well.

I saw that Ogg and MP4 file formats are the most supported file types, and WebM isn't so much. I have searched about what's WebM... is that HLS? Are there other supported file formats than those not listed on the website?

Actually WebM, MP4, and Ogg are all pretty closely tied now as far as end-user support. WebM is an open and free format like Ogg, but a little better compression. WebM is not HLS. HLS is playlist of MPEG-TS video file segments.

Does video.js support Video Advertising and Google Analytics?

Soon.

Playback features, something like a list in the final of a video where I can choose another one. Is that possible?

You can build it yourself. There isn't a pre-made solution for that yet.

Is there support to adaptive streaming? That is, adjust the quality of a video delivered to a web page based on changing network conditions?

Through HLS, yes.

Is it easy to customize the player creating skins and applying them on it? Can I put a symbol of my web site on the player, for example?

Video.js is all open source and the skin is built using HTML, CSS, and JavaScript. If you're comfortable with those technologies it shouldn't be hard to make it look like what you want.

Summary
For the last few years Video.js has been my side project, but Zencoder (my company) was acquired by Brightcove, and now I get to work on it full time, and get help from the Brightcove player team. So expect big things coming. I'm also still always happy to get more help if you feel inspired.

Answer 2

Is that flash compatible?

Yes: if it's properly configured then it will fall back to use its built-in Flash player, if the browser doesn't support the <video> element natively.

And you can override that, e.g. force it to use its Flash player all the time.

Answer 3

You can track VideoJS 3.2 video events in Google Analytics using the following API customization's:

// Once the video is ready
_V_("video-embed-1234").ready(function(){

    // Google Analytics event tracking
    var trackGaEvent = function() {
        var playerState = this;

        // Determine time
        var date = new Date( event.timeStamp );

        var hours = date.getHours();
        if ( hours < 10 ) hours = "0" + hours.toString();
        var minutes = date.getMinutes();
        if ( minutes < 10 ) minutes = "0" + minutes.toString();
        var seconds = date.getSeconds();
        if ( seconds < 10 ) seconds = "0" + seconds.toString();

        var formattedTime = hours + ':' + minutes + ':' + seconds;

        // Log event
        var gaCategory = 'VideoJS';
        var videoId = playerState.id;
        var playerStateUrl = videoId.replace('benchfly-embed-', 'https://secured.benchfly.com/player/') + '/';
        _gaq.push([ '_trackEvent', gaCategory, event.type, playerStateUrl, formattedTime, false ]);
    };

    // Attach GA tracking to event listeners
    this.addEvent( "play", trackGaEvent );
    this.addEvent( "pause", trackGaEvent );
    this.addEvent( "load", trackGaEvent );
    this.addEvent( "ended", trackGaEvent );
    this.addEvent( "volumechange", trackGaEvent );

});