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.
Related
I looking for a way to play my video on Safari but I don't understand my video doesn't start ?
However, my video works on google chrome or edge.
Here is an idea of my code HTML
<video width="640" height="360" controls="true" autoplay loop muted playsinline>
<source src="/Perso/WebSite.nsf/vLUpage/VIDEOS/$File/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Perhaps that, I have to use of the CSS ?
Thank you for your help.
Try disabling cross-site tracking prevention on you IOS device under Safari > Preferences > Privacy.
read this https://support.apple.com/en-gb/guide/safari/sfri40732/mac
You can't play automatically a video on safari. The user has to engage an event and in this event you can play your video.
I am trying to play an mp4 file I have stored locally on my computer (when I play it with quicktime it works perfectly). For some reason however I can't get it to work with sound. If I include the 'muted' keyword, the mp4 plays, however with no sound (makes sense). However if I remove the 'muted' keyword, it doesn't play at all.
Any ideas what I am doing wrong?
Here is my code:
<video id="introVideo" width="50%" height="100%" autoplay loop muted>
<source src="../static/myvideo.mp4" type="video/mp4">
</video>
Did you tried with another web browser? Because autoplay is not allowed and even more on sounds with Chrome
This may be a little late, but starting in Chrome 66 autoplay doesn't work unless the muted attribute is included.
So in Chrome you can autoplay a muted video or autoplay won't work.
Source:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-autoplay
Edit:
https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html
Search for 'autoplay' in the chromium blog link.
I have working code for a video element within my site thats fully functioning on ios 9/10 and all the normal browsers (chrome/ff/ie) etc.
I've noticed that since the ios 11 update the videos no longer play or even work at all. They appear as a blank box with the controls but pressing play does nothing and opening the video full screen does nothing.
Here is my relatively simple code
<video playsinline onclick="play()" controls autoplay
controlsList="nodownload">
<source src="assets/images/video_im.mp4" type="video/mp4">
</video>
I've tried different variations of using playsinline="true" and controls="true". They have no effect.
I've tried to google the issue but there seems to be nothing except a podcast taking about ios 11 removing html5 video support, surely there is a fix?
Any insight/help would be much appreciated.
Cheers
It looks like the following code:
<video>
<source src="path/to/video.mp4">
</video>
stopped working on ios11 (with many other features too...). I confirm that source tag did work on ios9 here). Try placing the src="path/to/video.mp4" into the video tag directly, it should work on ios11.
A working example taken from webkit.org post on New video Policies for iOS:
<div id="either-gif-or-video">
<video src="image.mp4" autoplay loop muted playsinline></video>
<img src="image.gif">
</div>
Safari on MacOS seems to have a similar problem, maybe it's easier to test there. Looks like we lost the multiple source feature tho :(
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/myVideo.mp4' controls> </video>
I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
The video plays without any problems in Safari (haven't tested against earlier versions of iOS, but my only concern there is the autoplay issue?), but on Chrome the only thing I see is the cover image and a play button that doesn't trigger anything. Am I missing something? Do I really need to use JS to get it to work?
Update: It seems there's an issue with playing Webm files with iOS Chrome - I've tried several files from different locations and they seem to be needed to be downloaded first before being able to play.
Google Chrome currently has a bug in which it will not autoplay a .webm video if it comes after anything else. Try to use a code published here.
Build an HTML5 video as usual:
<video playsinline autoplay muted loop poster="aurora.jpg" id="bgvid">
<source src="aurora.webm" type="video/webm"> </source>
<source src="aurora.mp4" type="video/mp4"> </source>
</video>
If previous advise does not help, try to use scripted playback examples video.js and simpl on Github.
Also, read this post dedicated to muted autoplay in mobile browsers. And it must be useful to read Stack Overflow post as well – Efficiently detect if a device will play silent videos.
I just can't seem to locate what's wrong with this video snippet.
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/webm" src="sample.webm"></source>
<source type="video/mp4" src="sample.mp4"></source>
</video>
...Update: It seems there's an issue with playing Webm files with iOS
Chrome.
The simplest and best fix is to make sure you declare the mp4 file first and then declare webm in second place (the reverse of your shown order). I believe iOS expects an mp4 as first file in HTML5 video tags. All iOS sees is src="sample.webm" which is not a valid expected MPEG codec so leads to your "...play button that doesn't trigger anything". You got a silent error somewhere.
Try :
<video poster="sample.jpg" loop autoplay controls muted playsinline>
<source type="video/mp4" src="sample.mp4"></source>
<source type="video/webm" src="sample.webm"></source>
</video>
Side note: Just my opinion but, I think having webm here is redundant since the main supporting system (Google-based tech) can already handle mp4 anyways.
Better to offer those video decoders in browsers [of end-users] a choice of mp4 or ogv (just in case of Firefox).
PS: Auto-play is disabled on most mobile systems due to SIM data allowances. The end-user must choose to play that video. Likely there are clever workarounds on the net, just remember though, this is expected behaviour so is not an issue with your current code.
The video does not autoplay, tried it in Chrome 28 and Firefox 23. Also tried just plain autoplay and autoplay="true"
<video id="video_background" autoplay="autoplay" loop="loop" muted="muted"
volume="0"><source src="video/background/MH.webm" type="video/webm"> <source
src="video/background/MHB.mp4" type="video/mp4"><source src="video/background/MH.ogv"
type="video/ogg">Video not supported </video>
Update: Thanks for your help. When I take jquery out the video starts to autoplay. Any ideas?
Update: Looks like it was a issue with jquery mobile which was on the page for some reason. When I take out jquery mobile and add back in regularly jquery it works fine Thanks for the ideas.
Are you using jquery-mobile from Google's hosted libraries?
I had the same issue and autoplay worked when I replaced the jquery-mobile link for an actual file.
Hope that helps!