Posts Tagged ‘Hana FLV Player’

[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 – Using the first frame of video as the splash image without full buffering

Posted in Wordpress, Wordpress Plugins on February 20th, 2012 by HanaDaddy – Be the first to comment

Flowplayer is the definitely popular free open source Flash player. And I have received a question if it’s possible to use the first frame of the video as the splash image but without loading the full movie.

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