I'm have the problem that video doesn't work in Safari, but works perfectly fine with Chrome and Firefox.
<video controls muted preload="none" playsinline src="/path/to/video" type="video/mp4"/>
Get fom VLC codec informations:
video h.264/mpeg-4 avc
audio mpeg aac audio mp4a
This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.
They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.
You could workaround that issue by either
Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...
*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.
Another possible solution for you future searchers: (If your problem is not a mimetype issue.)
For some reason videos would not play on iPad unless i set the controls="true" flag.
Example: This worked for me on iPhone but not iPad.
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
If you haven’t solved the problem yet then go to your phone setting then choose safari and tap Clear History and Website Data, that worked for me the problem wasn’t the code but safari itself.
Related
I want to show embedded video in my Angular app. The problem I am facing is that it is taking too long to load in Google Chrome (It takes around 5-10s), whereas it loads instantaneously in firefox. The format of the video is mp4, and I searched and found few issues related to Chrome and mp4 videos not working but my problem is slow loading.
My code is,
<video
*ngIf="!isDialogOpen"
class="videoURL"
controls
autoplay
loop
[muted]="true"
[src]="mpVideoUrl"
></video>
Can this issue be related to the format/codec of the video? I would prefer a solution where I don't have to change it.
all browsers have different buffering rules: depending on the speed of the network, and size of the video. what is the bitrate/ size of the video you are attempting to play?
You can check this with https://ffprobe.a.video (just enter the URL of the video you're having issues with).
My mp4 videos are not loading in safari for some reason, in every other browser the html5 player works absolutely fine, but in safari it doesn't. This is for a clients website i'm helping with.
I must stress, i cant host these videos on a different server or video hosting platform. does anyone know how i can this to work.
http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4
my code for the player :
<video class="eltdf-self-hosted-video" controls="true" preload="auto">
<source type="video/mp4" src="http://superflyanimalphysio.co.uk/course-videos/Caveltti%20Intro.mp4">
</video>
You server appears to be not set up to handle range requests properly.
Some browsers will ignore this and simply handle the full video being downloaded, but Safari seems to not play the video in this case - unfortunately the error message in the console is not that helpful.
You can check this by doing a range request test - Apple explain the approach here:
https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//apple_ref/doc/uid/TP40006514-SW6
If the tool reports that it downloaded 100 bytes, the media server correctly handled the byte-range request. If it downloads the entire file, you may need to update the media server.
Doing this for your video confirms that the server is downloading the full video rather than just the range requested:
It may be worth contacting your hosting provider to ask them to correct the server configuration.
I attempted to add a Hero background video to our website. It's being served from mux.com.
I use it with HLS, but for Chrome it uses Media Source Extensions from what I gather.
I know that for HTML5 video to auto play, it has to be muted also, and I have both parameters over there.
Apparently, on Android Chrome I get behaviour where it freezes on the first frame (black), but doesn't continue and I cannot trace why.
In case of freezing, it still does load the video, just that it's not getting autoplayed.
I am out of clues.
Isolation sandbox:
https://codesandbox.io/s/32yky6x7mq
https://32yky6x7mq.codesandbox.io/
In my attempts, I have reduced this down to simple HTML app with Hls.js library and basic <video> tag where it breaks on mobiles.
How do I get the video to autoplay on mobiles?
P.S. To see exactly what I have tried, please see edit history, as I have been trying lots of things.
On my device specifically, Android Chrome, it's caused by Data Saver.
Disabling Data Saver, the video autoplays.
It's paradoxical, because with Data Saver I expect for the video to not be loaded at all, but it's getting loaded and the autoplay gets interrupted instead - resulting in more waste.
Possibly, there are other settings out there in the wild that prevent autoplay, for instance, couldn't find the exact reasons why iOS is not working. There are hints about playsinline attribute, which I have not tested yet. (Will update when I do)
Worth noting, is Feature-Policy header too: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy
It didn't help me in my scenario, but it can probably be related with autoplay in other scenarios.
I need to play .m4a files (recorded on iPhone) in IE(9+) and Safari (iPad, iPhone). I am facing problem with setting correct MIME Type. For playing in IE10 I need to set audio/mp4 but for Safari audio/aac.
With audio/mp4 I am getting Cannot play audio file on iPad.
With audio/aac I am getting Error: Unsupported audio type or invalid file path in IE
Is there a type I can set for both?
<audio controls="controls" autoplay="autoplay">
<source src="play.aspx?filename=sound.m4a" type="audio/mp4" />
</audio>
Notes
Using an alternative player is not a solution for me.
I serve the files thorough .aspx page so I can control HTTP headers.
From observing the page HTML 5 Audio Across All Browsers using m4a, oga, mp3 and Flash it seems that possible solution is to give type="audio/mp4" and NO conten-type header. However removing HTTP header in aspx is rather too complex for problem I am trying to solve(see Removing/Hiding/Disabling excessive HTTP response headers in Azure/IIS7 without UrlScan).
Audio is still in working draft, so browser experience will vary.
Having said that, the mime type that's most prevalent is audio/x-m4a. Some sites show audio/m4a-latm as a valid mime type for m4a audio but as of this writing, even Chrome doesn't recognize that mime type.
You can try this snippet in different browsers to see if it works - I verified it in IE11, Chrome (v37) and IE9 (emulated via Dev Tools).
Audio Tag sample
I've also found (personal observation) that audio recorded on iPhone doesn't play most of the time on web. Almost all browsers say the file is invalid and if you download the recorded file, it doesn't even play in media players (e.g Windows Media Player). I suspect iOS core audio is to blame here but haven't found anything conclusive yet. Audio recorded from Android works fine though.
At this point, having a flash fallback seems like the best option (won't help on iHateFlash devices though).
I'm trying to include a HTML5 video player on a site.
I've got the following code:
<video id="player" controls="controls" width="100%">
<source src="http://trailers.apple.com/movies/paramount/captainamerica/captainamerica-tlr1_h.480.mov">
</video>
This works in Safari, but not in Chrome and Firefox, is the .mov encoded in a weird way that doesn't allow them to be used like this? trailers.apple.com which uses the same URLs work fine in their player.
The probability that on apple's site they have multiple links to different encoded movie files. They do this because there is no current movie format that works across all major browsers.
Also just because the URL is the same doesn't mean that the same video is being served up on apples website... They could be doing some URL mapping magic to get a correct video format.
look at this link for a good current table of support per codec
http://diveintohtml5.info/video.html#what-works
Apple only serves up their videos in the MOV format. This means that only Safari can watch the videos since it is the only browser that uses Quicktime in its HTML5 video implementation. If you try opening the file directly in Chrome you should either see it download or the Quicktime plugin kick off.
I personally don't have Quicktime so when I go to the Apple trailers site, I get a link to download Quicktime and can't proceed any further without doing so.
captainamerica-tlr1_h.480.mov is just a .mov file that redirects to captainamerica-tlr1_h480.mov But it still won't work in browsers that doesn't use Quicktime for <video>. You have to set User-Agent to "Quicktime" for trailers.apple.com.
other browsers doesn't understand .mov, quicktime does. you need to serve up separate files for safari. you can generate needed files with nero or in-browse via media.io.