Wordpress

[Hana Flv Player] How to insert video step by step guide

Posted in Wordpress Plugins on April 5th, 2013 by HanaDaddy – 2 Comments

I just got some questions regarding how to use my Hana Flv Player Plugin (For the ones that are not familar, this is one of the top WordPress Video player plugins 🙂 ). It was started as a simple plugin and it was pretty simple to use first, but has come a long way and now it could be kind of confusing after the installation. So I created this quick simple guide.

Requirements

  • You need to install and activate Hana Flv Player.
  • You need to have FLV or mp4 video file in your desktop or if it’s already in your site, you need to know the exact full URL of your flv or mp4 video file.

 

1. Make  sure Hana Flv Player is activated under Plugins admin menu.image

2. Now create a new post . Goto Posts-> Add New. Click on the quick tag tool bar button named “Hana Flv”. A new dialog window will pop up.
picture1

3. This window will help you create short tag to be used within the body of the post. In this window, you can define the video URL, Description , Which video player to use, width and height of the video player , and many other options. After defining options, you can click the “OK” button . Then the corresponding short tag will appear in the body of content text field.

picture2

4. Right now, “Video URL” field is the only mandatory attribute data. In the “Video URL” field, you can insert full video URL manually or you can upload a video from your PC or select video file by using the default media library interface. Click on the “Upload or Browse Video”. You can upload or browse the video file to use. Then click the “Insert into Post” button. This will insert the URL of the video file into the “Video URL field” of the Hana Flv Video dialog.

picture4

5. Now it’s basically ready . If you want, you can select or define other options. Once you are done, click on the “OK” button.  picture5

6. Now the appropriate shortcode is created in the post.  You may click on the  “Preview” button to see the preview.image

You don’t need to use the Dialog but directly copy and paste the example shorttag from the Hana Flv Player settings page, then edit as you needed.

[hana-flv-player 
    video="http://wpt.aws.af.cm/wp-content/plugins/hana-flv-player/babyhana.flv"
    width="400"
    height="320"
    description="Sarah is having fun in a merry-go-round"
    clickurl="http://wpt.aws.af.cm"
    clicktarget="_blank"
    player="4"
    autoplay="false"
    loop="false"
    autorewind="true"
    splashimage="http://wpt.aws.af.cm/wp-content/plugins/hana-flv-player/splash.jpg"
    skin=""
/]
 
Another sample of auto height
[hana-flv-player 
    video="http://wpt.aws.af.cm/wp-content/plugins/hana-flv-player/sarah.flv"
    width="350"
    height=""
    description="Sarah is having fun at the beach"
    player="4"
/]
 
This is a sample of HTML5 player with mp4 video file playing
[hana-flv-player 
    video="http://wpt.aws.af.cm/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
    description="Hana is having fun while sleding"
    player="5"
    autoplay="false"
    autoload="true"
    loop="true"
 /]

Attributes explained:

  • video: URL of the flv video file. This is mandatory.
  • width: Width of the Flash player.
  • height: Height of the Flash player. If not defined, automatically calculated using 4:3 ratio. If 16:9 ratio is needed, use ‘autow’ as height.
  • description: Description of the video. This will be shown when the_excerpt() is used. Also it is used within the SWF objects or javascripts, so search engines can read it.
  • clickurl: If you want to open a website when a user clicks on the video, you can define the target website URL here.
  • clicktarget: The target of the URL when clicking on the video. Same window:_self, New window _blank
  • player: If set to “1” , OS FLV will be used. If set to “2”, FlowPlayer will be used. “3” is for FLV Player Maxi. “4” is for FlowPlayer 3(3.2.3). “5” is for MediaElement.js HTML5 player. “6” is for FlowPlayer 5 HTML5 player.
  • autoload: If true, the movie will be loaded (downloaded). If false, the starting screen will be blank since no video is downloaded.
  • autoplay: If true, the movie will play automatically when the page is loaded.
  • loop: If Loop is true, the movie will replay itself constantly.
  • autorewind: If AutoRewind is true, the cursor will be reset to the start of the movie when the movie is ended.
  • skin: Automatically used if player 5 (MediaElement.js) or player 6 (FlowPlayer 5) is used. Example: mejs-ted, mejs-wmp
  • splashimage: Only works with FlowPlayer and FLV player Maxi. When autoload is off, this splash image will be shown in the player. It only supports JPEG images.
  • more_2: more options for the Flow Player v2.
  • more_3: more options for the Flv Player.
  • more_4: more options for the Flow Player v3.
  • more_5: more options for MediaElement.js.

Thank you for using my plugin! Bye.

Hana FLV Player v3.0.0 update – HTML5 support

Posted in Wordpress, Wordpress Plugins on December 5th, 2012 by HanaDaddy – 9 Comments

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)

Here are the showcases of the included skins.

MediaElement.js

[hana-flv-player 
video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4" 
width="400" height="autow"  
player="5" skin="" /]

[hana-flv-player 
video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4" 
width="400" height="autow" description="" player="5" 
player="5" skin="mejs-ted" /]

[hana-flv-player video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
width="400" height="autow" 
player="5" skin="mejs-wmp" /]

[hana-flv-player video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
width="400" height="autow"
player="5" skin="onedesign" /]

FlowPlayer 5

[hana-flv-player video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
width="400" height="autow"
player="6" skin="minimalist" /]

[hana-flv-player video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
width="400" height="autow"
player="6" skin="functional" /]

[hana-flv-player video="http://wpmarketing.org/wp-content/plugins/hana-flv-player/hana_sleding.mp4"
width="400" height="autow"
player="6" skin="playful" 
splashimage="http://wpmarketing.org/wp-content/plugins/hana-flv-player/splash.jpg" /]

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

Posted in Wordpress, Wordpress Plugins on May 6th, 2012 by HanaDaddy – 2 Comments

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