Skip to main content
M
mfatony
Participating Frequently
March 19, 2019
Question

HTML5 Video not playing on mobile devices

  • March 19, 2019
  • 5 replies
  • 43721 views

The below link has a video banner that works on a desktop but the video and poster does not display at all on mobile device.

If i type in the link to the video via safari on a mobile device it will play  http://starz1.pixerpro.com/videos/bannercrop.mp4

http://starz1.pixerpro.com/weddings.html

CODE

  <video width="100%" id="pixerpro_interview" poster="videos/banner.png" preload="auto" autoplay="autoplay" >

    <source id="mp4" src="videos/bannercrop.mp4" type="video/mp4">

    <source id="jpg">

  </video>

Dreamweaver CC2019

This topic has been closed for replies.

5 replies

P
Community Expert
Paul-MCommunity Expert
Community Expert
March 21, 2019

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

Paul-M - Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 21, 2019

I agree that Player Controls are an important fallback.  Otherwise, people have no idea a video is there.  All they see is a static image.

Nancy O'Shea— Product User & Community Expert
M
mfatonyAuthor
Participating Frequently
March 21, 2019

Thanks to everyone who has left feedback. I really appreciate the time it takes to read peoples posts in a forum and respond. It sounds like there isn't any way to have a video play automatically on a mobile device. So, I used a media query to have the video be swapped out to an image once it reaches a certain break point.

Tony

P
Community Expert
Paul-MCommunity Expert
Community Expert
March 21, 2019

It is possible to autoplay HTML5 Video on mobile devices, I just tested this code as a quick example:

<video style="min-width:100%; min-height:100%;" playsinline autoplay loop muted>

     <source type="video/mp4" src="/video/test.mp4>

     <source type="video/webm" src="video/test.webm">

</video>

Tested on a few devices  I had to hand: iPhone 5, iPhone 8, iPad Mini 3, Huawei P20 (Android), Firefox & Chrome on Windows 10. Video autoplays in all cases.....

Paul-M - Community Expert
M
mfatonyAuthor
Participating Frequently
March 22, 2019

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.

P
Community Expert
Paul-MCommunity Expert
Community Expert
March 19, 2019

If its a video you want to promote, why not set up a YouTube channel, upload your video to the channel and then embed in the website?

For promotion/exposure ths is your best route because (a) YouTube is massive and gets a huge amount of searches and its not just 'silly videos' people are searching for and (b) Google inserts relevant videos inline in its search results.

Paul-M - Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 19, 2019

My only reservation about embedded media from YouTube, Vimeo, etc...  is that some corporate networks block those sites.

Nancy O'Shea— Product User & Community Expert
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
March 19, 2019

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>
Nancy O'Shea— Product User & Community Expert
    M
    mfatonyAuthor
    Participating Frequently
    March 19, 2019

    Its an animated banner that plays for 10 seconds for a video company. There is type over it and no sound so it would not be anyoing.

    Anyway to have it play automatically?

    P
    Community Expert
    Paul-MCommunity Expert
    Community Expert
    March 21, 2019

    Its an animated banner that plays for 10 seconds for a video company. There is type over it and no sound so it would not be anyoing.

    Anyway to have it play automatically?

    If its a simple banner you're probably not choosing the best route, did you try this suggestion? :

    <video width="100%" id="pixerpro_interview" poster="videos/banner.png" preload="auto" autoplay muted>

    Paul-M - Community Expert
    P
    Community Expert
    Paul-MCommunity Expert
    Community Expert
    March 19, 2019

    I think you can do for iOS with 'autoplay muted' these days:

    <video width="100%" id="pixerpro_interview" poster="videos/banner.png" preload="auto" autoplay muted>

    Paul-M - Community Expert
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices