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();
});
});
Related
Background video is not playing in iPad devices. I've tried to add playsinline as well. Video is playing in browser Mac.
I use this code:
<div class="video-container"><video muted loop autoplay playsinline controls="true"><source src="./media/199.mp4" type="video/mp4"><source src="./media/199.ogv" type="video/ogv">Your browser does not support HTML5 video. </video></div>
Can you explain what you see? Is it blank with a play button? One possibility is that your iPad is in low-power mode, autoplaying videos never play on iOS in low-power mode.
If the problem is that the video is not auto-playing, note that the autoplay directive is very finicky. Adding muted by no means guarantees that the video will play. In the past, programmatically playing a muted video was the only way I could get autoplay to work, that code is shown below.
// Call this function after the document loads
function onload() {
document.getElementById('your_video').play();
}
It could be a CSS issue where the video has 0px height. Set the background color and check that you see the change.
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.
<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.
We have an auto-starting HTML 5 video (WEBM with MP4 fallback) which works great in Chrome and Firefox. On IE versions 9 to 11 the video flashes up a black screen momentarily before the video starts. According to the client they're seeing this black screen for a few seconds which obviously is a poor user experience.
We’ve tried adding a poster attribute to display a holding image before the video starts but apparently they now see the poster image, then the black screen, then the video starts. I can observe this on my local too although the poster image and black screen only occur for a fraction of a second each. Still not good though.
Has anyone had any experience of this? Any ideas how to resolve? This is our video markup:
<video playsinline autoplay muted loop poster="https://placehold.it/600x400">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type='video/webm;codecs="vp8, vorbis"'/>
<img src="https://placehold.it/600x400" alt="Image fallback" />
</video>
I had the same issue and could resolve it, by playing the video after it can be played through. Now there is no half second switching to a black screen before playing the video. Other browsers behave different and it seems that they start the video directly in advance and there is no short interruption.
video = document.getElementById("yourvideoid"); // don't autoplay the video
video.oncanplaythrough = function () { video.play(); }; // plays the video
Regards.
Try adding the preload attribute and use JavaScript to ensure it's loaded a certain amount before it starts to try and play. Something like this:
$(() => {
$('video').on('click', function (e) {
e.preventDefault();
this.on('loadeddata', () {
this.readyState >= 2 && this.play();
}
});
});
Since you only see it for a flash locally, but your client sees it for a few seconds (presumably remotely), it's likely that the video doesn't start loading until hitting play, and IE shows a black screen instead of the poster until it has enough buffered.
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