I write a html5 page, the source is as fllows:
<!doctype html5>
....
<video id="vdemo1" controls width="440" height="248">
<source src='http://mysite.com/demo.webm' type='video/webm'>
<source src='http://mysite.com/demo.mp4' type='video/mp4'>
// fallback codes
</video>
the output of video tag is an empty black box. By following the instruction on this url:HTML5 Video not working in IE9 - Some tips to debug, it shows a MEDIA_ERR_DECODE error code. However, I can right click on the empty viewport and choose 'play' item but nothing appears in viewport. After right clck and choose 'save' to save mp4 file to local hd, it can be played well under OS. I even change video src to local file but it doesn't help!
Does IE9 lose the mp4 codec ability ( I'm sure the mp4 is encoded in H.264)? How can I regain the ability?
=======
edit # 2012/10/9
There's a strange thing happened. I never run Windows media player before and after I run it 1st time, if source of video tag is local file, it can be playbacked. But if remote url, then it won't. Can anyone see why?
Re-sort the sources - put mp4 on top!
Check if your server sends the correct mime type (video/mp4) for your mp4.
Both can break playback...
Sometimes I've seen IE9 have trouble playing videos encoded with B-Frames. Try encoding your video without them. You can do this with ffmpeg by adding the option "-bf 0" to the command line.
In some cases, Internet Explorer throws a decode error (MEDIA_ERR_DECODE - An error has occurred in the decoding of the media resource, after the resource was established to be usable) and is unable to play videos with dimensions that are not evenly divisible by 16.
For example, it may perfectly play a video that is 960x400 ( 960 % 16 == 0 and 400 % 16 == 0 ), but when reducing the dimensions by half (480x200) it will not play ( 480 % 16 == 0 but 200 % 16 != 0 ).
One way to get around this is to enclose the re-sized video in an area with known good geometry, and then pad out the remaining area with black bars to avoid distorting the aspect ratio.
To do this, we used the following code adapted from a different SO answer that I can't seem to track down right now: -vf "scale=iw*min(640/iw\,480/ih):ih*min(640/iw\,480/ih),pad=640:480:(640-iw)/2:(480-ih)/2".
Related
I got 3 static videos on frontend, all of them takes approximately 21-22mb in size.
<video autoplay="true" src="videos/video1.webm"></video>
<video autoplay="true" src="videos/video2.webm"></video>
<video autoplay="true" src="videos/video3.webm"></video>
Their html autoplay attribute is set to true, so they need to be played immediately after the get request, or in my situation, after 3-4 seconds of a maximum delay. But the problem is, webpage starts playing them only after they fully downloaded.
How can i make a buffering for each of them?
It sounds like you want the video to progressively download - i.e. to start playing while the download continues.
This simplest way to do this is to ensure your server hosting the video supports range requests. If you were using mp4 files you would also need to make sure that the videos had the header data at the start, but this is not an issue for webm.
Once your server supports range requests then your browser video element should automatically request the video in chunks and start playing as soon as it has enough to start, assuming you set it to autoplay or hit the play button.
You can see more about Range Requests at the link below including the following easy check to see if your server support this:
curl -I https://yourVideoUrl
(https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests)
If you get a result that suggests Range Request are not supported it is quietly like a configuration issue on the server so speak to your server admin.
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>
This MPEG-DASH stream
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11.smil/manifest_mpm4sav_mvlist.mpd
doesn't play in dash.js -- it plays the first segment at the lowest bitrate, switches to the next higher bitrate and stops after loading the second bitrate's init information. You can see this by pointing Chrome at the dash.js reference player, entering the stream URL in the top box and hitting Load. Open the JavaScript console to see that dash.js reported a media error, which means that the video element had a .error.
The same player is able to play this stream in IE11 without error.
These streams, each of which contains only one of the bitrates that play in the above sequence, both play without error in Chrome, so it's not that the underlying media is just somehow corrupt.
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11_0.smil/manifest_mpm4sav_mvlist.mpd
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11_1.smil/manifest_mpm4sav_mvlist.mpd
Any ideas?
A Chromium person says that this is due to audio sample rate switching, which Chrome doesn't support yet: https://code.google.com/p/chromium/issues/detail?id=315330 Although each of our videos' video bitrates should have had the same audio bitrate, some videos had different audio bitrates for different video bitrates. The solution was to reencode those videos correctly.
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 am currently working on a web application for video processing. Here is the situation:
I have a mp4 h264 video as input, I split the video in multiple avi files. Each avi file is processed individually generating another avi file as an output which is immediately encoded back to h264 and is now ready to be displayed in my web application.
The problem is that in need to play those video chunks as if they were a single video but I have not been able to accomplish that in a proper way. I have tried the following solutions without having the expected results:
JW Player: Each time a chunk is played, the player goes black and as far as I know it is not plausible to pause it on the last frame
Flowplayer: Videos wont reproduce on googletv's chrome browser
HTML5 video tag: Behaves extrangely on googletv's chrome browser not playing the chunks completely when the src attribute changes and no playing at all less-than-1-second-chunks (It works fine on linux)
Any Ideas?