Autoplaying video backgrounds

[rsdotscot]

Hi folks,

On the off-chance there's someone in the know, will the new Safari coming with High Sierra kill silent background videos? I'm using one with a few of my clients and I'm concerned that I'm going to have to switch them to static image carousels.

For anyone concerned about battery life and data caps, I only display the background videos on Macs and other desktops machines. Nobody likes a dead phone/tablet and getting a huge phone bill.


Cheers,
Rab

 

[960design]

Hi folks,

On the off-chance there's someone in the know, will the new Safari coming with High Sierra kill silent background videos? I'm using one with a few of my clients and I'm concerned that I'm going to have to switch them to static image carousels.

For anyone concerned about battery life and data caps, I only display the background videos on Macs and other desktops machines. Nobody likes a dead phone/tablet and getting a huge phone bill.


Cheers,
Rab

I have not checked that, but will test it with my High Sierra test machine on Monday morning.

 

[rsdotscot]

I have not checked that, but will test it with my High Sierra test machine on Monday morning.

Excellent. I'll look forward to seeing your results

 

[jtara]

Handwriting. Wall.

I can't image it would make a difference if it has sound or not. An annoyance is an annoyance is an annoyance.

The latest one I hate are the picket-fence ads. Bloomberg is using the in their iOS news app. They are EXTREMELY annoying, and make it almost impossible to read the article.

For those who haven't seen these, you will scroll down a bit, and there is a horizontal "slot" with a partial view of an ad, sometimes animated, sometimes not, that changes perspective as you scroll. You read a paragraph, and there's another *&^%$ annoying "slot". The overall appearance is as if you are looking through some narrow windows with the ad in the background.

 

[rsdotscot]

Handwriting. Wall.

I can't image it would make a difference if it has sound or not. An annoyance is an annoyance is an annoyance.

Um, ok. I take it you find carousels just as annoying? That's effectively all it is in this case.

I agree that pages which autoplay video with audio which is either difficult to find or designed to be difficult to stop playing is a nightmare, but those aren't what I'm asking about here and it's not a question about anyone's personal preferences.

 

[960design]

Excellent. I'll look forward to seeing your results

Setup

• iMac 27" 5k ( late 2015 )
• MacOS Version 10.13 Beta ( 17A264c )
• Safari Version 11.0 ( 13604.1.21.7 )

Background video autoplayed with no issues. Used a tag similar to:

<video width="1280" height="720" autoplay>
  <source src="video/location/on/server/videoname.mp4" type="video/mp4">
  "Please update your internet browser."
</video>

 

[rsdotscot]

Setup

• iMac 27" 5k ( late 2015 )
• MacOS Version 10.13 Beta ( 17A264c )
• Safari Version 11.0 ( 13604.1.21.7 )

Background video autoplayed with no issues. Used a tag similar to:

<video width="1280" height="720" autoplay>
  <source src="video/location/on/server/videoname.mp4" type="video/mp4">
  "Please update your internet browser."
</video>

That's excellent

Could you try it with this?

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<div class="container">
    <div id="ytiframe"></div>
</div>
<script>
    jQuery( '#ytiframe' ).hide();
    var tag = document.createElement( 'script' );
    tag.src = 'https://www.youtube.com/iframe_api';
    var firstScriptTag = document.getElementsByTagName( 'script' )[0];
    firstScriptTag.parentNode.insertBefore( tag, firstScriptTag );
    function onYouTubeIframeAPIReady() {
        var player;player = new YT.Player( 'ytiframe', {
            videoId: 'ff3Etpube2E',
            width: '800',
            height: '450',
            playerVars: {
                autohide: 0,
                autoplay: 1,
                cc_load_policy: 0,
                controls: 0,
                disablekb: 1,
                enablejsapi: 1,
                fs: 0,
                iv_load_policy: 3,
                modestbranding: 1,
                playsinline: 1,
                rel: 0,
                showinfo: 0
            },
            events: {
                onReady: function( e ) {
                    e.target.mute();
                    e.target.setLoop( 1 );
                    e.target.setPlaybackQuality( 'hd1080' );
                },
                onStateChange: function( e ) {
                    if( e.data === YT.PlayerState.PLAYING ) { jQuery( '#ytiframe' ).show(); }
                    else if( e.data === YT.PlayerState.ENDED ) { e.target.playVideo(); }
                }
            }
        });
    }
</script>

 

[jtara]

Um, ok. I take it you find carousels just as annoying? That's effectively all it is in this case.

I agree that pages which autoplay video with audio which is either difficult to find or designed to be difficult to stop playing is a nightmare, but those aren't what I'm asking about here and it's not a question about anyone's personal preferences.

Yes, I find carousels equally annoying.

And what is SAD about them is that sometimes I actually see something on a carousel that I am interested in, and there is a button to get more information, but the carousel has moved-on by the time I go to click on it. And, so, they are often self-defeating.

What is relevant, though, is not my personal preference, but the trend. This may work now, but it is quite likely it will not work in the future.

Browsers increasing will be both preventing auto-play videos, as well as limiting looping. If they had a checkbox to prevent carousels, I would check the box. Unfortunately, that's not very technically feasible, as the browser would have to analyze the Javascript on the page and determine that it implements a carousel, and know how to disable it.

Carousels aren't an HTML feature. But video (at least in modern implementations) is, and you can expect greater user control and more-restrictive defaults.

 

[rsdotscot]

And what is SAD about them is that sometimes I actually see something on a carousel that I am interested in, and there is a button to get more information, but the carousel has moved-on by the time I go to click on it. And, so, they are often self-defeating.

That's just poor implementation.

What is relevant, though, is not my personal preference, but the trend. This may work now, but it is quite likely it will not work in the future.

Based on what? It's not as if they're using proprietary plugins.

Browsers increasing will be both preventing auto-play videos, as well as limiting looping.

Limiting looping, maybe, but preventing auto-play videos isn't going to happen on any large scale so long as Google don't want to cripple YouTube. Last I checked, Google's browser was very popular...

 

[olup]

Youtube has that autoplay toggle on/off switch in the sidebar, but the question is, how much the web experience will suffer, when more and more people turn off js to prevent having ads/autoplaying stuff kill their battery/mobile bill.

 

[rsdotscot]

Youtube has that autoplay toggle on/off switch in the sidebar, but the question is, how much the web experience will suffer, when more and more people turn off js to prevent having ads/autoplaying stuff kill their battery/mobile bill.

I try to be mindful when I produce these things, making sure I present users on phones and tablets with static image carousels instead of video backgrounds. There isn't really any way for me to determine if a laptop is on battery power or plugged in though (as far as I'm aware, although I still massively doubt that web browsers have access to that kind of data).

 

[olup]

there used to be a battery api, but that's unfortunately obsolete. Maybe something like it will come along again.

 

[rsdotscot]

Turns out the videos won't autoplay in Safari 11, even with videos with no audio track (YouTube tries to play audio anyway).

Anyone have any ideas? Ideally I'd like to serve the video from YouTube, but if need be I could serve an MP4 directly from my server.

 

[cruisin]

The default setting is to stop all video with sound. So if YouTube includes a blank audio track as part of the upload process, it will count as a video with sound. If your video also has a blank audio track, then you will have the same issue. How confident are you that you do not have an audio track?

What happens if you host it yourself, or find a different service (gifycat, imager, etc)?

The WebKit page should give some hints: https://webkit.org/blog/6784/new-video-policies-for-ios/

Something interesting is the <video muted> tag, which should allow autoplay without a user gesture.

 

[rsdotscot]

The default setting is to stop all video with sound. So if YouTube includes a blank audio track as part of the upload process, it will count as a video with sound. If your video also has a blank audio track, then you will have the same issue. How confident are you that you do not have an audio track?

What happens if you host it yourself, or find a different service (gifycat, imager, etc)?

The WebKit page should give some hints: https://webkit.org/blog/6784/new-video-policies-for-ios/

Something interesting is the <video muted> tag, which should allow autoplay without a user gesture.

Hosting it myself works fine, so I'm in the process of procuring a server with unmetered bandwidth.

 

[jtara]

Hosting it myself works fine, so I'm in the process of procuring a server with unmetered bandwidth.

Ha! Thank you!

We had some MP4 video clips in tutorial material presented within a hybrid mobile app. One of the videos would not play automatically. Our UX person mentioned that that one video had a silent soundtrack. I didn't put two and two together right away.

We wound up converting the videos to animated GIF. That solved the OTHER problem: on iPhone, all of the videos came up with a play button and then would play full-screen. (On iPad, the videos all auto-played.)

But they aren't the kind of videos one would watch full-screen, and you need to read the accompanying text while watching the video. (The videos are short - a few seconds - and illustrate concepts of spatial visualization.)