So, I have this video autoplaying OK in Firefox and IE:
http://sweeneydogkr.co.uk/video.html
But no joy with Chrome, any ideas?
Code:
<video autoplay muted controls loop>
<source src="images/sweeneydog.mp4" type="video/mp4">
new policies of chrome do not permit autoplay. Safari still works
video tag seems correct, if i run it without the //DOM Ready part, it autoplays in chrome.
With the script enabled it doesn't play.
Quick fix might be:
-add id(ex. myVideo) to your video tag in anythingSlider div.
-add the following function to the end of the page.
</body>
<script>
var myVideo = document.getElementById("myVideo");
setTimeout(() => {
myVideo.play();
}, 1000);
</script>
</html>
Ended up here because I was having the same issue (no autoplay in Chrome despite it working in Firefox & Safari) #Csisanyi's solution didn't work for me - myVideo.play() actually threw a console error. This is what fixed it for me:
$('#video')[0].load();
Hopefully this may help somebody else.
Related
<audio autoplay loop>
<source src="boss.mp3">
</audio>
This is in my game index, and it should work. But when i load up the page I hear nothing, all my other sounds work except this one
Here is my full code https://github.com/Mzema4818/Dragon-Escape/blob/master/index.html
Some browsers block autoplay request due to it's annoying feature by default. I have made it to work using the code below. It works on chrome. It also work on safari only if the user allows to play autoplay from site preferences setting. If you are on safari, go to Safari -> Settings for this website -> "Allow all Auto-Play". I hope it helps.
<audio class="bgmusic" autoplay loop>
<source src="boss.mp3" type="audio/mpeg">
</audio>
<script>
$(document).ready(function() {
$('.bgmusic').on('canplay', function() {
this.play();
});
});
</script>
I had forked your GitHub repository to tweak the scripts. Here's the link to my repo: https://github.com/ashishpatelcs/Dragon-Escape/blob/master/index.html
and a working demo: https://ashishpatelcs.github.io/Dragon-Escape/
Please let me know if there is any issue.
I've got an autoplaying video which works well on all browsers, except Chrome - which has apparently disabled autoplay video. I've tried some work arounds, but now it just plays for 1-2 seconds and stops entirely.
Here's my code:
<video id="introduction-video" preload="auto" playsinline autoplay muted loop volume="0" poster="/images/videos/video-background.png" width="100%" height="100%">
<source src="/images/videos/Tasman10seconds.mp4" type="video/mp4">
<source src="/images/videos/Tasman10seconds.webm" type="video/webm">
Sorry, your browser does not support HTML5 video.
</video>
<script>$(window).on('load',function(){$('#introduction-video').get(0).play();});</script>
Any help would be greatly appreciated!
For anyone else having this issue, this worked for me..
$(window).bind('load',function(){
'use strict';
$('#introduction-video').trigger('play');
});
This is an old post, but as a quick followup for anyone who ends up here on a search: make sure to check your browser extensions. I was banging my head against this issue in Chrome as well. Then I tried it in incognito mode (where extensions were disabled) and the video played just fine.
I'm not sure which extension was causing the issue. But, that seemed to be the culprit.
Just found out that a background video on the slider of the header doesn't autoplay in Chrome, but works well in Safari.
Here's a website: http://graddev.diamond-discovery.com/ems/
What could cause the issue? It plays for 1 second and then just freezes.
The problem was with Slick Slider, this code helped:
$('.hero-slider').on('init', function(slick){
$('.hero-slider video').each(function () {
this.play();
});
});
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
The following HTML code works in Firefox but not in Chrome. In the latter, the play button in non functional.
<video id="mmswf50534a6a5e263" controls="controls" mediagroup="mmswf50534a6a5e263">
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
</video>
Whereas this code works in both browsers.
<video id="mmswf50534a6a5e263" controls="controls">
<source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
</video>
I have no idea why the mediagroup property affects the play button functionality.
All other control buttons work. I can even right click the video in Chrome and start it.
A Chrome bug? Tested version is: 21.0.1180.89
It looks like you're generating videos in Typo3. I had the same problem and I could not find where it would append the mediagroup.
I solved the problem by adding this script to my base template :
//Remove all mediagroup attributes from video tag
window.onload = function(){
var lstMedia = document.getElementsByTagName("video");
for(var i = 0; i < lstMedia.length; i++) {
if(lstMedia[i].hasAttribute("mediagroup")) {
lstMedia[i].removeAttribute("mediagroup");
}
}
}
Probably not a clean solution, but it worked for me.
Note: I use Typo3 4.7