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
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 want to make the video on HTML autoplays, given that Chrome prevents autoplay attr in HTML to play the video.
Here's my code :
<video id="video" width="400">
<source src="chess.mp4" type="video/mp4">
</video>
var vid = document.getElementById("video");
vid.autoplay = true;
vid.load();
The behavior is weird. First, I'm working on Eclipse and everything works perfectly fine on the eclipse browser.
When it comes to Chrome, the video sometimes works, sometimes need a clear-cache refresh to work... Not working with the first time opening the link. And now it's not working at all...
Any help?
You need to refer to Chrome Autoplay Policy Changes before you try any scripts.
Chrome's autoplay policies are simple:
Muted autoplay is always allowed.
Autoplay with sound is allowed if:
User has interacted with the domain (click, tap, etc.).
On desktop, the user's Media Engagement Index threshold has been
crossed, meaning the user has previously play video with sound.
On mobile, the user has [added the site to their home screen].
Top frames can delegate autoplay permission to their iframes to
allow autoplay with sound
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)
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