How to make html video autoplay on phones and tablets? - javascript

I have a background video on my site olegefimkin.ru which should start playing automatically on page load. And it does on PC and some phones, but doesn't on some phones and tablets (e.g. iPhone).
I'm using this html code:
<video autoplay loop muted id="main-video">
<source src="/themes/basic/video/intro.webm" type="video/webm"></source>
<source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>
I've also tried to add javascript video.play() but it still doesn't work in Safari.
How can i make video autoplay on mobile devices?

The video won't autoplay in Safari IOS unless you meet the following requirements:
<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.
You need to either remove the audio from the source or mute it and enable the sound to be activated by a gesture.
From the Webkit policies for video

<video poster="video-sg.jpg" playsinline autoplay muted loop>
<source src="caffe.webm" type="video/webm">
<source src="caffe.mp4"" type="video/mp4">
Your Browser May Not Support This
</video>
On any recent desktop browser, it autoplays and loops as it should. But in mobile safari, it doesn't autoplay, or even play at all. I can't even hit the play button to get it going. Just the poster image displays.
Apologies if I'm hijacking the OP's question, but at least it's the same question!

Related

disable fullscreen mode on html video on mobile devices

I'm developing simple web application with video on one of the pages, but I don't want this video to open fullscreen mode on mobile devices.
I've tried to disable controls, but it still not works on mobiles.
Is there any option to do this?
Use this code for mobile browsers:
<video autoplay loop muted controls webkit-playsinline playsinline>
<source src="file.mp4" type="video/mp4">
</video>
Using webkit-playsinline and playsinline make Mobile browsers play the video right where it is instead of the default, which is to open it up full-screen while it plays.

Autoplay is not working in chrome browser on android device

I'm developing a web that needs to work on computers, smartphones, and iPhones.
I'm using the audio HTML tag with autoplay attribute and it doesn't work as expected i.e. audio does not play automatically
<audio id="audio3" autoplay>
What am I doing wrong here?
You have to add the muted and autoplay attributes together like below
<audio id="audio3" autoplay muted>
Chrome's autoplay policies changed in April 2018, and are as follows
Muted autoplay is always allowed
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On the desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
On mobile, the user has added the site to his or her home screen.
Top frames can delegate autoplay permission to their iframes to allow autoplay with sound
Refer google docs for more information

Unmute autoplay video on mobile

I have a website that has a muted autoplay video in the background.
I have this:
var vidSource = document.getElementById('vidSource');
vidSource.setAttribute('src', 'images/background-mobile.webm');
window.addEventListener('touchstart', function() {
$('#backgroundVid').prop('muted', !$('#backgroundVid').prop('muted'));
});
<video id="backgroundVid" loop muted autoplay class="videoPlayer">
<source id="vidSource" type="video/webm" />
</video>
It works if I run the code in a click event with a desktop browser.
However, with Chrome for Android, the video freezes when the touch event is triggered.
I guess the same happens with Safari for iOS, aswell with many other mobile browsers.
I know videos need to be muted so that they can be autoplayed on mobile, but how can the user unmute them afterwards? (e.g.: by touching the screen or by clicking on an unmute button)

HTML5 video tag in IE plays 2 tracks simultaneously instead of one

I have this page
http://joewillhelpyou.com
Users click the blue botton and a video page begins to play.
I have it simple. an iframe so the Jquery dows not mess with my tag that I found would not allow me to autoplay the next video, and 2 src for each video. In all the browswers they work okay, only one video is played back mp4 or webm. but in IE I keep hearing two playing back and I cannot figure out why
you can visit the page and tell me if you catch my mistake or a workaround for IE
<div id="videodiv">
<iframe src="http://joewillhelpyou.com/videos/step2/play02_01.html" width="1000" height="750"></iframe>
</div>
then this leads to a page where I have the video
<video controls autoplay width="936" height="624">
<source src="002_001.mp4" type="video/mp4">
<source src="002_001.webm" type="video/webm">
Your browser does not support the video tag.
</video>
under normal situations the code only plays one choce right? but in IE it seems to play 2 things at once, the rest of the browsers only sound out one track and that is what I want

Is it possible to autoplay HTML5 video on iOS 6 and earlier

I want to autoplay HTML5 video on iOS devices. I searched on google and here on stackoverflow for this. I found many answers (including this one ) saying that it is not possible to autoplay video on iOS 6.1 and later. Therefore it is possible to autoplay video on iOS 6.0 and earlier. But I don't know how can I do that.
Will this work on iOS 6.0 and earlier?
<body onload="document.myMovie.play()">
I don't idea avout iOS but you can try
<video controls autoplay> //autoplay commad play your video automatically after load.
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
</video>

Categories