html5 video player best practice

dendraya

hi,

I want to migrate all my videos from flash based playback to one which uses html5.
Right now i use jplayer (and i would prefer still using it, because of it's nice integration into zenphoto) and my videos are encoded using h.264/AAC and then are mixed into an .flv container with ffmpeg and the metadata is added with yamdi to correctly work with jplayer.

Because of flash support being dropped in favour of html5-video, I would like to migrate to html5-based videos, but I'm not quite sure what's the best way to do so.
According to [1] the most supported codec is (still?) h.264, but it seems webM is generally suggested because of licencing issues. I somehow only found outdated sources (~2 years old) about h.264 support going to be dropped in chrome for example.

I'm just curious what you guys would suggest is the way to go - I don't want to change everything in a year again .
My main goal is that the videos should be viewable on all devices (win/linux/mac and there mobile versions) out of the box and the quality should be as good as it gets (within an acceptable filesize) - what would be really nice to have is the ability to dynamically choose an appropriate quality, which can be overwritten by the user, though.

A little bit offtopic: Does anyone have experience with video.js [2] or projector [3] - how do they compare to jplayer?

[1] http://en.wikipedia.org/wiki/HTML5_video#Browser_support
[2] https://github.com/videojs/video.js
[3] http://www.projekktor.com/

acrylian

The h.264 licensing issues have been resolved as far as I know. Even Firefox now supports it therefore.

The best pracice is still to provide mp4/m4v files and the appropriate counterpart webm and ogg formats just like jPlayer does.

Here are a good tables:
http://mediaelementjs.com/#howitworks
http://jplayer.org/latest/developer-guide/#reference-html5-media

what would be really nice to have is the ability to dynamically choose an appropriate quality, which can be overwritten by the user, though.
This is imho no free player provides. If you want this you should use a video hoster like Youtube, Vimeo or else (and yes with a bit workaround you can use these in albums, too).

Quick overview:
Video.js - Video only (I think)
Projekktor - Video only, a lot stuff you have to buy additionally

Good table comparison here:
http://praegnanz.de/html5video/

Both jPlayer and mediaelementjs had been chosen because they provide both video and audio and playlist support (well, mediaelementjs does not really)

MarkRH

Hmm.. I should make all my .flv videos into .mp4 so the HTML5 stuff gets used with Jplayer.

Tried mediaelements on my stand-alone website. Will have to try out Jplayer as well. Tried JWPlayer but a goofy logo is always there on the free version.

acrylian

JW Player is open source but not really free and open source software as it is free only for non commercial use. It is a great player still probably but exactly this licensing was the reason we had to drop support for it years ago.

Similar to Flowplayer5 which is still free and open source but different to the old flash based version has no audio support anymore.

dendraya

The best pracice is still to provide mp4/m4v files and the appropriate counterpart webm and ogg formats just like jPlayer does.

Ok, good to know ... That means i do not need a .flv file for flash fallback - i.e. the flash-version of jplayer can play the m4v(h.264/aac) files as well? - do i need to pay attention on where/how the metadata is stored as it is the case with .flv files?

Good table comparison here:
http://praegnanz.de/html5video/

Thanks for the table, it's quite a nice overview - do you think i should switch to mediaelements - it seems a little bit nice, but i'm not quite sure if it is worth the hassle to update it seperately - and one thing i stumbled upon is that in playlists it does not autoplay the next song - what i really need is that if the page is loaded (in my case it just loads the video via ajax) the video starts playing automatically. - this should work having only one video, shouldn't it.

acrylian

That means i do not need a .flv file for flash fallback - i.e. the flash-version of jplayer can play the m4v(h.264/aac) files as well?

No, flash can play h.264/aac as well. flv and mp4 are both container formats that can contain various codecs (h.264 with aac audio or mp3 for example).

The playlist support in the mediaelementjs plugin is rather basic and a third party solution as its dev for unknown reasons does not provide an official included playlist plugin. Just like jPlayer does (which also takes audio and video in one playlist, too).

what i really need is that if the page is loaded (in my case it just loads the video via ajax) the video starts playing automatically

As we speak of best practices: I don't know your site but autoplaying of video or audio is rather bad practice ;-) Unless you are a site where this is really expected like Youtube or similar.

On mobile devices as far as I know autoplay does not work anyway.

dendraya

That means i do not need a .flv file for flash fallback - i.e. the flash-version of jplayer can play the m4v(h.264/aac) files as well?

No, flash can play h.264/aac as well. flv and mp4 are both container formats that can contain various codecs (h.264 with aac audio or mp3 for example).

That means, in the end i need three files (.flv, .m4v, .webmv) of the same video to make it work in (almost) every browser?

As we speak of best practices: I don't know your site but autoplaying of video or audio is rather bad practice ;-)

generally speaking, i totally agree with you, but i think it is ok, or even preferred in my case, because i have the whole page loaded without any video and only insert the video into the website when someone clicks on video - and having them click again to start the video doesn't make any sense in my opinion - i might have to change to a playlist-based solution in the future if more videos get online, though.

acrylian

That means, in the end i need three files (.flv, .m4v, .webmv) of the same video to make it work in (almost) every browser?

You don't need .flv. m4v/mp4 for html5 capable browsers and flash fallback and webmv/ogv for the browser not supporting m4v/mp4. Similar for mp3 vs webma/oga.

Regarding autoplay: Of course it can make sense on specific sites and of course you know best what is right for your site, just wanted to mention it ;-)