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

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.

  1. Kieran Daly says:

    Hi

    I installed your player on this website http://redwindenergy.co.uk/test and it plays on all browsers except IE

    Do you know how this can be fixed?

    thanks in advance

    Kieran

  2. HanaDaddy says:

    Hello
    Using the chrome browser’s inspect element menu, I see that somehow SVG files are blocked.

    GET http://redwindenergy.co.uk/wp-content/plugins/hana-flv-player/mediaelement/build/bigplay.svg 404 (Not Found) jquery.js:2
    GET http://redwindenergy.co.uk/wp-content/plugins/hana-flv-player/mediaelement/build/controls.svg 404 (Not Found)

    Maybe this is causing the problem. Edit the file http://redwindenergy.co.uk/wp-content/plugins/hana-flv-player/mediaelement/build/mediaelementplayer.mod.css and
    replace “bigplay.svg” to “bigplay.png”
    replace “controls.svg” to “controls.png”

    Then try again!

  1. There are no trackbacks for this post yet.

Leave a Reply