How would I make video auto play in every browser?

Question

I need to play a video (auto playing) regardless of any browser or devices. Below code is working fine in Desktops (Chrome, Opera, Firefox and Safari); but, in mobile phones it is not loading in iPhone (showing controls) and in some android phones (not even controls)

I have tried adding attributes autoplay with muted and playsinline, also tried to force play with JavaScript.

Here is the HTML:

<video autoplay playsinline loop muted poster="about-poster.png">
  <source
    src="about-video.mp4"
    type="video/mp4"
  />
  <p>
    Your browser doesn't support HTML5 video. You can find our
    logo video
    <a href="about-video.mp4">here</a> instead.
  </p>
</video>

This is the JavaScript code:

window.addEventListener("DOMContentLoaded", function() {
  var media = document.querySelector("video");

  if (media.paused) {
    media.play();
  } else {
    media.play();
  }
});

I want to autoplay the video in every browser and every devices, and I could use some help.

Thanks.

Possible duplicate of [HTML5 Video autoplay on iPhone](https://stackoverflow.com/questions/43570460/html5-video-autoplay-on-iphone) — TecBrat, Apr 04 '19 at 13:34
Just FYI, you can't. I have autoplay shut off in every single browser, on every device, I own. I personally find nothing more annoying than an autoplay video. Although the internet is filled with autoplay ads and so on, I never see them (and in fact see very few ads since I have adblockers on every browser/device I own). Other than that, the usual autoplay, or onLoad handlers, seem to be the method of choice. I've done a lot of ad work in the past and that's how we usually went about it. — Tim Consolazio, Apr 04 '19 at 13:42
Browsers are starting to automatically mute sound media also until user interaacts with it — charlietfl, Apr 04 '19 at 13:45
I have tried `playsinline` attribute. This did not help. @TecBrat — , Apr 04 '19 at 13:52

score 0 · Answer 1 · answered Apr 04 '19 at 13:54

0

playsinline attribute is missing

video {
max-width: 100%;
}

<video _ngcontent-c15="" autoplay loop muted playsinline preload="auto" poster="https://picsum.photos/360/240?image=990">
  <source _ngcontent-c15="" media="screen and (min-device-width: 721px)" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_1280x720_1mb.mp4" type="video/mp4">
  <source _ngcontent-c15="" media="screen and (max-device-width: 720px)" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_720x480_1mb.mp4" type="video/mp4">
  <source _ngcontent-c15="" media="screen and (max-device-width: 640px)" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4" type="video/mp4">
  <source _ngcontent-c15="" media="screen" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/SampleVideo_360x240_1mb.mp4" type="video/mp4">
</video>

answered Apr 04 '19 at 13:54

yunzen

32,854
11
73
106

@DebadiptiPatra Where? I don't see it in your code. – yunzen Apr 04 '19 at 14:01
I have already tried the with `playsinline` in my local. The problem is only happening with one android device I have (Oneplus One with android version 6.0) and iPhone 7(Chrome and Safari). All other devices playing fine. – Apr 04 '19 at 14:04
1

@DebadiptiPatra Why isn't that information in your question? – yunzen Apr 04 '19 at 14:34
Which browser in the Oneplus One smart phone? – yunzen Apr 04 '19 at 14:38
iPhone 7 with Safari work with playsinline (tested on CrossBrwoserTesting with this codepen: https://codepen.io/HerrSerker/pen/ROawbm) – yunzen Apr 04 '19 at 14:46
I am using Chrome and Firefox (loading fine with autoplay) in my Oneplus One – Apr 05 '19 at 06:15
playsinline is not helping. Still I am unable to autoplay in iPhone and my android phone. Can you check it [here](https://dev-pattem.github.io/video/) – Apr 05 '19 at 06:25
I tested it with a codepen on crossbrowsertesting.com. iPhone 7 with Safari 11.4 and Nexus 6P (Android 6.0) on Chrome Mobile 72. Both worked! So there is something askew with your local hardware. Try deactivating all Plugins you might have – yunzen Apr 05 '19 at 06:43
I haven't used any plugins, it is just a HTML file with a video. Can you please check this [link](https://dev-pattem.github.io/video/) – Apr 05 '19 at 06:49

How would I make video auto play in every browser?

1 Answers1