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.
Related
I have been doing a lot of research into WebRTC for a project I am currently working on. I am aware that it is only supported in Chrome, Firefox, and now Opera. However, I am wondering if their is a cross-browser viewer solution that does not require a plugin. This way I could require that broadcasts be done from a webRTC compliant browser but viewers could use other browsers such as Safari or IE with watching/viewing capabilities only.
The application I am working on is used for small group broadcasts of 25 or less people with a single publisher/presenter.
Here is a list of the options/ideas so far.
Somehow have a html5 canvas element display the frames of the video on non-webRTC supported browsers. However, I also need to support audio as well and I don't believe there is anyway as of right now to feed the audio stream into the HTML5 audio element. This option may be dead before it is even considered...
Have a server subscribe to the webrtc stream and then create a HLS (HTTP Live Stream) stream that can then be consumed by a browser player (Possibly Flowplayer, it supports cross-browser HLS to the best of my knowledge). I have found that Web Call Server 4 from the guys at Flashphoner can do the conversion to HLS but it seems like overkill for a simple server that does the WebRTC to HLS conversion. Hoping that there may be some sort of node.js implementation out there to generate the playlist and files for HLS so there is low latency.
Any help from the community on this would be much appreciated. The question is pretty specific and I have been researching solutions for the last 2 months so I think it warrants a stack overflow post at this point.
-- UPDATE
There may be a 3rd option here, having users on non-webrtc supported browsers install a plugin. This would only be for Safari and IE but it may be a solution. One free plugin that can be distributed for an app based on my findings are [link]https://github.com/sarandogou/webrtc-everywhere It may be possible to use this plugin with something like Kuento for signalling and achieve a solution that will at least work on all desktop browsers until Safari and IE catch-up with WebRTC.
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.
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 have to play an ogg audio file in the background when the user hits a "Music On" button. Currently the page uses an AUDIO tag, and it works in Firefox, but not in IE (confirmed by this table).
Is there a really cross-browser way to play an ogg audio file, if possible without Flash?
I am aware of the existence of specific libraries like JPlayer or SoundManager, but do I really have to use one of them? After all, it is just to play a sound...
Forget about cross-browser. Stick with ogg. It's much better than mp3 in every way. Tell people to change their browser to one which supports ogg (e.g. Chrome, Firefox, Opera). If they don't want to change, then forget about them; they don't deserve to hear your audio. If your client doesn't understand this, leave him and let him waste money on one developer after another until he finds a "yes man" developer who will give him a terrible website that will be a nightmare to use and will need completely redeveloped in a year's time.
The Company I work for has dropped support for IE6 for apps and websites and dropped support for IE7 when it comes to apps. Personally, I don't want to be developing for IE at all until I met a friend of mine working elsewhere. She was allowed to work from home, but she had to use RDP (Remote Desktop Connection in Windows) thats supported as a web interface only via IE. Some companies use Windows Group policies to disable USB drives etc. The terminals in these companies can have IE only! So as much as I would hate to admit, cross browser compatibility is a serious issue.
Flash would be the number one choice of plugin to play ogg files. Now, the following scenarios may occur:
iOS (iPad and iPhone) : HTML5 Audio Tag
Android / Chrome / Safari : HTML5 Audio Tag
Opera
Firefox
IE
For 3, 4 and 5 it really depends on the user. Even if they have one of Real Player, QuickTime or Windows Media Player, the would be able to play ogg files. There is a case where the specific ogg codec is not installed. In this case they will get a prompt on the top of their browser, telling them to install the specific codec.
We are talking about people insisting on using IE or insisting on a really really old version of firefox and who don't have WMP (by default on Windows), RealPlayer or QuickTIme installed but have an Internet connection.
Even jQuery leaves out 0.0001% of users ! :-P
You can probably consider using a .wav file, but I'm not sure that works.
The simple answer: no, there's no way to do it without Flash. My approach: simply create a script that converts a single file to multiple encodings.
I've recently switched my clients site from an FLV video site to an HTML5 MP4 site.
In doing this they had a limited size server so we couldn't do flash fallbacks...
Yet we have the site running well on iOS devices and most laptops but he tells me sometimes that the videos take verrrry long to load on their Macbook... I assume they're on Safari which I am myself using and it works fine.
But what could cause differences in playback start times? I know internet speed does but they tell me they done it on an ipad then straight after did it on a macbook and the macbook failed to load the buffering video in an acceptable time.
Could it be:
Browser versions?
Server Configuration?
Operating System?
Im stumped! But either way, they all work sweet on my iMac, iPhone, Macbook Pro.
Could it possibly be the way the MP4s have been encoded? If the video index is at the end of the file then the browser has to load the entire thing before it can play it.
I wrote about it How to get your HTML5 MP4 video file to play before being fully downloaded and how you can fix it.
I know that it may not fix the problem per say, but it just strikes a chord that it might be related.