[ANN] VideoBackground Action

Freeway
1

New in the Forge: http://actionsforge.com/actions/view/304-videobackground

Make a full-page video background for your Freeway site. The Action will convert your page to HTML5 if it isn’t already, and will add a

You will need to provide four files to use this Action: a poster image in any Freeway-friendly graphic format, an H.264 MPEG file, an Ogg video file, and a WebM file. This covers Safari/WebKit, Firefox, and Chrome, respectively. The video will never auto-play in iPhone or iPod touch, but it will on iPod. I have no idea what the coverage is on Android, test results would be most welcome.

Miro Encoder is a great free (but no controls) option for creating your Ogg and WebM versions.

Walter

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

2

Wow Walter, this is a cool one :slight_smile:

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

3

Thanks! Joe reminded me this morning that it’s WebM or Ogg, not both, so I’ve just updated the Action to relax that requirement a little. Also added in some CSS that was missing for the IE8 (still background) fallback. Any brave testers would be welcome on that front.

Walter

On Sep 3, 2013, at 5:23 AM, Richard van Heukelum wrote:

Wow Walter, this is a cool one :slight_smile:

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

4

Hi Walter,

Thanks a lot for this action, just what I needed! However, is there a way I can easily make a separate button with a sound enable/disable function? (Like on Spotify - Web Player: Music for everyone). The song is not really directly linked to the video, so it doesn’t have to be “connected to the video”. What I just want is a button where the song I picked can be played on, but not like via a Quicktime music player or Youtube, just a button customized by me and when you press on it the song starts playing.

Thank you and best regards,
Steijn

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

5

(Just a mp3 file that I can attach to a button and it plays when clicked on my customized button)

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

6

I would start here: http://actionsforge.com/actions/view/245-audiojs You should be able to style the player to appear any way you like, although it does have a default appearance that you may not want. Post an example somewhere, showing the default Audio.js player alongside a graphic that shows how you want your control to look. One of us should be able to point you in the right direction from there.

Walter

On Sep 3, 2013, at 10:13 AM, Steijn wrote:

Hi Walter,

Thanks a lot for this action, just what I needed! However, is there a way I can easily make a separate button with a sound enable/disable function? (Like on Spotify - Web Player: Music for everyone). The song is not really directly linked to the video, so it doesn’t have to be “connected to the video”. What I just want is a button where the song I picked can be played on, but not like via a Quicktime music player or Youtube, just a button customized by me and when you press on it the song starts playing.

Thank you and best regards,
Steijn

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

7

The problem with this idea is that not all browsers support MP3. Firefox, for one, doesn’t on patent-encumberment grounds. (Which is silly, and a separate issue.) So you need some kind of “wrapper” player to handle all the various environments where your video may appear. HTML5 includes the

Walter

On Sep 3, 2013, at 10:16 AM, Steijn wrote:

(Just a mp3 file that I can attach to a button and it plays when clicked on my customized button)

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

8

Thanks a lot Walter for your reply!

Now I also have an other thing.
The movie appears to be zoomed in to the left or something, it doesn’t show the full video. Do I need to add margin/padding to the page or to the graphic item where the action is placed on or something? Because it doesn’t make a difference if I move the graphic item.

Thanks a bunch,
Steijn

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

9

This will depend a lot on the aspect ratio of your browser window and the aspect ratio of the movie. The CSS tries to fill the screen with the video, showing no gaps, and it allows the video to overflow in all directions as it does so. Try resizing your window a little to see what I mean. It’s supposed to center, but I suppose it might not in some cases.

Walter

On Sep 3, 2013, at 12:36 PM, Steijn wrote:

Thanks a lot Walter for your reply!

Now I also have an other thing.
The movie appears to be zoomed in to the left or something, it doesn’t show the full video. Do I need to add margin/padding to the page or to the graphic item where the action is placed on or something? Because it doesn’t make a difference if I move the graphic item.

Thanks a bunch,
Steijn

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

10

On 3 Sep 2013, 1:26 pm, waltd wrote:

Thanks! Joe reminded me this morning that it’s WebM or Ogg, not both, so I’ve just updated the Action to relax that requirement a little. Also added in some CSS that was missing for the IE8 (still background) fallback. Any brave testers would be welcome on that front.

Walter

On Sep 3, 2013, at 5:23 AM, Richard van Heukelum wrote:

Wow Walter, this is a cool one :slight_smile:

Hi Walter. I’m still playing around with FW6 HTML 5. Take a look at this page I’m testing with. I have these animated or quicktime video snippets that I used for presentations where the background is transparent. Looks great in Safari and FF, but of course the background is no longer transparent in mobile Safari (iPad-iPhone). I wonder if this new action can produce similar effects with this existing video .mov file?

http://www.erickabad.com/news.html

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

11

Well, if you’re using this Action to add the video, first the video must be in MPEG4 H.264 format, not .mov. Second, you won’t see anything behind the videos, because they are made to be the background, and anything behind that is removed (so if you set another background image or color to the page, it is expressly removed so the video can lay behind it at z-index -1). Again, that’s only if you are using my new Action to add the video as a page background.

If you are using Freeway to add the video, then you can explicitly add the transparent behavior if you use the Item / Extended interface on your video, and add the attribute pair:

wmode: transparent

to the video tag.

That may help.

Walter

On Sep 3, 2013, at 1:08 PM, RA wrote:

On 3 Sep 2013, 1:26 pm, waltd wrote:

Thanks! Joe reminded me this morning that it’s WebM or Ogg, not both, so I’ve just updated the Action to relax that requirement a little. Also added in some CSS that was missing for the IE8 (still background) fallback. Any brave testers would be welcome on that front.

Walter

On Sep 3, 2013, at 5:23 AM, Richard van Heukelum wrote:

Wow Walter, this is a cool one :slight_smile:

Hi Walter. I’m still playing around with FW6 HTML 5. Take a look at this page I’m testing with. I have these animated or quicktime video snippets that I used for presentations where the background is transparent. Looks great in Safari and FF, but of course the background is no longer transparent in mobile Safari (iPad-iPhone). I wonder if this new action can produce similar effects with this existing video .mov file?

http://www.erickabad.com/news.html

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

12

On 3 Sep 2013, 5:18 pm, waltd wrote:

Well, if you’re using this Action to add the video, first the video must be in MPEG4 H.264 format, not .mov. Second, you won’t see anything behind the videos, because they are made to be the background, and anything behind that is removed (so if you set another background image or color to the page, it is expressly removed so the video can lay behind it at z-index -1). Again, that’s only if you are using my new Action to add the video as a page background.

If you are using Freeway to add the video, then you can explicitly add the transparent behavior if you use the Item / Extended interface on your video, and add the attribute pair:

wmode: transparent

to the video tag.

That may help.

Walter

On Sep 3, 2013, at 1:08 PM, RA wrote:

On 3 Sep 2013, 1:26 pm, waltd wrote:

Thanks! Joe reminded me this morning that it’s WebM or Ogg, not both, so I’ve just updated the Action to relax that requirement a little. Also added in some CSS that was missing for the IE8 (still background) fallback. Any brave testers would be welcome on that front.

Walter

On Sep 3, 2013, at 5:23 AM, Richard van Heukelum wrote:

Wow Walter, this is a cool one :slight_smile:

Hi Walter. I’m still playing around with FW6 HTML 5. Take a look at this page I’m testing with. I have these animated or quicktime video snippets that I used for presentations where the background is transparent. Looks great in Safari and FF, but of course the background is no longer transparent in mobile Safari (iPad-iPhone). I wonder if this new action can produce similar effects with this existing video .mov file?

http://www.erickabad.com/news.html

Thanks for the great tips Walter. :slight_smile:

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

13

Hi Walter,

Can you please help me out a bit?

I am using your VideoBackground action for http://www.skyframes.nl/. It works fine for my laptop/mostly any other browser, but on a mobile phone (of course) it doesn’t play automatically. However, the video is now in front of the navigation bar, so anyone using a mobile phone visiting the website can’t click on any link because the video is in front of the navigation bar! I tried to send the video to back, bring the nav. bar forward, etc.

How can I fix this? And how can I arrange that mobile viewers, when they come to the home page, see a slideshow of pictures (just like on the other pages) except for the video or a full background image. Or at least how can I put the navigation bar and links in front of the video.

For the rest the action is great!

Thanks,
Steijn

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

14

Well, for one thing, you’re going to need to create an MP4 version of your video, and take all the spaces out of the filename. The movie isn’t playing well on Safari; if you’re looking at it on Firefox or Chrome, then I would imagine it would play better there, since WebM would be preferred and the MOV would be skipped. Also, your poster frame isn’t loading at all on Safari, possibly because the main movie is in MOV format, and those are opaque/don’t interact with the poster image the way an MPEG movie would.

On a mobile device, MOV is taken over by the QuickTime Player interface, which won’t manage the preview image/video alternates stack at all. That means that the video will launch above everything else. If you use an MP4 file (and double-check your poster image) then you shouldn’t have this problem at all.

I would seriously compress this video a whole lot more, maybe output it at a much smaller frame size, too. All that detail is making the performance quite awful, and I’m on a massive Mac Pro with an astoundingly fast video card.

Walter

On Sep 4, 2013, at 2:59 PM, Steijn wrote:

Hi Walter,

Can you please help me out a bit?

I am using your VideoBackground action for http://www.skyframes.nl/. It works fine for my laptop/mostly any other browser, but on a mobile phone (of course) it doesn’t play automatically. However, the video is now in front of the navigation bar, so anyone using a mobile phone visiting the website can’t click on any link because the video is in front of the navigation bar! I tried to send the video to back, bring the nav. bar forward, etc.

How can I fix this? And how can I arrange that mobile viewers, when they come to the home page, see a slideshow of pictures (just like on the other pages) except for the video or a full background image. Or at least how can I put the navigation bar and links in front of the video.

For the rest the action is great!

Thanks,
Steijn

freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk

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

15

Thanks Walter!

Alright, how do you recommend I compress it? And into what frame size/rate etc.?

Best regards,
Steijn

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

16

The best $30 you can spend is QuickTime 7 Pro from the Apple Store online. That unlocks the export functions in QuickTime Player, and gives you lots of great pro-level control if you don’t mind digging and fiddling. If you have a modern Mac, try buying Apple Compressor from the Mac App Store ($49, I think). There’s a compatibility checker built into the MAS so it won’t download if your Mac or video card aren’t up to scratch to use it.

For way too much money, there is Sorenson Squeeze, which is the gold standard of Web video compressors.

For no money you can use Handbrake, which puts a nice GUI on the venerable ffmpeg command-line tool. Handbrake suffers from too many knobs and buttons, and too many choices in my opinion.

Another no-money option is Miro Converter, which has no knobs and one button. If you like the output, then it’s great. But there’s no way to fiddle with settings at all. It may work really well for one video and utterly fail on another, and there’s not much you can do with that.

Whenever you are compressing anything (still or motion) you want to start with the sharpest, cleanest, nearest-to-first-generation source that you can get. Any time you compress something that is already compressed (particularly one that is heavily and lossily compressed), you start sharpening the algorithm noise, and ironically you will usually end up with a larger file than you started with.

For your page, I would try first using these settings: H.264, 1200 kbps, optimized for streaming, no audio, and don’t check “enable streaming”. (These settings are all from QuickTime Player 7’s export options dialog.) Maybe make it 320 x 240 or a little larger. You want to try for as small as possible without making it look blotchy on screen. It will definitely not look great or crisp, but it’s a background – you actively don’t want crisp backgrounds. If that looks just too horrible, tweak it upward a little bit. The numbers to fiddle with are the kbps (kilobits per second) and the overall dimensions. Aim for it to look a little bit crappy, in other words. That’s the sweet spot.

Walter

On Sep 4, 2013, at 5:02 PM, Steijn wrote:

Thanks Walter!

Alright, how do you recommend I compress it? And into what frame size/rate etc.?

Best regards,
Steijn

freewaytalk mailing list
email@hidden
Update your subscriptions at:
List Options | FreewayTalk

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