Support Video for All Browsers by Adding MediaElement.js to Hana Flv Player

About a month ago I started to fix issues for my WordPress Plugin  , Hana Flv Player, which the problem was related to the latest WordPress version 3.3.1. Fortunately, I was able to fix it pretty fast by searching the Internet, thanks to the Google. I haven’t been looked at my plugin for a while because I thought it had pretty much all the necessary features to play video files. Basically it’s a plugin that contains GPL licensed flash video players. And WordPress users can easily embed Flash videos with simple shortcode.

But while I was working on the bug, I realized that Flash is not supported by Apple’s iOS which means my Hana Flv Player would not run the videos under Apple devices. That would be really terrible for the WP users who are using my plugin since the Apple devices are really popular these days.

So I started to check the latest technology and found that iOS Safari browser is capable of handling HTML5 <video> tag. Then I checked what HTML5 <video> tag’s capabilities are. Basically it allows browsers to show the video without Flash. Great! And there are already many GPL HTML5 players out there, so I decided to include one of them to provide my plugin users an option to support all the browsers out there.

I have checked out various HTML5 players , but at last, I choose MediaElement.js as the solution because

  1. It successfully supports video to run under all the browsers including Firefox, Chrome, Safari, Internet Explore, iPod, iPhone, iPad, and Android (phone and tablets).
  2. Seems to be actively maintained in github https://github.com/johndyer/mediaelement
  3. Flash player as fall back for non HTML5 video supporting browsers. What I really liked about this is that it was developed as part of the project, has no watermark whatsoever, and the flash players controls are not part of the flash but all CSS and Javascript controlled, so the same design look can be maintained throughout all the browsers whether it support HTML5 or not. (Other HTML5 players were packaged with 3rd party Flash Player which is not GPL licensed or with the company’s unremovable watermark. )
  4. According to the MediaElement.js homepage, they say if video is encoded with H.264 (mp4 container) , all browsers are supported. Then there is no need to encode the same file to several different encoded files to support native HTML5 function and browsers playing capabilities.

Okay, I was naive thinking simply implementing the MediaElement.js according to the instruction would complete it. I didn’t fully tested the functions such as “AUTOPLAY” and under Android devices. ( Unfortunately, I do not have any Apple devices , so I couldn’t test it anyway) But apparently there were minor issues with MediaElement.js.

First, ‘autoplay’ attribute of video tag was not acting correctly just with three major browsers (IE, Firefox, Chrome) . It appears that this was caused by the browser issue. After several trial and errors , I was able to fix this.

Second, ‘autoplay’ attribute is not working under iPhone, iPad , and Android OS. According to the Internet search, the autoplay feature are intentionally blocked for Android and iOS to prevent any unwanted high data bandwidth usage charge. But the problem was that the video itself was not responding at all.  So I have added a javascript routine to activate autoplay attribute only if the client browser is a non mobile version.

Third, I had added a feature (using ‘more_5’ attribute to the hana-flv-player tag) to define additional options for MediaElement.js player. ( See “Player Options” of MediaElement.js website for available options) For example, you can add or remove parts of the video control buttons by assigning options in ‘more_5’ attribute. Below example shows only play and pause control button and set the volume 20% of the max sound volume.

[hana-flv-player 
    video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
    description="Hana is having fun while sleding"
    width='500' height='autow'
    player="5"
    more_5="features: ['playpause'],startVolume: 0.2" 
 /]

Fourth, Google Analytics event tracking feature is enabled for MediaElement.js. It was previously available only for FlowPlayer v3. By using Event Tracking, you are able to track how many times the video is watched and when it was paused. For more information about event tracking setup and usage, check this forum article.

Finally, I tested with my Android 2.2 phone and Android 3.1 Honeycomb. Note that the video does play inline (in browser webpage) with Android 3.1 but it plays in a separate popup video player when runs with Android 2.2 phone. Also I found that all of my H.264 encoded videos didn’t play in Android 2.2 phone. So I had to check out the Internet for the right solutions.

Android 2.x is very sensitive about the video encoding and only processes video files with video encoding of H.264 Baseline protocol (avc1)  and audio encoding of AAC. I further searched the resources how to generate such video files with the free and popular FFmpeg video command line tool. Using FFmpeg is not an easy task with such many available arguments. It is really hard to find the correct arguments. Note that you also need to run qt-faststart to move video metadata into the first section of the video, so the player can show them right away without full downloading the movie. Also there is a free version of Any Video Convert commercial software which automatically use these encodings when converted to MP4 movie. (See more information about this in forum post

And here is the answer that I found for generating video files for Android 2.x (Video:H.264 Baseline , Audio: AAC). input.flv is the original video file that is used as input file of ffmpeg. The output file is output.mp4. However, since you still need to run the qt-faststart, the output-final.mp4 is the actual final mp4 file.

ffmpeg  -i  input.flv -vcodec libx264 -vprofile baseline -threads 0 -acodec aac -sameq -preset fast -strict -2 output.mp4
 
qt-faststart output.mp4 output-final.mp4

So to summarize , you must set below options to serve video under all browsers and platforms when using Hana Flv Player.

  1. Use Hana Flv Player player 5 ? MediaElement.js
  2. All videos must be encoded with Video:H.264 Baseline and Audio: AAC

I am still feeling the testing is incomplete that I couldn’t test with iPhone and/or iPad, but you can test and let me know if you find any issues. And maybe I will get iPhone after my current wireless phone plan expires.

Please leave comment if you have any questions. Here are some of the references that helped me while I worked on this implementation.

Thank you for using my WordPress Plugin and reading my blog article.

 

Other HTML5 video player reference and video players

Android 2.x + compatible video creation open source software download Links

Android 2.x + compatible video encoding references

  1. Peter says:

    Hi HanaDaddy,

    Is there a way to play just a clip of a video file, i.e. specify start and end time. Preferably with MediaElement.js.

    Thanks,

    Peter

  2. HanaDaddy says:

    Hello, in fact , it appears there is a way to do this.
    Here is a sample snippet that plays video at 15 seconds and stops at 20 seconds. It works pretty good with HTML5 but have some issues with fallback flash player.

    By the way, I don’t have a plan to implement this kind of feature in to my “Hana Flv Plugin” yet.

    <video width="480" height="320" id="player1" src="http://wpmarketing.org/video/echo-hereweare.mp4"  controls="controls"></video>
    <script>
    $('#player1').mediaelementplayer({
        success: function (mediaElement, domObject) {
     
            mediaElement.addEventListener('loadedmetadata', function(e){
                mediaElement.setCurrentTime(15);
     
            }, false);
            mediaElement.addEventListener('timeupdate', function(e) {
                if(mediaElement.currentTime >= 20) {
                    mediaElement.pause();
                }
                //show the current play time in the div.
                $('#current-time').html(mediaElement.currentTime);
            }, false);
        }
    });
    </script>
    <div id='current-time'></div>
  1. There are no trackbacks for this post yet.

Leave a Reply