HTML5 Video Bumpers

22 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Matthew Somerville

    Hooray, a new year! Nice article, good to see non-frameworked JavaScript :-)

    One regex gotcha:

    * “.” means any character except newline, and w is alphanumeric+underscore – so if your source src attribute was “my-cat.mp4”, then the first line that sets the src attribute would end up putting in “bumper-in.cat”. If you don’t know what your filenames will be apart from the extension, plus you only care about the extension, probably better just to use something like /.(w+)$/

    And a couple of regex typos:

    * The “w” character classes all appear to be missing their “”, unless you only want to match wwwww.www ;)
    * The last regex has “([w]+)” which also should presumably be w+

    Hope that’s helpful.

  2. Jason

    Thanks, Drew. This seems like a great solution. Unfortunately, none of the examples work here on my iPhone 4 running iOS 5.

    First few examples don’t play, and the bumper examples play the first bumper, then reload the first bumper and pause. If you press play, it plays a second of the bumper and pauses, an repeats that infinitely. Never loads the main video.

    Just an FYI. :)

  3. Elliot Lewis

    Great start to 24 Ways 2012.

    What’s the performance like on loading 2 videos? I know Firefox is quite keen when loading assets. I’m assuming the main video loads in the background as its requested on page load. Any issues with the browser downloading the main video and the front bumper at the same time?

    Worked great here but the videos are short.

  4. Kieran Masterton

    This is great thanks Drew; really interesting approach. I’d worked with bumpers for clients using Brightcove and then tried to replicate similar functionality for another client using the onended event to pass in a second video to the player. I hadn’t however taken the next step as you have here, so thanks for sharing :)

    Cheers,

    K

  5. Seth Hall

    This is awesome!! Thanks Drew. Good example of progressive enhancement.

    I am just beginning to dive deeper into JS & jQuery, but I am wondering if we could add fade ins or fade outs or even cross fades. That would improve the transition between the bumper and main video, allowing the bumper to seem baked in.

    Also, I use Vimeo for all my video embeds. Can you place an href or external url inside a <source> tag?

  6. Theo

    Unlike your cat in the video i am very impressed by this tutorial. Works fine on desktop! However as stated above have some issues on iPhone4 IOS5: doesn’t work using opera mini, on chrome for mobile and safari i get only the first bumper. Will try on IOS6 too. Thank you very much for the great opener.

  7. Raphael Essoo-Snowdon

    Awesome piece, but I can’t help but feel the transition between bumper and video is quite a jarring effect. Is there any way to get around this so the bumper almost melts into the video seamlessly?

  8. Raphael Essoo-Snowdon

    Awesome piece, but I can’t help but feel the transition between bumper and video is quite a jarring effect. Is there any way to get around this so the bumper almost melts into the video seamlessly?

  9. maxw3st

    I get a 403 error: “…it appears the server is denying access to the file” for examples 2 thru 4.

    The code and idea however; great stuff. I too like the use of actual JavaScript versus frameworks.

  10. Destry Wion

    Nice one.

    I remember trying different things like this ten years ago using SMIL, sometimes running two or more files concurrently (separate audio/video files), adding interactivity (e.g., nav inside the presentation), etc. Maybe with Flash (mostly) out of the picture now SMIL could find some footing again. If nothing else, it was fun to play with. (Nostalgia.)

  11. Henk

    Again a very good start this year. Very helpfull.

    With this simple technique we can use the same product movie on each different webshop for the same product, with only a different branding bumper.

    When example 2, 3 and 4 I got a 403 error (using Chrome, IE was no problem). Example 1 was no problem. Is this only with my particular computer or can’t it be used with Chrome? Because a lot of people use Chrome these days.

  12. Jemaleddin

    Lovely start to my favorite December tradition! Following along in Chrome, I found that what was missing was a way to replay the video. One more round of load with the first bumper?

  13. Avangelist

    Very impressive thought process with a fantastic suggestion for utopia.
    How are you going to sell that to your client? You found a way for them to be able to maintain their branding on their videos forever…. As long as the viewing is part of the percentile that supports technologies your client doesn’t understand.

    Sounds like ao tough sell to me.

  14. Davit

    But why wouldn’t you simply manipulate three separate video elements? This way you will be able to fade the bumpers into the main video for example or use some other effect. But in any case, the main point is, that this will open opportunity for more flexible and smooth transitions. With less javascript.

Impress us

Be friendly / use Textile