I'm working on this site using canvas video with MediaElement.js library. It works fine in desktop browsers but not displaying anything in mobile (android chrome 56).
The weird thing is that when I remove mp4 and ogg source, only use 'webm', at first it still not displaying anything but when I turn my device upside down it works?(maybe need to resize the screen to trigger it?) the videos displaying. So I want to ask:
1/ Incase I have to use 'webm', is there anyway I can tell my web that only use 'webm' type when in tablet & mobile without removing mp4 & ogg source?
2/ do you have any idea how to fix it?
I have tried add muted attr and use absolute urls but still not working.
<video id="myVideo" loop="loop" controls="controls" width="300" height="150" muted>
<source src="/wp-content/uploads/videos/video.mp4" type="video/mp4" />
<source src="/wp-content/uploads/videos/video.webm" type="video/webm" />
<source src="/wp-content/uploads/videos/video.ogv" type="video/ogg" />
</video>
$(video).bind("loadedmetadata", function () {
video.play();
});
$(video).mediaelementplayer({
success: function (mediaElement, originalNode) {
}
});
Thank you very much.
I am trying to add a background music for my website. By using audio tag, i can accomplish this in desktop browsers. But is not working in mobile browsers. In my search i get to know that auto play is disabled in mobile browsers. It would be grateful if anybody can help me on this issue.
The code i am trying is
<audio id="audio_id" autoplay="autoplay" loop="true" controls="false" hidden="true">
<source src="assets/audio/music.mp3" />
</audio>
I also tried
$(document).ready(function() {
var audio = document.getElementById('audio_id');
audio.play();
});
Thanks in advance.
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
site: http://www.ignitionpointventures.com
Hello All,
I am having html5 video loading issues on chrome/safari. The basic idea is that there is a video container with video thumbnails on the right side. I have created a separate html file containing each video's html5 video info to be placed in the video container. On page load the first video automatically should load using jquery document ready, subsequently each thumb loading the appropriate html5/video.
Issue:
On Chrome and Safari.
On Chrome the video on load does not appear. On clicking the thumbs the first image of the video appears in the main video div, but appears to stop loading and will not play.
On Safari the video does not load at all. When trying to play the file directly it has an error and the quicktime symbol shows up with a ? mark.
Here is an example of the html5 video
<video width="721px" height"406px" preload="auto" controls="controls">
<embed src="http://www.ignitionpointventures.com/includes/video/v1/v1.mp4" width="721" height="406" allowscriptaccess="always" allowfullscreen="true"></embed>
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.mp4" type="video/mp4" />
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.ogv" type="video/ogg" codecs="theora, vorbis" />
<source src="http://www.ignitionpointventures.com/includes/video/v1/v1.webm" type="video/webm" />
<p>Your browser does not support HTML5 video.</p>
</video>
Here is the javascript
<script type="text/javascript">
$(document).ready(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v1/v1.html');
});
$(function() {
$(".v1").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v1/v1.html');
});
$(".v2").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v2/v2.html');
});
$(".v3").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v3/v3.html');
});
$(".v4").click(function(){
$('#leftVideo').load('http://www.ignitionpointventures.com/includes/video/v4/v4.html');
});
});
</script>
I checked the .htaccess file also
I know the videos are a bit large and could be an issue, but doubt this is the real problem. yes the javascript could be more advanced.
Thanks!