Ralph Seibert

I updated my media-maintenance plug in to work with mobile video, especially Blackberry’s and iPhones. So what does that mean? For Blackberry’s, it meant that I had to setup an RTSP server and stream an 3ggp2 mp4 file. For iPhone’s, I extended the (video) tag source so that it would provide an m4v video and then fall back to a 3ggp2 lower bitrate (cell connect) if needed. Both video files were encoded for iPhone optimum playback.

So what is so hard about that? I use the VideoJS library and it makes life a lot easier in working with the (video) tag and supporting Flash video fallback. For mobile, I use the same structure but conditional-ize the video definitions after detecting which browser and device I am working with. So in general, this is what I have.

if Blackberry - \<img\> for Poster + <a href="rtsp://<server><port>/<path>/<filename>.3g2>
if iPhone - <video width height controls poster="<filename>.png>
     + <source src=<filename>.mp4> + <source=<filename>.3g2>
if PC - <video (same as iPhone)> + <source..> mp4, webm, ogv
     + <object...flowplayer> Fash fallback + <param...>
     + <img fallback> in case there is no video support.

So then I decided to look into support RTMP for streaming videos since I could do that from AWS Cloudfront. I added the code for Flowplayer using the RTMP plugin and setup Cloudfront to stream from a new bucket. The Cname and all the other conditions were setup and the FLV videos with set mime types were then placed into the bucket. The end result was that it worked but not consistently. I was having a lot of problems with Firefox and some issues with IE. Chrome seem to work the best. The code is in the plugin but turned off at the moment till I have more time time to sort out all the issues.

The Number 1 issue that I ran into time and time again was video encoding. This has been confirmed many times on the net but it is the big elephant in the room. Encoding your videos to the proper format/codec and with the right bitrates, size, audio, video, stream is a trial and error challenge. The code is the straightforward part since it is documented and proven.

I also took some time to look into support css spites in the image tag code. The idea was to add it as an option by adding a new parameter to the shortcode (i.e. cssclass=”Sprite spritepic”). However, if you use a background image definition in your css class, then you have a support problem (adding the new css classes to your theme and updating them). There are also problems in supporting captions and layering the

I have now moved my images and videos to AWS CloudFront to try to make up for a slow server. The banner still loads slow, but that appears to be more of an issue with WP than with graphics delivery. I have the image pre-loading but WP keeps getting in the way. If you are seeing any “stuttering” on the videos, then try playing them in IE. Firefox has a problem with default session settings that interferes with HTML5 video playback.

Ralph

Hi,

Welcome to my new biographical information site. I created this site so I could post up some background and comment on, refer to, and post up information that is of interest to me. I decided to set this build this site using WordPress because it was quick and easy to maintain. One of the first things I tried with WP 3.0 is the new HTML5 support and the video tag. It works pretty well – if you go to videos, you will see a set of Bluetorch TV videos that will play anywhere (so far). I also have a Flash video fallback in case the video tag is not supported (just for you IE).

If you look through my biography information, you will see that I have some pictures that are included in the posts and you can click on them for higher resolution. Some support this and some do not, depending on whether I had a higher resolution image to begin with.

More posts are coming and I will adding a new page for my scuba diving very soon.

Thanks,

Ralph