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

• HTML5 Video Player comparison chart
• PROJECKKTOR
• VideoJS

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

• FFmpeg (http://ffmpeg.org) Windows compiled virsion that I used : http://ffmpeg.zeranoe.com/builds/win32/static/ffmpeg-20120421-git-9849515-win32-static.7z
• Windows compiled version of qt-faststart ( http://multimedia.cx/eggs/improving-qt-faststart/) http://notboring.org/downloads/video/qt-faststart.zip

Android 2.x + compatible video encoding references

• http://alien.slackbook.org/blog/re-encoding-video-for-android/
• http://ffmpeg.org/trac/ffmpeg/ticket/387?cversion=1&cnum_hist=6
• http://diveintohtml5.info/video.html (Using Handbrake to create Mobile friendly h264 video)

I tried to search the solution myself when I first developed Hana FLV player. I remember that all the players had the capability to display the first frame of video , but the problem was that they were downloading the complete movie even if the video is not set to be played automatically. So the file was silently downloaded in the background even when the user was not watching the video. And that could be a big bandwidth waste if the video file is big in size. So at that time, I was trying to solve this problem by implementing an option to define a splash image file. But it was another manual job that everybody hated including me.

Now, I did spend quite time researching on this issue. I had some hints from the Flowplayer forum, and here is the long waited solution!

This only works with Flowplayer v3 (player=”4″). Once it initiates the download , it will stop buffering after 1 second. If you want to increase the 1 second delay, change ’1000′ to something else. It’s in miliseconds. So you should multiply the delay seconds by 1000. For example, 5 seconds would be 5000. It means, the video data will be downloaded for 5 seconds.

Copy below tag into your post and do some testing . Let me know if you have any questions.

[hana-flv-player
video="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv"
player="4"
autoload="true" autoplay="false"
more_4="onStart: function() { 
   if (!this.bufferingStopped){
      if (!playersArray) var playersArray=new Array();
      playersArray.push(this.id());
      setTimeout( function() { name=playersArray.shift(); $f(name).stopBuffering(); },  1000 );
      this.bufferingStopped = true; 
   }  	
}" /]

Here are the Flowplayer forum links that I used as references.

http://flowplayer.org/forum/2/10163

http://flowplayer.org/demos/plugins/streaming/first-frame.html

Now before you submit your website, it is important to generate sitemap. The Sitemaps protocol allows a webmaster to inform search engines (not only Google) about URLs on a website that are available for crawling. It is made of XML file listing all the files in your website indicating their importance (priority) and  change frequency.

Here is a sample Sitemap XML file.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">	<url>
		<loc>http://wpmarketing.org/</loc>
		<lastmod>2009-10-13T12:28:17+00:00</lastmod>
		<changefreq>daily</changefreq>
		<priority>1.0</priority>
	</url>
	<url>
 
		<loc>http://wpmarketing.org/privacy-policy/</loc>
		<lastmod>2009-10-14T04:40:51+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.6</priority>
	</url>
	<url>
		<loc>http://wpmarketing.org/2009/10/top-5-wordpress-plug-in-for-internet-marketing-all-in-one-seo-pack/</loc>
 
		<lastmod>2009-10-13T12:28:17+00:00</lastmod>
		<changefreq>monthly</changefreq>
		<priority>0.4</priority>
	</url>
	<url>
		<loc>http://wpmarketing.org/2009/08/fighting-adblock/</loc>
		<lastmod>2009-10-13T04:58:18+00:00</lastmod>
 
		<changefreq>monthly</changefreq>
		<priority>0.2</priority>
	</url>
 
        <!-- cutting off . It's too long to show here -->
 
	<url>
		<loc>http://wpmarketing.org/about/</loc>
		<lastmod>2009-08-05T12:08:20+00:00</lastmod>
		<changefreq>weekly</changefreq>
		<priority>0.6</priority>
	</url>
 
</urlset>

Basically, it is not that difficult to create the file, but tedious and lots of labor may be involved if done by hand manually. Especially for the blog site with frequent article posting, you will need a plug-in for that which would update the Sitemap automatically. So here is Google XML Sitemaps plug-in.

Basically his plug-in will create a XML-Sitemap of your WordPress blog. It will include all the WordPress pages and posts and even external pages that you defined. The sitemap is automatically updated whenever you modify any page or post, so it’s just convenient. It also notifies Google, Bing, Yahoo, and Ask.com automatically. You can’t ask for more.

It works pretty well right after the activation, but it is possible that you may need to create a file named sitemap.xml and/or sitemap.xml.gz in your WordPress root path and make them writable by webserver (If you are using Hosting providers with up-to-date system, you wouldn’t have problem).  And the default settings are good enough so you should not do anything else. But if you want to rebuild the sitemap, click on the ‘rebuild the sitemap manually’ link marked with Red box in the above image.

By default, Google XML sitemaps is automatically calculate the priority of each posts using the comment count of the posts. If you want to custom define the priority,  you can select ‘Do not use automatic priority calculation’ option in the ‘Post Priority’ group box.

Then you can use Priorities group box to specify custom priorities.

You can easily check the sitemap by adding ‘sitemap.xml’ at the end of your WordPress URL. For example , http://wpmarketing.org/sitemap.xml . Here is the output.

Now that you have the sitemap ready,  you can go to your Google Webmaster Tool account and add your sitemap.

One extra feature would be nice – To be able to define priority per post and page. I hope the author is planning to add this feature soon.

Next plug-in will be about Plug-in for Google Analytics. Google Analytics is a free web statistics application provided Google.

Thank you for visiting wpmarketing.org

* Google XML Sitemaps Website : http://www.arnebrachhold.de/projects/wordpress-plugins/google-xml-sitemaps-generator/

* References: List of other Sitemap generator tools (Not just for WordPress): http://code.google.com/p/sitemap-generators/wiki/SitemapGenerators

1. All in One SEO Pack : SEO is important. It’s the most important part of the website maintenance. and the most difficult. Main SEO tasks consist of managing title tag, and keyword  and description meta tag. Especially I think title tag and description meta tag are important.  ‘All in One SEO Pack’ plug-in make it very easy to maintain out of the box. You can define title , keyword, and description not only for your blog but for every articles using the article’s content. You can specifically define them manually or the plug-in will automatically generate them using tags and categories.  This is the most popular plug-in for SEO.

Once activated you will need to update the settings in the ‘All in One SEO’ sub menu under Settings. You will need to select enable and fill out the Home Title, Description, and Keywords.  For the other options, you can just use the default settings.

I think more important feature is that you can define individual settings per post. Without this feature, a WordPress blog will have the same keyword and descriptions throughout all the sub pages. That’s really terrible for the SEO.

There are other numerous SEO plug-ins in the WordPress website. ‘Headspace’ is another popular SEO plugin-in, but it’s a little bit more complicated than ‘All in One SEO’. 

I highly recommend ‘All in One SEO’ and you will see the results right away if your website has not been SEO optimized before. I had an experience that the traffic was increased about 20% after the plug-in installation. Be patient, the traffic increase was started about a week later.

If you know any other good SEO plug-in, let me know.

Next plug-in is about Google Analytics.

Thank you for visiting wpmarketing.org

1. PHP code content evaluation
Some modification on PHP evaluation that you can use <?php and ?> within the entry content for PHP evaluation.

So, in the previous version, if you wanted PHP code output, you could not use <?php and ?>. But now you can use them inside the entry item.

Previously you could only define PHP codes only.

print "<div style='border:1px dotted red; padding: 5px;'>";
print date("m/d/Y H:i:s");
print "</div>";

But now, below code will work too.

<div style='border:1px dotted red; padding: 5px;'>
<?php print date("m/d/Y H:i:s");?>
</div>

2. Custom ShortCode
Also extra feature for custom short code is added. You can define your own custom short code prefix and post fix. So you don’t have to use [hana-code-insert] shortcode any more.

If defined, custom short code format can be used instead of [hana-code-insert name='Entry Name' /]. For example, if you define {{ for start indicator, }} for end indicator, you can use {{Entry Name}}. But beware, your new shortcode format may conflict with other plugins and cause one or more plugins to fail.

There are some restrictions. ^ and \ characters are not allowed. And start and end indicators should not be used part of entry name. HTML comment tag is a good candidate for the customs shortcodes indicators. (Start indicator <!-- , End indicator : -->) In this way, even if the Hana Code Insert is disabled, these shortcodes will not show this way.

Hana Code Insert Admin Setting Screen.

Some of the tested custom Short Codes in a post.

===================
[[testing123]]
===================
~~testing123~~
===================
{{testing123}}
===================
This time it uses html comment.
<!-- testing123 -->
===================
 
[ hana-code-insert name='testing123' /]

Below is the output. Note that [hana-code-insert] always works regardless of whether using customs shortcode or not.

I am planning to implement Text Widget Support and enhancement in the Admin settings screen in the next version. (Additional description to recognize code snippet better, Search Fuction, etc..)

Enjoy! Let me know if you experience any problem.