HTML5 Video iOS play button disappearing

Question

I have a simple HTML5 dash player instance created in jsfiddle..

  <video class="dashjs-player" poster="https://dummyimage.com/600x400/000/fff" autoplay playsinline>
                <source src="https://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd" type="application/dash+xml"/>
                <source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
            </video>

When I try and play it on an iPad I get the poster image loading correctly and then the play button flashes on the screen for a second and then disappears.

Anybody any ideas why this is happening?

Please check this link: github.com/CSS-Tricks/AnythingSlider/issues/369 — Sivajee Battina
Good reading but not sure it is relevant for my situation. I am not using a slider at all — fightstarr20
I understood that I found similarity between your issue and slider issue. Can you try with their solution once? — Sivajee Battina
if you put the video inside an iframe ? did you try this workaround? — Sivajee Battina

Mick Mick · Accepted Answer · 2017-11-16T16:33:41

Upadte:

The JSFiddle you supplied appears like it will not play on Safari on a MAC which sounds like a similar problem to the one you are observing.

However,if you right click on the poster and select show controls it shows the video and it looks like it has been playing.

Similarly, if you add 'controls' attribute to the video tag it will will then autoplay correctly the video.

Note, this may be a JSFiddle limitation rather than a Safari or iOS limitation, but either way it is a reproducible effect (Safari Version 11.0.1 (12604.3.5.1.1)).

  <video class="dashjs-player" poster="https://dummyimage.com/600x400/000/fff" autoplay playsinline controls>
                <source src="https://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd" type="application/dash+xml"/>
                <source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
            </video>

Its also worth noting that webkit.org recommendation is to not assume any media will autoplay, as browsers often allow users set preferences in this area. Their recommendation is to check and if necessary add a button or some control to allow the user play the video:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

Original answer

If you look at your browser console and debugger, check if it is using the DASH stream or the HLS stream. iOS devices prefer HLS but I'm not sure if they would override your listed order.

If it is using the HLS stream then this would likely explain your issue - the reference dash.js player will not play the m3u8 file you linked either on Safari on a Mac, but it will play the mpd file you linked to:

http://dashif.org/reference/players/javascript/1.3.0/samples/dash-if-reference-player/index.html

The HLS file itself seems fine, it will play in the BitMovin test player for example without issue on the same system, Safari on MAC:

https://bitmovin.com/hls-mpeg-dash-test-player/

HTML5 Video iOS play button disappearing

1 Answers