HTML5 Overview


What you see above is HTML5 player!

Nuevoplayer in HTML5 mode supports HLS streaming, viral icons, menu, related windows, email and sharing options,
slow motion playback (half speed), HD switch, youtube playback, aspect ratio control, logo pictures on player and in controlbar.
It's almost same as flash player now!


BROWSERS SUPPORT FOR HTML5

BrowserHTML5 SupportFlash Support
Internet Explorer 6/7/8NoYes
FirefoxYes ( ogg + webM )Yes
ChromeYes ( webM + mp4 )Yes
Internet Explorer 9Yes ( mp4 )Yes
iOSYes ( mp4 )No
SafariYes ( mp4 )Yes
AndroidYes ( mp4 )Maybe
Opera 10.5Yes ( ogg )Yes
Opera 10.6+Yes ( ogg + webM )Yes
Black-BerryNoNo


As you can see HTML5 support varies from browser to browser.
Anyway for today best suggested video format for HTML5 is h264/mp4 video, just like videos in example above.
Don't forget that HTML5 video doesn't support flash FLV format and doesn't stream from RTMP servers.

You can easily force Nuevoplayer to play in HTML5 mode if only your video is compliant with HTML5 playback.
Just set option fallbackOrder to play HTML5 first. See player code setup below.

<script id="nuevo" type="text/javascript" src="/nuevo/player.js" charset="utf-8"></script>
<div id="nuevoplayer"></div>
<script type="text/javascript">
nvplayer.start( {
      id:'nuevoplayer',   // id of DIV object to be replaced by player
      regkey: xxxx,   // your registration key for flash player
      file:  'http://www.yourdomain.com/video.mp4',
      filehd:  'http://www.yourdomain.com/video_hd.mp4',
      width:'740', height:'464',
      fallbackOrder: 'html5,flash'
}); 
</script>

Different browsers, different video format support

From the table above you could learn that different browsers may support different video formats.
Nuevoplayer in HTML5 mode is prepared to accept multiple formats of same video file and automatically choose the right one to play.
You can define mp4/h264 video, webm video and ogg video within player setup code. This is also how this html5 demo you see is configured.


<script id="nuevo" type="text/javascript" src="/nuevo/player.js" charset="utf-8"></script>
<div id="nuevoplayer"></div>
<script type="text/javascript">
nvplayer.start( {
      id:'nuevoplayer',   // id of DIV object to be replaced by player
      regkey: xxxx,   // your registration key for flash player
      file:  'http://www.yourdomain.com/video.mp4',
      webm: 'http://www.yourdomain.com/video.webm',
      ogg: 'http://www.yourdomain.com/video.ogg',
      width:'740', height:'464',
      fallbackOrder: 'html5,flash'
}); 
</script>

Nuevoplayer HTML5 playback

Nuevoplayer accepts multiple video files for HTML5 playback, supported by most of browsers.
This concerns h264/mp4 format, webm and ogg formats. It's possible to define multiple version of same video but different fromat,
to ensure that it will be played by every browser which supports HTML5 video tag.
To learn more how to setup multiple video sources check post on our blog Video sources for html5 playback

Nuevoplayer HTML5 design

Nuevoplayer design for HTML5 is probably most advanced you can find. It supports multiple skins and most of features avilable in flash version.
You can have logo image in one of corners of video screen, you can have small logo picture in controlbar, you can switch video aspect ratio,
you can assign and play HD version of video. HTML5 version of Nuevoplayer supports related videos feature, multiple sharing options,
allows to display video source page link and embed code, allows to email about video.
Design looks and works fine for wide and narrow 320 pixels player. On small devices, with narrow player Nuevoplayer is enough smart
to reduce features and switch to built in controlbar for best possible watch experience.

What about Youtube plugin and HTML5 playback?

Many webmasters are happy to use built-in youtube plugin in flash version of Nuevoplayer.
But what about HTML5 ?
As Youtube stated, their HTML5 player API is experimental feature.
However we did tested new youtube API a lot and did best what was possible to support such youtube playback.
Standalone youtube video is playing well with Nuevoplayer both: Flash and HTML5.