2

I want to play video and audio in autoplay mode, When both are ready to play.
I'm using this code. 

 var video = false;
 var audio = false;
 video.addEventListener('canplay',function(){
    video = true;
    playall();
 });
 audio.addEventListener('canplay',function(){
    audio = true;
    playall();
 });
playall(){
  if(video && audio){
    console.log('playing start....');
    video.play();
    audio.play();
  }
}

This code is working fine in desktop browsers. But when I try it on mobile device it is not working. Here is a link where you can see it live how its working.
Video Link

Azeem Haider
  • 111
  • 2
  • 10

3 Answers3

1

Chrome/ie now supports the autoplay if muted

<video id="video" width="100%" controls   autoplay muted>
    <source src="<Your video src>" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
saad
  • 1,354
  • 1
  • 14
  • 21
0

Apparently, you can't for now as stated here :

The auto play limitation in mobile browsers is an intentional limitation put in by the OS developers. To my knowledge, there is absolutely no way to auto play content in a mobile browser because the event that is required to trigger content play is an OS/Phone event, one which the browser itself has no control over or interaction with.

HTML5 Video autoplay on Mobile Browser

Community
  • 1
  • 1
Al D
  • 13
  • 3
0

Right now answering by only adding autoplay muted to the video tag isn't working.

For me, the easiest solution was to use the native function play().

<video>
    <source src="video.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

for the code above use this js (if browser is really old use if statement below):

var video = document.querySelector('video');
if ('play' in video) {
    video.play();
}
mialdi98
  • 58
  • 7