Hello, it’s been awhile. I just updated Hana FLV Player to version 3.0.0 from 2.9.3. Major updates are skin function support and addition of FlowPlayer version 5.2 HTML5 player.
MediaElement.js and FlowPlayer support skin functions and come with few predefined skins. I added ‘skin’ attribute to Hana FLV Player to use those skin functions.
FlowPlayer is very popular for a powerful open source flash player, and now the new version 5.2 is HTML5 player even supports all the browsers. It’s open source but the free version shows a little FLowPlayer logo in the left bottom. But it is very promising HTML5 player and I am sure it will live up to its previous version’s glory. However, I personally prefer MediaElement.js myself for now.
Also, during the search for any customized version of skins, I found one from OneMedia. The author ‘Daniel’ specifically allowed to use for any purpose without any attribution. I really appreciate for it. I included the css and necessary files in my plugin, so you can just use it by using MediaElement.js player and skin name ‘onemedia’. See the example below.
Here are the 3.0.0 changelogs.
Updated MediaElement.js player with the latest v2.10.0
Added support for the latest FlowPlayer v5.2
Skin support for MediaElement.js and FlowPlayer v5.2
Added custom MediaElement skin prepared by OneDesign (http://www.onedesigns.com/freebies/custom-mediaelement-js-skin)
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
It successfully supports video to run under all the browsers including Firefox, Chrome, Safari, Internet Explore, iPod, iPhone, iPad, and Android (phone and tablets).
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.
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.
description="Hana is having fun while sleding"
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.
So to summarize , you must set below options to serve video under all browsers and platforms when using Hana Flv Player.
Use Hana Flv Player player 5 ? MediaElement.js
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
For me, I think my affected site was basically dropped because of “keyword stuffing” and unrelated keyword linking service that I used out of desperation that the site’s ranking was dropping quickly early this year. Here is the sample of unrelated keyword link.
I personally believe Google has done the right thing, what should have been done already. Effective spam site detection and removal will guarantee the better search results and promote White Hat SEO with high quality contents, so we can all benefit from it. Cheers !
Thinking of getting Wordpress Hosting? Then choose Hostgator. Make sure you select the shared hosting account - Baby package . It's the most affordable and fully featured package. You can even host multiple domains with the same account.
Hostgator provides the best environment for PHP application (64 MB of PHP memory) and stable system. I am using other hosting services, but Hostgator is the best. Link Directly to Shared Web Hosting Page