Html 5 Video Player

3.683.683.683.683.6835votes
Posted by: Shiv Kumar
Views: 17866Favorited: 0 Favorite It Comments: 40
September 08, 2010 09:01 AM
Filed Under: New Feature
Tags: HD Video, Html 5 Video, XR Video Player

As browser vendors work hard at implementing various features of Html 5 in their browsers, they’ve also been enhancing support for the video tag. We’ve been monitoring their progress closely and have been simultaneously developing our own Html 5 video player and ensuring that it works in all major browsers (IE, Firefox, Safari, Chrome, and Opera). In addition to desktop players, our Html 5 video player is also compatible with mobiles devices such as Android based devices, Windows phone 7 based devices and iPhone/iPad.

 

Html 5 Video player Demo

The Html 5 video player demo page attempts to show off some of the capabilities of our Html 5 video player. We’ve got multiple versions of the video you see there. In addition, these videos are encoded at a much higher bit rate than the normal. So if you don’t have the bandwidth and/or processing power pick a different version. You will need the latest/beta versions of the major browsers in order to use the Html 5 video player.
  1. 1080p encoded at 7,000kbps
  2. 720p encoded at 4,000kbps
  3. 480p encoded at 2,600kbps
  4. 360p encoded at 2000kbps (same as current Md version)
  5. 270p encoded at 500kbps. (same as current Low version)
The demo page should work for all major browsers. Please check it out and let us have your feedback. There is a known issue with Safari on Windows and that is the browser downloads the complete file before playing the video.

 

Browser Support

While all browsers don’t yet support all of the features we need in our player, we’re happy to report that the ExposureRoom Html 5 video player boasts support for all the features you’d expect in a video player, including full screen support.

Major features of the ExposureRoom Html 5 video player

The following are the major features of our Html video player that are supported across all major browsers. We highlight them here because most websites that have an Html 5 player don’t support these features.
  1. Skip ahead – The ability to skip ahead even though the video stream has not downloaded to that point yet. Similar to streaming video behavior.
  2. Change version while playing – The ability to be able to change the version (Low, Md, HD) while the video is playing. Unlike most other implementations, our player seamlessly changes versions starting from where you left off.
  3. Full screen – The ability to switch to full screen mode. You need to switch your browser to full screen mode (hit the F11 key) to get the best viewing experience. Safari users can simply switch to full screen mode (there is no F11 key option anyway)

In addition to the features above, the Html 5 player also supports or will support the following additional features:

  1. Theme support – The ability to change the color theme of the player as you can see on the demo page.
  2. Built-in Share/Embed options – The player itself will surface the options to share and embed.

     

Video Playback performance

We did some extensive tests during the course of developing our player and find that the playback performance of IE 9 and Safari are extremely good (almost as efficient as the native players on their respective platforms). So much so that they are far better than any Flash based video player (including ours). So MAC/Safari users can gain some real benefits here because typically Flash player performance on a MAC is pretty bad. Safari on Windows performs equally well. Microsoft will be releasing IE 9 in beta on September 15th so people can begin to use various Html 5 features including video soon. The speed and performance of the new IE 9 browser is simply awesome, leaving every browser far behind. If you haven’t checked it out yet, you can do so here. IE 9 Platform Preview


Mobile devices

The new player is compatible with mobile devices too. In addition, you’ll have the option to choose between all available versions. Devices such various Android devices and the iPad should be able to play all versions (bandwidth permitting).

 

H.264 and WebM

At the moment, H.264 and VP8 (WebM) are the two primary codecs in the Html 5 video space. Only Chrome supports both these codecs (with IE to follow soon). The others browsers, Firefox and Opera, support WebM but will probably never support H.264 and we’re not quite sure if Safari will support WebM (it support H.264).
At the moment all of our recent videos (in the last year or so) are encoded using the H.264 codec. None are WebM encoded (except the ones on the Html 5 video demo page) and we’re not quite sure if/when we will support WebM as encoding multiple versions twice over has implications of requiring double the processing power, double the time it takes and double the disk space required. So Firefox and Opera users will have to continue to use the Flash player.

 

Sync Flash version with Html 5

At the moment the two players (the Flash based player and the Html 5 player) are not synchronized in as far as their feature set is concerned. This will change shortly. That is both players will have the same features. In essence, the flash based video player will be enhanced to have the same features as our Html 5 video player. So those of you using older browsers or Firefox or Opera will still get the benefits of the features the Html 5 player has.

 

Playing ExposureRoom videos using the Html 5 video player

Under each video you’ll now see a link that says “Play using Html 5 Player”. You can click that link to play any (recent) video using the Html 5 player. We’ll remember your choice of player so you won’t have to keep clicking that link. Further, the Html 5 player also remembers the version you watched last and will default to that version (if possible) the next time. Note: This feature will only work for browsers supporting video encoded using the H.264 codec. For the moment, it is Safari, Chrome and IE 9.

Comments



Vu Nguyen    September 08, 2010 10:52 AM

Chrome

I was playing the videos using the new player and when I switched between HD modes from 720p to 360p... the video got squeezed and didn't go back to its ratio, so it's like a square block in the middle of the player... maybe it was the Chrome issue?

Sergey Yermolayev    September 08, 2010 11:11 AM

Doesn't work for me

I tested it on Firefox 3.6.9, IE 8.0.6, Safari 5.0.1, Opera 10.61 and Chrome 6.0.472.53. The only browser what works with the player is Chrome. IE gives me this error: Message: Object doesn't support this property or method Line: 1 Char: 19157 Code: 0 URI: http://exposureroom.com/javascripts/xr_20100902.js

Shiv Kumar    September 08, 2010 11:18 AM

Sergey, you need the latest versions of the major browsers in order to play video using the Html 5 features. For IE you need to the IE 9 platform preview (link provided in the article above). Vu, what video were you watching?

Thomas Belitz    September 08, 2010 11:58 AM

can you perform magic?

I have a 30Mbit/sec download connection - but your video player demo got stuck every 15 sec. at 1080p even at 720p the video does't run without interruptions. Too bad, you can not perform magic ;-)

Cade    September 08, 2010 12:00 PM

Works on my iPhone! Whooo hooo

Shiv Kumar    September 08, 2010 12:09 PM

Thomas Make sure you're getting the speed required. You can test your speed against the ExposureRoom servers here: http://exposureroom.com/speedtest/ You'll need a steady 7,500Kbps speed in order to watch the 1080p version and 4,500Kbps for the 720p version.

Mark Hovater    September 08, 2010 12:14 PM

Great Possibilities !!

HI ER, Thanks for upgrading the video player on ER. You guys continue to make the best site for all. I tested the new player and it looks great, much sharper and better blacks. The only thing wrong was the video playback. It jerked and sputtered all the way thru. I checked and buffering was not on. I went back to the soft flash player and it played fine. I checked my other assets and ran into the same issues. I'm on a Mac running 10.5.8 and Safari 5.0.1. I'm sure ER will figure out all these new beta bugs.

Chuck Spaulding    September 08, 2010 12:17 PM

I'm on a Mac Pro 8-core my speed test was a little over 8500Kbps, I'm on the latest version of Safari and Adobe Air and the HTML5 Page came up with an image but wouldn't do anything. Sorry, I hope you getting it running for everyone soon. Sounds great.

sonu chahal    September 08, 2010 12:23 PM

doen't work

I tried in both safari and firefox didn't work at all in both

Shiv Kumar    September 08, 2010 12:24 PM

Chuck, Did you see anything besides an image? That is did you see the player buttons as such? Please make sure you're using Safari 5.0.1 at least. Did you try other videos on XR (that is not just the demo page)? Mark, it's strange that the video jerks on MAC Safari and not using Flash player. Buffering does not show on Safari but the video does get buffered.

Chuck Spaulding    September 08, 2010 12:34 PM

Shiv, The image appeared with the controls, but the controls were very slow to react, if at all, and didn't work. I went to one of my videos and clicked on the small link to play in HTML5 and it payed. Probably the best way to describe it is that it was a bit "sticky" skipping occasionally. But played well for the most part. Why doesn't the player change size automatically to match the resolution being played? No matter which resolution I choose it plays in the same size viewer unless I hit full screen?

Shiv Kumar    September 08, 2010 01:11 PM

Chuck, When playing using the Html 5 player, you see the option to choose a version, within the player itself. It shows as 270p, 360p and 720p (the Low, Md, HD versions). You shouldn't see the normal buttons when using the Html 5 player. The sizing aspect has not been enabled as yet for the Html 5 player. Since you're on a MAC, can you try this using Chrome? Safari does have some issues with responsiveness. If you read about the tests and the results, you'll see what I mean. http://exposureroom.com/members/skumar/blogs/post/1048/

Rob Shaver    September 08, 2010 02:25 PM

Some more player feedback.

This is quite a nice looking player and performed well, for the most part. My configuration: Windows XP Chrome 5.0 Connect speed from your speed test 17,533 kbps I had the same aspect ratio issues reported above. More specifically, each time I switched resolutions or clicked in the play bar to change the play location, the next image shows was collapsed horizontally. Clicking on the "full screen" button corrected the problem. If I was in full screen mode then it returned to the smaller format in correct aspect. If I was in the small format, it went to full screen in correct aspect. The playback seemed jerky at times but it was hard to tell because of the way the demo video was shot and edited. DESIGN SUGGESTION The audio volume control confused me at first. It was at full volume so when I hovered over it the bar appeared but did not appear to have a way to adjust it. I suggest you add some indicator that grabbing the tip of the bar will let the user drag it to the left. At minimum volume this is not an issue as a light circle appears. Overall, very nice result. Peace, Rob:-]

Rob Shaver    September 08, 2010 02:25 PM

Some more player feedback.

This is quite a nice looking player and performed well, for the most part. My configuration: Windows XP Chrome 5.0 Connect speed from your speed test 17,533 kbps I had the same aspect ratio issues reported above. More specifically, each time I switched resolutions or clicked in the play bar to change the play location, the next image shows was collapsed horizontally. Clicking on the "full screen" button corrected the problem. If I was in full screen mode then it returned to the smaller format in correct aspect. If I was in the small format, it went to full screen in correct aspect. The playback seemed jerky at times but it was hard to tell because of the way the demo video was shot and edited. DESIGN SUGGESTION The audio volume control confused me at first. It was at full volume so when I hovered over it the bar appeared but did not appear to have a way to adjust it. I suggest you add some indicator that grabbing the tip of the bar will let the user drag it to the left. At minimum volume this is not an issue as a light circle appears. Overall, very nice result. Peace, Rob:-]

Shiv Kumar    September 08, 2010 02:49 PM

Rob, Thanks for the detailed feedback. Please use Chrome 6 for these tests. It's quite likely that the earlier version of Chrome has some issues. We'll look into making the volume control more intuitive. Thanks for this feedback.

Chuck Spaulding    September 08, 2010 02:57 PM

I was browsing through some of the videos and the HTML5 player is really hanging up. This is the last video I tried with HTML5 that wouldn't play at all: http://exposureroom.com/members/CarlosLascano/66e242eef4f148478bc70aec500d29dc/ In fact I was trying to write this reply and had to kill the window the video was in to get any other Safari window to work. For Macs and Safari, at least on mine, there seem to be some real issues with HTML5.

Gokhan AYKAN    September 08, 2010 03:07 PM

Chrome Windows 7

Tested on chrome on Mac Pro 2.66 with windows 7. Bandwidth test shows 2800 Mbit. 360 P is ok. 480 with some buffering. Important thing is : When size changed video width is squezzed in the player window and after some more size change it comes back at full width. When Full screen pressed, full browser screen filled but control bar stayed in old original form (in the middle of video).

Shiv Kumar    September 08, 2010 03:14 PM

Chuck, Ok, not all videos will play using the Html 5 player since in order for a video to play it has to be H.264 encoded. That particular video's Md and HD versions are not H.264 encoded. The Low version is. FYI: We are in the process of re-encoded all videos to H.264. At least those we have the original video for. This is a long process and has been going on for 3 months already and will probably take another 2-3 months. I'd love to work with you on the Html 5 aspect if you're game. Please do let me know.

Shiv Kumar    September 08, 2010 03:17 PM

Gokhan, When using Chrome, please be sure to use the latest (beta) version. I believe the squished effect is due to using Chome 5. As regards, the controls bar, that is as designed. We don't want the control bar to expand across the full width of the window.

Cliff Etzel    September 08, 2010 03:27 PM

Do you have an ETA for roll out and will it be available to existing uploads? I'd like to move away from Flash based players as quickly as possible

Chuck Spaulding    September 08, 2010 03:28 PM

Sure, I'b be glad to help anyway I can. Let me know what you need. All four of the movies I have uploaded are H264. Interestingly I had to change then from the .m4v extension to .mov so that they would upload. You can email me directly if you like.

Lee Love    September 08, 2010 03:32 PM

Works GREAT om the iPad !

The demo plays and looks fantastic on the iPad. Thanks for all of the hard work and just another reason why Exposure Room is the best video site on the web.

Shiv Kumar    September 08, 2010 03:39 PM

Cliff, You have the option to use the Html 5 player righht now. Read the last paragraph of this post. As for the ETA for a complete roll out, we expect in the next month or so. The complete rollout includes things like embedding, and respecting video dimensions etc. We'll still support Flash player since Firefox users won't have an option to use the Html 5 player, since we don't see encoding videos to webM (in addition to H.264 as an option at this time. I would think MAC/Safari users would switch to using the Html 5 player since the performance is far batter than Flash player on a MAC. Others, (depending on browser preference) will probably use a mix of Flash player and Html 5 video. Chuck, H.264 is a codec, while m4V is a container. We support the mp4 container. I guess you were blocked at the time of browsing to a file during upload? If so I think it's just a matter of enabling the m4V file extension since I know we support the m4V container as well. I'll email you directly on the Html 5 testing aspect...

Vu Nguyen    September 08, 2010 03:41 PM

@Shiv this is the video I was watching on Chrome http://exposureroom.com/members/CraigMcCourry/44eace1d760b43a293d257d16b33a55e/

Cliff Etzel    September 08, 2010 03:42 PM

Sorry Shiv - I wasn't specific enough in my response - What I meant was can the html5 player be embedded into a web page?

Shiv Kumar    September 08, 2010 04:00 PM

@Vu, What version of Chrome are you using? I just tried it using Chrome 6 and don't see the issue you're seeing. FYI, we expect people to use the Latest/beta versions of major browsers, including IE 9 platform preview (beta will be released next week). @Cliff, as regards embedding. I think you need to consider that only the latest versions of browsers support Html 5 video and that may not be the best thing for your viewers. When we do complete our Html 5 video implementation it will include embedding videos as well. The way that will work is that we'll automatically, switch between Flash and Html 5 depending on the viewer's browser. As regards mobile devices, we'll do what we do today (if you've embedded the video using the JavaScript embed tags or Word Press plug-in). So far no mobile device truly supports Html 5. They claim that they do, but in fact it’s kind of like pseudo support. Nonetheless, the new embed will support mobile devices as well.

Vu Nguyen    September 08, 2010 04:05 PM

@Shiv ... that does it... I thought I have the latest Chrome... turns out my Chrome was 5.0 and after upgraded to 6.0 the video works perfectly! Thanks!

joomlagraphic .com    September 08, 2010 04:14 PM

joomlagraphic.com

video doesn't play in firefox 3.6.8 because video won't play unable to test embed code, slide volume, and switch between video frame sizes. otherwise it's great to see the effort that exposureroom is putting out and helping everyone adopt new video standards without any effort on our end.

Chuck Spaulding    September 09, 2010 03:29 PM

I uploaded an H264 video recently and the HTML5 player works well with this video in Safari on my Mac Pro. I've tried it with different browsers and devices and have had very mixed results. I did however eventually get it to play on an iPad, which is nice. Not sure if your aware of this yet, I imagine you are, and also not sure how it might effect how video is played on Apple's mobile devices, if at all, but today Apple announced that Steve Jobs has now blessed Flash for Apple mobile devices. http://technolog.msnbc.msn.com/_news/2010/09/09/5076188-flash-apps-blessed-by-jobs-for-iphone-other-apple-mobile-devices Since HTML5 is not widely or universally accepted yet, maybe there's an interim step to develop a Flash player that will work on the iPad etc...

Shiv Kumar    September 09, 2010 04:05 PM

Chuck, Just to be clear, it doesn't matter what codec you used when you encoded and uploaded your video. We transcode all videos uploaded to XR (every website does in fact) and currently we encode all videos using the H.264 codec. And we of course produce multiple versions of your video as well. iPhone/iPad - We've supported iPhone (http://exposureroom.com/news/view.aspx/347/) and iPad (http://exposureroom.com/news/view.aspx/359/) for quite a few months now. The introduction of our Html 5 player has no impact on this support. Both the iPhone and iPad use the built-in Quicktime player in order to play videos and do not support Html 5 video. So bringing Flash to iOS potentially makes no difference. Besides, when it comes to performance, I'd bet that the native video players will perform much better than the Flash player (just like it is on the desktop). MAC/Safari - The Html 5 "player" is none other than Quick time on the MAC/Safari and therefore the performance of Html 5 video is far better on a MAC using Safari as the browser. Playing Html 5 video on a MAC using any other browser will not have the same results. Please take a look at this blog post that details our test results and lots of additional information http://exposureroom.com/members/skumar/blogs/post/1048/ If Flash player mobile performs as well as the native players then things might change a bit. You may want to take a look at this other article I wrote http://www.matlus.com/2010/08/flash-mobile-10-1-is-slow/ We have developed a Flash based player for mobile devices and we've tested it on Android devices and found that the native player is far better. I guess when we can we'll do the same for iPhone/iPad as well. So let's see how it goes.

Danny Alex    September 09, 2010 07:46 PM

just work in Chrome

just in Chrome for me, that's a question of browser

Roy Feldman    September 10, 2010 08:39 AM

Before you get too invested

Looks like Jobs is reversing: http://technolog.msnbc.msn.com/_news/2010/09/09/5076188-flash-apps-blessed-by-jobs-for-iphone-other-apple-mobile-devices

Steve K    January 29, 2011 03:42 PM

no go on Android

Am waiting 4 Android update ... Dang!

Steve Mullen    May 12, 2011 12:46 PM

Now that Roku has Private Channels that play HD from at least one other service -- how about creating such a channel so we can watch HD XR content on our big screens. (And, no we don't want to plug our computers into our HDTVs.)

Shiv Kumar    May 12, 2011 01:10 PM

Steve, Why don't you want to plug your computer into your HD TV? I have a dedicated computer (an HTPC) that is plugged in to my HD TV and as a result I can do whatever I want using my HD TV as a monitor. I'm not limited to what Roku or Boxee or any other software limits me to. Plus I can use the browser of my choice including all of my bookmarks etc. There is absolutely nothing to beat a full blown computer as a part of your media center.

Vittorio Correa    July 15, 2011 05:43 PM

Ibarra-Ecuador

Saludos Desde Ibarra-Ecuador, les envio un cordial y afectuoso saludo, en espera que su llegada haya sido sin novedad y bendecida por nuestro Dios. A través del mismo, aprovecho para solicitarles el apoyo y ayuda necesaria para el Ministerio Carcelario que estoy llevando a efecto en la mencinada ciudad. Está ayuda o apoyo consiste en todos los materiales necesarios para poder instruirlos correctamente en la dosctrina de nuestra iglesia. Seguro estuve, estoy y estaré con la doctrina que la tengo, y en espera de que mi vida sea santificada cada día por la gracia divina. Gracias por el regalo maravilloso de tener el material de la película El Campeón, esta la veremos mañana Sábado en la carcel, con los miembros de iglesia y con todos aquellos que deseen verla. Feliz sábado Carlos

Cliff Etzel    November 09, 2011 01:48 PM

Adobe Ditching Flash for Mobile devices

Will you be allowing to embed html5 video players on websites? Given Adobe's announcement today that they are ceasing development of Flash for mobile devices and focusing on html5 calls into question the viability of Exposureroom allowing only flash based video players to be embedded on websites. Will there be an embedded html5 player soon? Cliff Etzel

Shiv Kumar    November 09, 2011 02:24 PM

Cliff, Besides Adobe, Microsoft stated that they will not support plug-ins in their new Windows 8 (Meto Style) apps (IE 10) as well. So yes, eventually, we'll have an embedable Html 5 player. As it stands today, you can use our JavaScript embed tags in order to support mobile devices automatically. That is, we'll use the nativate video player of the device if someone visits your website using a mobile device. So there is no real rush to support embeding our Html 5 player. FYI - The player is already embedable, since it is built using Html 5. We just need to provide the "tags" and verious options. Remember that H.264 is not supported (and probably never will be) by all browsers (Firefox and Opera). So there are a few other things that need to be sorted out industry wide before we can blindly plunge into Html 5.

Cliff Etzel    November 09, 2011 03:03 PM

The very fact that neither of those browsers supports h264 is an epic fail IMO. No wonder Google Chrome (my preferred browser) has gained so much traction. Opera is a non-player IMO and since IE does support playing back h264, I'm inclined to think that these 2 browsers, along with Safari, are going to be the top three browsers within a short period of time.



Leave A Comment

Data Entry Error
First Name:  Last Name: 
Title:
Comment: Required Information
  Required InformationIndicates Required Information

News

Privacy Policy | Terms Of Service | Contact Us | Support | Help/FAQ | News