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>
Related
It may seem a dumb question but I cannot figure out a solution, I am embedding a local video using the standard html5 video syntax, the problem is that on safari / ios the video won't play and a quicktime striketrhough icon appears instead.
The same error appears on w3c page if I try to playback a video using iphone / ios (testing on xcode):
https://www.w3schools.com/html/html5_video.asp
How can I fix this problem?
This is the code I am using:
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
Thanks.
I've seen posts complaining that you cannot autoplay a video on mobile device.
But, this CAN be done. I've visited youtube website on android and iOS and video does indeed start to play without any user interaction. How can I mimic this behaviour?
EDIT: if you visit direct link, it does not work. If you first visit youtube.com and than click on some video, it works. No idea why.
<video id="mobilevideo" name="Mobile video" onLoad="play()" onClick="play()" preload="auto" autoplay preload muted playsinline webkit-playsinline>
<source src="file.webm" type="video/webm">
<source src="file.ogg" type="video/ogg">
<source src="file.mp4" type="video/mp4">
Your browser does not support this file type.
</video>
<!--Javascript autoplay video -->
<script>
document.getElementById('mobilevideo').play();
</script>
You can use autoplay in video tag. like this:
<video width="320" height="240" controls autoplay>
For more information, you can learn from here:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay
For mobile, you should not do auto play because it will cost user's bandwidth(money). See this post for more detail:
Can you autoplay HTML5 videos on the iPad?
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!
The video and poster is displayed on Chrome, firefox and opera however not on safari despite the video being a .mp4 format..
https://brunelstudents.com/teambruneltest/
For safari you need to add .webm format video.
<video controls>
<source src="somevideo.webm" type="video/webm">
<source src="somevideo.mp4" type="video/mp4">
I'm sorry; your browser doesn't support HTML5 video in WebM with VP8 or MP4 with H.264.
<!-- You can embed a Flash player here, to play your mp4 video in older browsers -->
</video>
I have used 5 video in htmt5 video element as a slider. It is not working on Android and iPhone device. Just only show a single image. This is my site http://devpgc.buysidedesign.com/
I have used following code
<video id="video" autoplay loop muted>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.mp4" type="video/mp4"/>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.webm" type="video/webm"/>
<source src="http://devpgc.buysidedesign.com/images/video/InvestorAligned_1.ogg" type="video/ogg"/>
</video>
I have also try to follow this link HTML5 <video> element on Android but no luck. Please tell me the solution.
Try this:
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
Source