Currently i'm having a background video for my website. The file is a .mp4 (1920x1080) format which is 25 seconds long (not a big file to be honest).
Here comes the tricky part.. the video runs all well, until I visit the website on a different computer (for example mac, using safari). Suddenly the video gets slown down and pixels can be count.
Effects are used inside of my video and may causes a higher bitrate. But whenever I watch the video on YouTube or whatever, it isn't lagging at all.
Does anyone know what could cause this?
P.S: I tested this on 2 different computers (a MAC book, which is pretty fast) and a slower computer.
Try to insert your video like that with the codec defined :
<video autoplay="true" loop="true"><source src="video/test4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></video>
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 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).
Chrome Version: 32.0.1700.76 m
Operating System: Windows 7
I've been having issues with Chrome's html5 video player. Two concerns:
The video won't begin to play until the entire video buffers. The loading bar shows the video loading slowly until the entire video is loaded and then it begins to play the video. This takes a while for people with slow internet and they may think the video is broken if it doesn't begin playing within 10-15 seconds.
When the video plays there is no sound. The image shows but there isn't any sound. The only sound is a random .5 second sound clip while the video is buffering.
I would very much appreciate some help troubleshooting these problems or possible alternate solution ideas.
Page with video problems:
http://suntmormon.ro/actiuni-umanitare/
Here's one video that doesn't play at all in Chrome. It may be an unrelated problem:
http://suntmormon.ro/wp-content/uploads/2014/01/Mormon-Missionaries.mp4
-Davis
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.
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