mp4

Hi I have a video currently HD, mp4 that would like to add to my website using FW6 and Backdraft 1.5… needs to be responsive - whats the best way to get this up and running on the website? And be IE friendly?

Cheers!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

And be IE friendly?

I think this may well depend on how far back you want to support IE?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8 and above?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If you can use jQuery on your page - ie no clashes with Scripty/Protaculous/native FW actions

http://fitvidsjs.com/

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks!! What about the HTML5 video built into Frewway? Any good?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I just uploaded it here - works ok on a Mac not iOS just sound on iPhones?? My stupid brand new PC won’t boot up at mo

http://easthalldesign.com/responsivedesign.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It’s very easy to make HTML5 videos flexible width.

  1. Add the video to the page as an inline element.
  2. Deactivate the width field in the inspector for that element, and instead use a max-width.
  3. Right-click on the element, choose Extended, go to the <video> tab, and add a new entry with width as the name and 100% as the value.

Tada!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks! Did that but it won’t play on iOS


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Would it actually not play at all? Mobile Safari does have the habit of hijacking stuff like videos and applying their own chrome and restrictions. BTW, really well done video!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Make sure that the video is encoded in H.264 and AAC. That’s the magic combination. Also make sure that the video is not much higher than 1200 - 1600 bits per second. All of these settings are exposed in most compression software. I prefer QuickTime 7 Pro MoviePlayer for this purpose.

Walter

On Apr 29, 2014, at 6:06 PM, Justin Easthall wrote:

Thanks! Did that but it won’t play on iOS


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok I’ll check in iOS it just plays sound


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

oo kinda working not proper and not on iPads very well…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What software are you using to compress it, and what settings in that software? There is only one right way to do this, and a zillion ways to do it wrong, by varying degrees.

Walter

On Apr 29, 2014, at 8:10 PM, Justin Easthall wrote:

oo kinda working not proper and not on iPads very well…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I used quicktime player to export as an iOS friendly version - it now plays fine on most but does not ‘respond’ on iPad… ironic


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

its kinda behaving like it has a fixed width on iPads…


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Give this CSS a shot:

video#thisonefirst {
    height: 0;
    padding-top: 47%;
}

That will force the video to scale proportionately and will fix the funky width on the iPad.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks - where am I putting this?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Up to you, stick it in an external stylesheet if you like, wrap it in <style> and </style> and drop it before the page </head>, or even stick it in Backdraft’s CSS file. You shouldn’t need to wrap it in a breakpoint - this should apply to all sizes of devices.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That made it disappear??


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Huh, apparently iOS doesn’t even download the video headers (which bear the dimension information) until you press play, so it doesn’t know the video size - which is why it is disappearing. You have to declare the height of the element in pixels. The best option would probably be to use some javascript to do the math for you and set the height of the <video> element to the right size.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options