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).
Related
Having such a strange issue, i have an mp4 embedded using html video element. It's linking directly to the mp4 file like so:
<video controls playsinline preload="metadata">
<source type="video/mp4" src="https://example.com/video.mp4#t=0.001">
</video>
It does sort of seem to happen sometimes and not others, but right now all I get on my iPhone iOS 14.6 and simulator iOS 15 is a video saying it's 0 seconds long. The same video plays fine in chrome, and it even plays fine in safari on my iMac, it's just the iPhone. This particular video is converted from WebM to mp4 with FFmpeg if that makes a difference somehow.
Also just as a side note, and another question: I want to show a preview of the video, but again on iOS using #t=0.001 doesn't actually work, it just shows a white frame, I'm assuming Apple changed things again and wondered if anyone has a new solution? - This happens obviously only when the video tag actually works.
It looks like there is something wrong with byte requests in safari on the iphone. Screenshot ...
screenshot of errors in mobile safari
UPDATE
I thought i had solved it by streaming the video with php, but it's not. This is a really intermittent issue. It seems to be find with short 10 second videos, but when they get anything like 30 seconds or above it starts to not stream it; but the video is fine, i can download the file and play it on my computer.
I am seeing this in the debug console in safari for the iphone:
Failed to load resource: Plug-in handled load
What does this mean? It's driving me insane, all works fine in every other browser just not on iphone (not even chrome on the iphone works) so this must be something to do with iOS
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'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.
I have the following HTML5 video tag:
<video id="vid" controls="controls" preload="metadata">
<source src="/testvid.m4v" type="video/mp4" />
Your browser does not support the video tag.
</video>
As soon as the video is clicked, Safari begins downloading the entire video file and does not stop until it gets to the end. The video file is 400 MB, so this is a problem due to the cost of the bandwidth.
It does not seem to be a problem with the location of the index in the file, as the app at http://renaun.com/blog/code/qtindexswapper/ says the index is already at the start, and the start of the video is playable immediately even though the rest is still being downloaded.
The source file is in Amazon S3, and so the server supports range requests.
Is there anything I can do? Ideally I would like some sort of sensible buffer, e.g. 20 MB of content ahead of the playhead, or 1 minute, or something like that.
The normal behaviour is that a small portion of the video is downloaded when the page loads (just enough for the browser to display a frame and to get the file headers). When you play the video, the whole video is downloaded while it plays.
In some older versions of browsers, the video downloads again if you use the seek bar.
There is no setting or attribute you can use to change this behaviour.
Source: http://www.stevefenton.co.uk/Content/Blog/Date/201106/Blog/HTML-5-Video-In-Real-Life/
I agree with Sohnee. To lower your bandwith you have two options:
compress your video to a lower quality, or what's your videosize/bitrate ( f.e. h264 with 427x240 800kbps i end up with approx. 5-6mb/min)
think about a playlist (guess southpark.de is doing it like that), cut your movies into several parts and if video is on end, load next one into player. disadvantage: if you use custom controls, they only show infos of current video and not the whole (could be solved if you build your custom controls with special magic).
don't know if it helps, but this would be my two solutions in this case. best K
I'm having a lot of problems with video html5 and google chrome.
I have this site on two different servers and chrome is showing the transition video aleatory.
http://mitoteweb.com/vivaldo/
I made some files to test the video the simplest way to check this problem and it isn't working.
I tried with mp4 h.264, ogv y webm video format and I'm having the same issues with all of them.
Here's the test files.
http://mitoteweb.com/vivaldo/chrome/prueba1.htm
When I load the page it shows the video but once I click on the second link it doesn't show any video unless I manually reload the page. And even with that, sometimes it doesn't happen.
Sorry, I couldn't include more links because this is my first post.
Thanks in advance.