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)
Related
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.
I have used video tag with autoplay attribute. I know that autoplay works if the video is muted and in my case there is no mute but, if I click on play button for first time as a gesture to play it, then after closing the video and again loading back, it does not required user gesture to play, it gets autoplayed.
Once a user gesture is used to play the video then from second time video starts to autoplay as its own without any gesture. I have not found any policy regarding the second time autoplay on iphone devices without user gesture on play button.
Please help me to find the policy which describes a user gesture required for the first time to start autoplay from the second time on its own in iphone devices. Thank you.
<video src="a.mp4" id="video" frameborder="0" controls="" autoplay="" playsinline="" preload="auto"></video>
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!
I am implementing a video player using <video>. This is working in Chrome, Firefox, and Internet Explorer but is not working in Safari.
$("#vdsourceVideoPath").attr("src", "http://localhost:3000/Documents/upc and shelf info_0001.mp4");
var player = document.getElementById('vdTrainingVideoPlayer');
player.load();
player.play();
<video id="vdTrainingVideoPlayer" class="vdTrainingVideoPlayer" controls="controls" autoplay="autoplay">
<source id="vdsourceVideoPath" src="" type="video/mp4" />
</video>
player.load() and player.play() method are giving errors in Safari.
You could use the YouTube player
Use the youtube site to find the video you want
Click the 'Share' button below the video
Click the 'Embed' button next to the link they show you
Copy the iframe code given and paste it into the html of your web page.
Check out this link
This article gives a good run through of implementing a html5 video player
http://www.creativebloq.com/html5/build-custom-html5-video-player-9134473
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
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>
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