Highlighted

HTML5 Video not playing on mobile devices

New Here ,
Mar 18, 2019

Copy link to clipboard

Copied

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

TOPICS
Product issue

Views

16.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

HTML5 Video not playing on mobile devices

New Here ,
Mar 18, 2019

Copy link to clipboard

Copied

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

TOPICS
Product issue

Views

16.0K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 18, 2019 0
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

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, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 1
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 2
New Here ,
Mar 19, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0
Adobe Community Professional ,
Mar 21, 2019

Copy link to clipboard

Copied

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, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
Adobe Community Professional ,
Mar 21, 2019

Copy link to clipboard

Copied

If you want the video to play inline ( without full screen mode) you may want to add 'playsinline' too:

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


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
ALsp LATEST
Mentor ,
Apr 02, 2019

Copy link to clipboard

Copied

If you want a video to run in the background and allow content to display on top, and you do not want to code it yourself, we do have an extension that does this:

Video Background Magic

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 02, 2019 2
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

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, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 1
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

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

Nancy O'Shea, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0
New Here ,
Mar 19, 2019

Copy link to clipboard

Copied

Its a animated banner. So its not to be promoted because its a backdrop for a video prodution company.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0
Adobe Community Professional ,
Mar 19, 2019

Copy link to clipboard

Copied

If it's an animated banner, you should probably be using Animate CC with HTML5 canvas.

Create HTML5 Canvas documents in Animate CC

Nancy O'Shea, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 19, 2019 0
New Here ,
Mar 21, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
Adobe Community Professional ,
Mar 21, 2019

Copy link to clipboard

Copied

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, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 1
New Here ,
Mar 21, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
Adobe Community Professional ,
Mar 22, 2019

Copy link to clipboard

Copied

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?


Paul-M, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 22, 2019 0
Adobe Community Professional ,
Mar 21, 2019

Copy link to clipboard

Copied

mfatony  wrote

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

Unfortunately, Autoplay blocking is not limited to a few mobile devices.  It's a lot more common than you seem to realize.  Below describes some of the reasons why.

HTML5 Autoplay Blocker - Chrome Web Store

Firefox, Safari and Chrome all offer add-ons and preferences for disabling autoplay.  This is just the tip of the iceberg, too.   A Google search will reveal many more links like these.

If you can't or won't use a player button, alternatives are  HTML5 animation or an animated GIF.

Nancy O'Shea, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0
Adobe Community Professional ,
Mar 21, 2019

Copy link to clipboard

Copied

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, ACP - www.webspectrum.co.uk

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 1
Adobe Community Professional ,
Mar 21, 2019

Copy link to clipboard

Copied

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, ACP

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 21, 2019 0