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
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).
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.
Just as the title says. I've been working on a site and had added a big html video for the main page.
I looked over online...myme types checked, h264 encoding checked. I looked over old versions of the file i've been working on and noticed an old pure HTML file which loaded the video in all browsers with no problem (which I guess discards any encoding or video quality issues)
It all was working neat. Even displaying in firefox, chrome an IE. BUT for some reason the video does not load in IE whenever the file extension for the page it's on is .PHP. To be precise, whenever i try it from my LOCALHOST (XAMP with Apache server)
I also checked the dev tools and under network it does show it as the right content type and no error whatsoever (getting normal 200 result)
Here's the snippet of the video tag used:
<div id="video_container">
<video autoplay loop poster="video.jpg" id="header_vid">
<source src="imagenes/video.mp4" type="video/mp4">
</video>
LOL, and just noticed...not even the poster image is showing in IE...wtf.
I'm so confused, could anyone enlighten me a bit please? Could it be something related to the path used? been digging around the net for days _
Check if your url is formed properly when you are using .php extension on IE. Same issue addressed quite a few time here.
mp4 from PHP - Not playing in HTML5 Video tag ||
Play mp4 file through php in HTML5 Video Tag in Chrome?
I notice IE doesn't like the properties without value, so try
<video autoplay="" loop="" poster="video.jpg" id="header_vid">
I have a html5 video on my site and all was working well until client gave me a new video to replace the old one. The new video crashes Internet Explorer (IE10 and IE11 - haven't tried others). When trying to play, a second of video is shown then whole site freezes and a pop-up tells me it's not responding.
No other browser is affected.
Have tried transcoding video in Handbrake to make sure it's using H.264 codec, but still no luck.
All other videos on site work fine in IE.
Has anyone got any suggestions that I can try?
Ps. Sorry, but can't share the video file as it's confidential to the client.
Oops - found out it was not IE but Avast (anti virus) add on that was freezing video.
Disabled Avast and video played as normal.
Still don't know why it only affected one video.
I'm being forced to use rather large videos within an html 5 video player and I can't seen ti get the buffering to work while playing in Chrome on both a Mac and PC.
The player buffers great in Firefox and Safari, not sure about IE being on a mac.
I'm using the following code in the video tags:
video mp4="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/benefits.mp4" ogg="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/benefits.ogg" webm="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/benefits.webm" poster="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/slide.jpg" preload="none" width="820" height="462" captions="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/intro.srt
And the video player can be viewed here
I've also ready that Chrome's initial preload is only around 2mb as opposed to FF and Safari which are around 10mb, which would explain slower buffer, but the videos get to a point and then just stopp buffering in Chrome and stick.
Any help would be greatly appreciated.