I have videos on my site that I autoplay using the VideoJS library. The videos are played as muted. The videos autoplay fine on the Safari browser with my iPhone, but do not work on some of my friends' phones (same phone and iOS version as me).
Sorry I don't have a lot of information as I cannot replicate the issue on my device. One clue I have is that I see a big play button on the problematic browsers (first image). I used CSS to style the play button differently (second image).
Any leads would be amazing. Thank you!
Here are my video tag and VideoJS options:
html:
<video
playsinline
muted
>
VideoJS Options:
{
autoplay: true,
controls: false,
loop: true,
muted: true,
preload: 'auto',
};
Did you try with this attr: autoplay, muted and playsinline. Example:
<video autoplay muted loop playsinline>
<source src="video.mp4" type="video/mp4">
</video>
If you're seeing inconsistent behaviour across the same iPhone model and iOS/browser version, one likely explanation is that your friend's phones are on 'low-power mode' or 'low data mode' to preserve battery or bandwidth - these modes are known to disable video autoplay in Safari.
https://developer.apple.com/forums/thread/709821
https://shaktisinghcheema.com/how-to-autoplay-video-on-mobile-devices-on-low-power-mode/
Related
I've implemented a video into my website and this is how I did it: <video autoplay muted loop> (The video has no audio.)
Unfortunately, on mobile, the video does not autoplay and when I hit play the browser opens the video in a sort of "lightbox", or player, where everything else is gone and I just see the video.
I really don't want this to happen. – What is happening and how can I avoid this?
The "lightbox"-problem can easily be fixed, you just have to add this attribute: playsinline to the video tag. – Great documentation here: https://css-tricks.com/what-does-playsinline-mean-in-web-video/
The video did not autoplay on my iPhone because: "Low Power Mode", was active. – Found that out here: Autoplay muted video iOS 11.2 :)
I have an HTML5 video embeded in a portfolio I want to autoplay & be muted until sound is initiated, so when a user is scrolling down the page it's already playing but there isn't annoying sound for the user. It is working fine on all browsers on my desktop and tablet, however on iPhone mobile the sound is permanently muted, even when a user tries to adjust the volume. Here here's the code I am using, is there some javascript I can implement/use instead that will solve this?
<video id="cla-generic" preload="auto" onclick="this.paused?this.play():this.pause()" autoplay controls muted loop>
<source src="video.mp4"/>
</video>
Autoplay does not work on iOS and android.
Thats why you are getting no sound.
Take a look at this thread:
iPhone HTML5 Audio tag not working
In mobile mp4 video not working, it display only img of video.
I don't know how this problem solve.Link is here
http://innovatoryinfotech.com/theme/Restora/index-video.html
This is my html.
<video id="video" class="slider-video" width="100%" preload="auto" loop autoplay style="visibility: visible; width: 100%;">
<source src="video/Sushi-361.mp4">
<source src="video/Sushi-361.webm" type="video/webm">
<source src="video/Sushi-361.ogv" type="video/ogg">
</video>
Please solve this problem.
i add this script
var video = document.getElementById('video');
video.addEventListener('click',function(){
video.play();
},false);
then it work when click in the img then video is start.
But how to start automatic video on mobile.
It's not "not working", it's just preload and autoplay disabled. In iOS Safari, you can't make video play until user explicitly start it.
Here is the official document description:
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
UPDATE: according to https://developers.google.com/web/updates/2016/07/autoplay, autoplay was disabled in some versions of Chrome on Android too. However, "muted autoplay" is supported by Chrome for Android as of version 53, and is supported by Safari on iOS 10 and later.
Thus, you can try to fix this issue by adding muted attribute (<video autoplay muted>). However, due to browser history, it won't work on all devices.
Rephrasing the question
HTML5 video autoplay is not working in slick.js on chrome and safari.
everthing is working fine in firefox.
Autoplay works fine outside the slick container.
I tried this:
Video auto play is not working in Safari and Chrome desktop browser
But cant seem to get it to work.
My slick setup
$(document).ready(function () {
$('.slick-hero').on('init', function (e, slick) {
var $firstAnimatingElements = $('div.slick-hero:first-child').find('[data-animation]');
doAnimations($firstAnimatingElements);
});
$('.slick-hero').on('beforeChange', function (e, slick, currentSlide, nextSlide) {
console.log(nextSlide);
var $animatingElements = $('div.slick-slide[data-slick-index="' + nextSlide + '"]').find('[data-animation]');
console.log($animatingElements.length);
doAnimations($animatingElements);
});
$('.slick-hero').slick({
autoplay: true,
autoplaySpeed: 7000,
pauseOnHover: false,
speed: 1000,
dots: true,
fade: true,
adaptiveHeight: true
});
function doAnimations(elements) {
var animationEndEvents = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
elements.each(function () {
var $this = $(this);
var $animationDelay = $this.data('delay');
var $animationType = $this.data('animation');
$this.css({
'animation-delay': $animationDelay,
'-webkit-animation-delay': $animationDelay
});
$this.addClass($animationType).one(animationEndEvents, function () {
$this.css({});
$this.removeClass($animationType);
});
});
}
});
Original question:
I cant get a simpel HTML5 video to autoplay.
everthing is peachy in Firefox.
My relatively straight forward implementation
<video poster="assets/video/ocean.jpg" id="bgvid" controls autoplay loop muted>
<source src="assets/video/ocean.mp4" type="video/mp4">
<source src="assets/video/ocean.webm" type="video/webm">
<source src="assets/video/ocean.ogv" type="video/ogg">
</video>
This doesn't work!!! the controlls work fine, but autoplay doesn't.
I tried opening it in the browser by double-clicking, via localhost and on a my own website... nothing.
The URL´s to the videos are fine, i tested them.
Im on a macbook pro using latest version of chrome and safari.
Everything works just fine in firefox.
This example works fine:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay,
This example works fine:
https://codepen.io/dudleystorey/pen/knqyK
Tried using this allso:
https://github.com/VodkaBears/Vide/
The demo files work just fine.
But when i trie to implement it on my own code, then it just shows the poster image.
Re-posting the answer from a related question:
After using jQuery play() or DOM maniupulation as suggested by the other answers, it was not still working (Video wasn't autoplaying) in the Chrome for Android (Version 56.0).
As per this post in developers.google.com, From Chrome 53, the autoplay option is respected by the browser, if the video is muted.
So using autoplay muted attributes in video tag enables the video to be autoplayed in Chrome browsers from version 53.
Expert from the above link:
Muted autoplay for video is supported by Chrome for Android as of version 53. Playback will start automatically for a video element once it comes into view if both autoplay and muted are set[...]
<video autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Muted autoplay is supported by Safari on iOS 10 and later.
Autoplay, whether muted or not, is already supported on Android by Firefox and UC Browser: they do not block any kind of autoplay.
If any of the parents of this video tag in your code have any DOM manipulation on them, autoplay won't work in Safari and Chrome. Here's a similar question with answers that should help you:
Video auto play is not working in Safari and Chrome desktop browser
I use this code to make a video (eg. banner, so no controls) autoplay and loop forever.
<video id="video1" class="video-js vjs-default-skin"
controls width="900" height="500"
poster="myposter.jpg"
data-setup='{
"controls": false,
"loop": "true",
"autoplay": true,
"preload": "true"}'>
<source src="thisismyvideoyay.webm" type='video/webm' />
</video>
It works fine on my computer but on my phone (Android OS 4.2.2 with Chrome) it's not autoplaying or preloading and not looping after it finished.
I read this on Video.js page:
Auto: Start loading the video immediately (if the browser agrees). Some
mobile devices like iPhones and iPads will not preload the video in
order to protect their users' bandwidth. This is why the value is
called 'auto' and not something more final like 'true'.
I set the preload to true but it still doesn't autoplay or loop.
Is that a feature of my browser and how can I avoid that?
I tried on other browsers:
UC Browser doesn't seem to support HTML5 at all?
Stock browser shows a little video icon but doesn't show the player, too
↑ Same with Maxthon ↑
To solve the autoplay issue on iOS, do not use the videojs options to autoplay the video.
In other words, this will not work:
<video id="my-video-id" autoplay></video>
Neither will this:
videojs('my-video-id', {
"autoplay": true
});
Instead wait for the video object to load and then trigger the play action:
videojs('my-video-id').ready(function() {
this.play();
});
On a phone, there's no way you can get it to loop or preload data. But I do have a solution where you could autoplay it. You could use my code here = http://www.andy-howard.com/recreate-bbc-iplayer/index.html
And simply add an addition click function on the document ready. This would then make the browser on the phone click the image, which then in turn converts the data tags to video tags, which then converts to the videojs player, which then plays :)
Hope that's helpful.
On mobile, you can autoplay if you put muted option
<video autoplay muted>
<source src="video.webm" type="video/webm" />
<source src="video.mp4" type="video/mp4" />
</video>
Chrome v53: https://developers.google.com/web/updates/2016/07/autoplay
iOS 10 : https://webkit.org/blog/6784/new-video-policies-for-ios
This works for me use this on video tag
data-setup='{ "controls": false, "autoplay": true, "preload": "auto", "loop":true }'
player.ready(function() {
setTimeout(function() {
player.play();
}, 1000);
});