I put a video as a header in my website. It looks quite OK on Chrome/Firefox desktop and Chrome mobile but... does not seem to work on firefox mobile.
I only see a fixed image on my video but the video does not play.
Is there something I can do ?
<video id="my_video" loop muted autoplay>
<source type="video/mp4" src="my_video.mp4"/>
</video>
Generally the autoplay tag is not supported on mobile. That's to avoid users incurring data transfer costs because video files are large and can use up a lot of data.
you can use the 'poster' tag so when the video doesn't play you have an image.
Below code is working fine in Mozilla & Chrome. But in Safari the video doesn't play.
<video id="v-control" width="100%" autoplay="autoplay" loop>
<source src="assets/img/web home page banner.mp4" type="video/mp4"
media="all and (max-width: 480px)">
<source src="video-small.webm" type="video/webm" media="all and
(max-width: 480px)">
<source src="assets/img/web home page banner.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
I have tried preload for the video tag and If I add controls I should click on Play button. I dont need any controls for the video so I have removed controls.
If the video is not working in Safari, but works in other browsers (Chrome, Firefox, Edge), you may be running into an issue relating to byte-range requests.
Byte-range requests are when a client asks a server for only a specific portion of the requested file. The primary purpose of this is to conserve bandwidth usage by only downloading small sections of the file as needed (a video in your case). If you inspect the Safari video request, you may notice a Range header set to bytes=0-1. This is Safari's way of testing if your HTTP servers accept byte ranges before requesting a larger chunk of data.
To fix your server config, take a look at Apple's recommendations. If you need a quick fix, you could move your videos to a different hosting server that has a proper config (and make sure to update all video source references).
Safari has started (in the last year) preventing videos with audio tracks from auto-playing by default. They never specifically publicised this as far as I'm aware, however I believe it was part of the following changes:
Safari 11 also gives users control over which websites are allowed to auto-play video and audio by opening Safari’s new “Websites” preferences pane
(Source)
The only real workarounds for this are to either remove the audio track from the video, or have it muted by default.
<video id="v-control" width="100%" autoplay="autoplay" loop muted>
If your server can detect the requester's browser, you can apply this to just Safari, leaving other browsers as they were before.
In my case i'm using angular with service-worker and Safari is not loading mp4 files.
The service worker breaks the Byte-range requests, because it is like man in the middle between safari and the server, in the process the SW change the http response code from 206 to 200, this way Safari do not download the mp4.
To solve this I bypass the service worker when I need to show an mp4 video, using angular 8 is its simple, just add ngsw-bypass=true as a query string in the mp4 url and in works. ( https://....video.mp4?ngsw-bypass=true )
The Other work around also includes, adding attribute playsInline to the video tag along with muted.
For Example, something like this :
<video id="v-control" width="100%" autoplay="autoplay" loop muted playsInline>
The playsInline allows the browser to play the video right where it is instead of the default starting point.
Keep in mind that the videos you are serving need to contain the metadata required for streaming.
In my case, I was serving dynamic videos encoded in the server using ffmpeg. Using the -movflags faststart in the ffmpeg command made the videos available to be played on Safari
Added an attribute "muted"
--- video muted autoplay---
in Chrome I have everything worked and Safari is also trying
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='/assets/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/assets/myVideo.mp4' controls> </video>
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>
Anyone does have the idea of how apply the html5 code for video and allow autoplay in Ios10 or latest? Cause seems like Ios10 do have the latest update and it couldn't allow Autoplay. Following are the tag that im using.
<video preload="auto" id="lady_vid">
<source src="vid/lady.mp4" type="video/mp4"></source>
</video>
I was able to enable autoplay by using the following code:
<video autoplay muted playsinline>
<source src="http://example.com/video.mp4">
</video>
You need autoplay to enable autoplay.
You need muted, because only videos without audio track or with disabled audio track can be autoplayed.
You need playsinline, because only inlined videos can be autoplayed. This will also cause your video to be displayed inside the page itself and not be opened in fullscreen video view.
I was only able to enable it after specifying full url to the video, e.g. http://example.com/video.mp4 (this is a fake url obviously). It was not working with relative url, such as
<source src="video.mp4">
or
<source src="folder/video.mp4">
===========
Update:
After testing video on iOS10 for a while, I've realized that iOS10 fails to play a lot of videos. It's not a codec problem: if you encode two videos with exactly the same parameters, one might play and the other one won't.
What's even more intresting, is that most videos that cannot be played on iOS10 play perfectly well on iOS9 and iOS8.
So if your video isn't playing, try opening it with iOS Safari browser via direct link - maybe it doesn't work at all on iOS10.
I'm trying to create a HTML5 video background for a website but I cannot seem to get it to work on Safari. Does anyone have any ideas?
Here's the HTML video tags I'm using
<video id="bgVideo" class="bg__video" autoplay loop>
<source src="./vid/Sample_Vid.ogv" type="video/ogv">
<source src="./vid/Sample_Vid.m4v" type="video/m4v">
<source src="./vid/Sample_Vid.webm" type="video/webm">
</video>
I've tried adding a script tag under it to start playing the video with JS but that's not helped either.
document.getElementById("bgVideo").play();
When I inspect the page it looks like the video element is taking up space in the DOM but it's just invisible basically.
I've also tried opening the .m4v files directly in the browser & it plays it there so I assume the file isn't an issue. These were all generated from easyhtml5video.com
I also have the Modernizer script to detect if autoplay is enabled for the browser which I've had to alter based on a pull request in the github repo as it was always saying that Safari doesn't support autoplay otherwise.
The test site I've setup is http://treetopia.neilnand.co.uk/
The supported video format for Safari is mp4 with H.264 encoding. (you have a .m4v extension and file type)
If video does not has sound - use
document.getElementById("bgVideo").volume = 0;
Safari don't allow autoplay for videos with sound.