I have two different videos, both (as far as I know) generally captured in the same manner, that I'm trying to play using an HTML5 video tag in Chrome. Both videos open and play perfectly in VLC, so I don't think there's any issue with a corrupted file, and both are mp4's with an H.264 format, using YUV color space. However, when I try to play one in Chrome (Version 21.0.1180.89) it gives me a grayed-out play button, while the other works perfectly. For reference, my OS is Ubuntu 10.10, although I've seen the same problem in newer versions of the OS. This is whether I'm loading the video into the HTML5 tag, or navigating directly to the URL where the video is being stored. I'm somewhat at a loss here, does anyone know what direction I should go to find what the significant differences are between the two videos?
Edit:
This one works: https://dl.dropbox.com/u/100841270/1_G101_20120914_0139PM_Course_101.mp4
This one does not: https://dl.dropbox.com/u/100841270/1_G101_20120914_1156AM_Course_101.mp4
Update:
It appears to have nothing to do with OS, since I've seen the same problem in both Windows and Linux. Chrome 22 beta in Ubuntu didn't seem to work either.
We had this problem and found that encoding the files in accordance with iPhone's webview's standards created files that played fine in Chrome. Chrome and iPhone webview share the same render engine, and it appears they have similar HTML5 video requirements.
Not all H.264 encoded Mp4 files are supported by Chrome and slight differences in the encoding process can produce videos that do not work. Even if the EXACT same encoding settings were used, H.264 is a variable bit-rate encoder, so different videos may exceed bitrate limits.
The encoding settings that were successful for us were:
Only use the H.264 Baseline Profile Level 3.0
Resolution below 640 x 480 and framerate up to 30 fps
B frames are not supported in the Baseline profile.
bitrate limit of 900kb.
Here is the reference we used to arrive at those settings. Likely not all of these are required for Chrome, but we stuck to these rules and found that all videos worked on both platforms. Further research could likely determine the exact setting that is/was causing Chrome to not play the video.
I am running Windows XP, and chrome doesn't like the second one either.
My best guess of the cause is that, the working one is only 6.4 MB, but the other one is about 21.7 MB. Chrome might just be refusing to directly play a video that big. Have you tried having YouTube host it, and embedding their player into your site? That may solve the problem. (If you are worried about random strangers watching the videos, why did you post them here? Why would anybody even want to watch them? Though, you can make videos private on YouTube, in case these are just two videos that demonstrate the same problem you are facing with the real videos.)
That may also be compounded by a different problem that exists with both videos, manifested when I try to use Windows' built-in player. Both videos appear distorted when I use my computer's video player, stretched like 300% horizontally.
Are there other videos you have that fail in exactly the same way? Since these are only test videos for the real thing, if this is the only video with that problem, I would not say that it really is a problem unless it recurs. The dysfunctional video may have just run into that one-in-a-million chance that it has just the right contents for it to not work.
Related
Because I dislike Youtube and Vimeo is too expensive, I chose to upload my videos directly to the server at my web host and embed the videos on my site using the HTML5 tag (see photos for the code). The videos play fine on all browsers except for Firefox and I can't figure out why. https://memoriaelinguagrumentina.org/english/saponareseCuisine.html
I've seen several other posts on here asking about very similar problems; however, nearly all are at least 8 years old. I've gone through them as part of my troubleshooting process, but without any luck.
I've seen it recommended here to use multiple video formats (.mp4 AND .ogv) because there is no universal format supported by all browsers. Firefox did not always support mp4, but I believe it does now. So I don't believe this is the root of the problem.
I checked with my web host to see if they have the correct MIME types (see photo).
I cleared the cache on my browser, set the privacy settings to normal, and checked hardware acceleration.
What am I missing?
*note: To save disk space, I'd like to not have to upload duplicate videos in different video formats to the server, ideally. Since Firefox now claims to support mp4, I was hoping to get away with using only mp4.
Firefox doesn't support all video files. They generally support MP3, WebM, Ogg, and Wave containers, and if you are using an MP4 container then it usually depends on the platform decoders for AAC and H.264 audio and video streams. The video encoder format that you are using isn't supported by firefox. You should use supported encoders for your video.
You can find more information here:
https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
Your MP4 videos are using H.265 video codec.
You need to have them encoded as H.264 to work in most browsers.
Solution: This means you must re-save your videos as a new format.
The problem is not just Firefox, even Windows Chrome does not play H.265 encoded video.
Things to fix:
Re-encode as H.264 (use High or Main profile for better compression-vs-quality output).
Re-size your videos (when doing re-encode). 720p should be okay for demos/intros. You don't need a large 3840 x 2160 pixels video showing inside a small 672 x 398 pixels box.
Your file size is not good. 286 mb is too much data loading for just a mere 6 minute video.
I have a site which has a collection of audio clips for voice actors to promote their skills and talents. Recently it has been brought to my attention that in Google Chrome some of the clips do not play. However you can download the .mp3 and it will play fine, or you can listen to it fine in Firefox, Safari, IE, etc.
So I started Googling and found this bug which was closed a couple of years ago: https://code.google.com/p/chromium/issues/detail?id=110309
I also found this page: http://cro.ma/?faqs=some-of-my-mp3-files-does-not-play-in-google-chrome-browser-but-works-fine-in-all-other-browsers
The MP3 in question is fairly short 10s in playtime, and only 168kb in size. It did have some meta information there but as recommended in the link I stripped that off, however it still doesn't play.
The only other difference I have noticed between the non-working MP3 and the working MP3s is that the non-working one has a bit rate of 112kbps, whereas the working ones are 128kbps.
The site uses MediaElement.js but even just dragging the MP3 into the browser window and using the default engine has the same outcome.
Has anyone else experienced this issue and know of a fix?
It's a problem with version 45 of Google Chrome. Joshua Moon has provided the following solution which may help you, all credits go to him. Just posting as your question was asked after his and I thought you might not have seen it.
Joshua said:
I'm not 100% on the specifics of this, however, it looks like some MP3s using older versions of Lame, or longer than a couple of minutes, or at high (300 <) or low (128 >=) bitrates seem to be affected. It appears to be webkit-related, as it also affects Safari users.
HOWEVER!
As a solution, re-encoding the MP3 files using 160Kbps bitrate, and the latest version of LAME (3.99.5) seems to have fixed this, and they now play normally across all major browsers again.
You can see the full question and answers here (on Stack Overflow): Google Chrome no longer plays certain audio files
I had this problem today on Chrome 50 and simply restarting my browser got it working again.
Based on other's comments I installed "Audio Converter" and converted my mp3 files to 128 Kbps (standard) and they now work. I don't find any loss of quality.
Over a year ago we added an video page on our site. At the time OGV wasn't very good, and there was no good WebM encoders available, so we decided to use HTML5 and h.264 for webkit browsers (Chrome, Safari, etc.) and then fallback to Flash for other browsers (using the same h.264 source file.)
This has been working great for a while. Recently (month or two maybe, so over multiple Chrome versions - currently Version 24.0.1312.52 m) we discovered Chrome really lagging on the playback. We thought it was a server issue, so we upgraded the server, and it is still behaving the same. I remembered reading that Google wanted to drop h.264 and move everyone to WebM, and thought this performance was part of that. We converted some videos to WebM and tested them with Chrome and they lag just as bad. Same video (WebM) streams beautifully in FireFox, and the MP4 streams great in FireFox via the Flash plug in.
I went to YouTube and turned on the HTML5 video support, and found the videos to lag in Chrome too (when running at HD) while they play fine in Flash mode. (Even when HTML5 is enabled, some videos still play via Flash.)
Tested on both Windows 8 and Mountain Lion.
I've talked to co-workers and they are seeing the same issues. So it isn't just me. So my question is:
Is this an issue with our video encoding?
Is it a bug with Chrome?
Or is it just localized to us?
Is there a way to deal with this besides switching back to Flash?
This is the flag I mean. If the flag is disabled, the browser tries to use hw-accelerated video decoding, which I can grant provokes wrong and slow video renderization in some devices. If enabled, hw-accelerated video decode is never used, but the above mentioned problems disappear. It theorically increases decoding time in devices actually able to use such acceleration, but I've been working around this field for almost a year and I still didn't realize any difference in that matter. Still didn't get to know how to identify if a device will behave properly (the availability of this feature doesn't seem to grant its proper behavior) with such acceleration without testing, though.
Here's the deal, through a huge series of events, I am stuck using Safari on Windows for video playback in HTML5.
I can't use any other browser, Chrome is out of the question, I must use Safari and it has to be on Windows for hardware compatibility.
The best format I've found is a h.264 Quicktime file, but I'm still getting some frames dropped and a bit of tearing.
The video is being played in 1920x1080 resolution and I have tried down-sampling to 720p, which causes noticeable quality loss and no noticeable gain in performance.
I'm looking for one of the following two as a solution:
- A plugin for Safari (that's Windows compatible) to use something other than Quicktime for HTML5 video. I've looked and the WebM (VP8) plugin is only for OSX.
- Any video format configuration that will decode faster in Quicktime on Windows. I've even tried ProRes to no avail, it's even slower than h.264.
Update...
Ogg Theora can be played in Quicktime with XiphQT, but I've ran into many issues when trying to playback various Ogg video formats.
With h.264, if you are using x264 (eg: Handbrake) to transcode/encode video, the following can be set in advanced mode:
cabac=0:ref=1:me=umh:bframes=0:weightp=0:8x8dct=0:trellis=0:subq=6:tune=fastdecode
These parameters:
ref=1, set the reference frame limit to 1, using more reference frames requires more processing.
bframes=0, disables b-frames, not sure on this but I believe that forces P-frame which are faster
cabac=0, disables CABAC compression, which would make the output smaller but take more processing
tune=fastdecode, set's the tune preset to optimize the output specifically for decoding
The other options I am not as sure of and have yet to find solid evidence on their impact towards decoding, let alone if they have any impact on decoding. For example, the "me" setting is for subpixel strength in the transcoding process, it has an effect on video quality, but understanding how frames change, it could have an impact (in some videos) on the decoding process. That is something I do not know, but am stating for a better understanding of where I am coming from.
More about these settings can be found here:
http://mewiki.project357.com/wiki/X264_Settings
I'm setting up a website which ultimately displays videos. The video files are all .mpg and requirements prevent me from converting these to another format such as flv. So far I have been playing around with Windows Media Player but have found that it doesn't play nice with non IE browsers. The problem which arises is that although the video will play, it doesn't shrink itself to fit in the WMP container and so only the top corner is visible. This problem goes away if I download the np-mswmp plugin for Firefox however it is a manual install and I'd rather not leave it to the user. Once the Firefox plugin is installed, Chrome also plays the files correctly but I doubt that the average user would ever think to do this.
Is there a better way to embed .mpg files into a web page, an alternative player which doesn't require file conversion? I have had a play with Quicktime but it only ever shows a Q with a question mark imposed over it, even when I associate Quicktime with .mpeg files. Any advice would be appreciated!
Thanks,
James
I'm sorry to say there isn't a good way to do cross-browser video without being able to force your users to install something. That is why every video site uses flash, since it's the nearest thing to a standard - but of course flash has some gaps in coverage, the most significant being iPhones.
Windows Media Player has only about 70% penetration and Internet Explorer somewhat less. By going this route you will end up with 1 in 3 users unable to view your videos.
Either bite the bullet and move to Flash as a video player or just give your users a download link. A download link is a very easy way to support almost every user, if you can do that.