17
Replies
Autoplay is annoying to most people. Autoplay is not supported by all browsers. And for all the rest, we have browser add-ons to block autoplay. Best practice is to always give users controls to invoke the media player if they want to. See screenshot.
The following code works in all browsers that I've tested.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
.video-wrapper { position: relative; }
.video-wrapper > video {
width: 100%;
vertical-align: middle;
}
.video-wrapper > video.has-media-controls-hidden::-webkit-media-controls {
display: none;
}
.video-overlay-play-button {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 10px calc(50% - 50px);
position: absolute;
top: 0;
left: 0;
display: block;
opacity: 0.95;
cursor: pointer;
background-image: linear-gradient(transparent, #000);
transition: opacity 150ms;
}
.video-overlay-play-button:hover { opacity: 1; }
.video-overlay-play-button.is-hidden { display: none; }
</style>
</head>
<body>
<div class="video-wrapper">
<!--CHANGE MP4 AND POSTER IMAGE TO YOUR OWN-->
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3174/poster.png" controls>
<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
</div>
<script>
var videoPlayButton,
videoWrapper = document.getElementsByClassName('video-wrapper')[0],
video = document.getElementsByTagName('video')[0],
videoMethods = {
renderVideoPlayButton: function() {
if (videoWrapper.contains(video)) {
this.formatVideoPlayButton()
video.classList.add('has-media-controls-hidden')
videoPlayButton = document.getElementsByClassName('video-overlay-play-button')[0]
videoPlayButton.addEventListener('click', this.hideVideoPlayButton)
}
},
formatVideoPlayButton: function() {
videoWrapper.insertAdjacentHTML('beforeend', '\
<svg class="video-overlay-play-button" viewBox="0 0 200 200" alt="Play video">\
<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>\
<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>\
</svg>\
')
},
hideVideoPlayButton: function() {
video.play()
videoPlayButton.classList.add('is-hidden')
video.classList.remove('has-media-controls-hidden')
video.setAttribute('controls', 'controls')
}
}
videoMethods.renderVideoPlayButton()
</script>
</body>
</html>
I tried this. I copy and pasted your code into my HTML and changed the source.
It did not play on my ipad and iphone 7plus.
Weird, I found an old iPhone 6 this monring , tested that and it also autplayed the video ... Its typical that I don't have an iPhone 7 to hand 
Which iPad did you test on?
...Did you still get the player with controls even if the video did not autoplay?
The 'mute' attribute is there to mitigate the number of people blocking autoplay as the default policy is normally to allow 'autoplay muted'.
As for add ons and people going out of their way to block autoplay completely, I'd have thought you could add the 'controls' attribute to provide a fallback/play button.
<video style="min-width:100%; min-height:100%;" playsinline autoplay loop muted controls>
<source type="video/mp4" src="/video/test.mp4>
<source type="video/webm" src="video/test.webm">
</video>
Looking at those examples of blockers Nancy has taken the time to dig out, I tested the Chrome and Firefox add-ons and the 'controls' attribute provides an adequate fallback, the plugins don't completely block the video, they just prevented autoplay which just required a simple click of the play button in that instance. The Chrome extension says 14, 378 users and the FF one says 31,700 in the grand scheme of things that seems a very small number to me.
That Firefox article is dated 2015 so I don't know how relveant it is, this article dated a few months ago says the default FF policy is and will remain (for now anyway) to allow 'autoplay muted': https://techcrunch.com/2019/02/04/firefox-will-soon-mute-all-autoplaying-videos/ and my default Firefox set up confimrd that.
I think Safari 11 supports autoplay mute by default, I'm not sure about Safari 12 but I'll test tomorrow for my on sanity as I have a bee in my bonett about it now All the Apple devices I tested earlier (ncluded an up to date iPhone 8) all allowed the video to autoplay with the mute attribute.
Google Chrome's default policy is still to allow autoplay with the mute attribute as far as I know: Autoplay Policy Changes | Web | Google Developers
AdChoices