Order Now AdSolution Sign Up | Login » Bits on the Run Sign Up | Login »

Forums

/

Responsive Video, Internet Explorer, 100% width/height

9 replies [Last post]
Reply

OK, for some time I have been experimenting with responsive video using JWPlayer in a Wordpress setting (using a plugin to allow direct coding of HTML) and I am very close to getting what I want. I have experimented with Fitvids (http://fitvidsjs.com/) but I prefer a non-iframe manual implementation of the same kind of approach outlined in several places on the web. Specifically, I have used & modified code from http://www.hexagonwebworks.com/2011/making-videos-responsive/ & http://webdesignerwall.com/tutorials/css-elastic-videos (based on code from http://www.tjkdesign.com/articles/how-to-resize-videos-on-the-fly.asp). Thanks to all of those.

Basically, these define a flexible "wrapper" which contains a max width/height player. This seems to work with most of the important browsers, with the exception of Internet Explorer 8 - I haven't looked at it for IE9 but assume that if I get it right for IE8, the rest should fall in to place !

If I specify width: 100%, height:100%, ... in IE I just get a gap where the player should be - not the text between the DIVs for the media player, just a big hole, so it's obviously trying to put something out there.

The browser has the latest Flash upgrades and is running on Windows 7 pro. My code tries to get the browser to use HTML5 & provides mp4 & webm files, but for IE8, it should fall back to Flash. If I code a specific width, the gap is filled, but that ruins the responsiveness :-(

Here's a demo of 100%: http://tinyurl.com/78qjxxo
This is of a hard-coded 480x270: http://tinyurl.com/8a5n88m

So my questions are these:
1. Am I missing something in terms of telling Flash to use 100% of what contains it if it is invoked ?
2. If not, why does width: 100%, height:100% throw things ? Is there another way of doing this ?

I am probably missing something simple, so what is it ?

I don't want to get in to SWObject, etc. But although IE is less important than it was, it's still very ! So if anybody has any suggestions, I'd be happy to hear them.

Thanks,

R.

Reply

Just checked in 5.9: the same.

@Ethan & all you LT guys ... any thoughts on this please ?

Thanks,

R.

Reply

Hi Roger,

Did you check http://www.longtailvideo.com/support/forums/jw-player/using-playlists/22892/auto-rescale-of-playlist...

IE8 works for me in the given setup. Probably the order of the jwplayer-"modes" that is causing this?

Reply

Hi Ben - yeah, I saw that and it looks like a nice piece of code, but I haven't had the chance to try it yet. I'll update this when I do.

I want HTML5 to be the first option. Does hyours go to Flash first (as per your Mode statements), even though you specify a VIDEO tag ?

Anyway, more when I get a chance to try your approach.

Reply
Reply

@Roger
Yes, for everything except iOS devices...
Normally i'd also go HTML5 first, but a specific Android tablet (namely Toshiba AT 100, which a client wants to use at a show) is horribly failing at HTML5 Video playback so i decided to switch... :-(

Reply

What OS does this tablet run? How is it failing?

Reply

Sorry for late,

It's an "optimized" Android 3.1 Honeycomb.
3 of 10 times it crashes, so at least the browser needs to be restarted. Sometimes even the whole tablet.
Regardless if using mediaelements.js, videojs or jwplayer...
Just isn't reliable..

Reply

Hi Ben - "optimized" ? Hmmm .... by whom and how ?

And it's definitely crashing on the HTML5 replay, right, not Flash ?

R.

Reply

Yeah. that does that mean?

And this is a general Android 3.1 issue it seems , not specific to the JW Player.

Post new comment

  • Allowed HTML tags: <code> <blockquote> <em> <strong> <strike> <ul> <li> <ol>
  • You may post code using <code>...</code> .
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options