How can I create a FLOWPLAYER-based web-video page?

[Stears555]

Hello guys!

How can I create a FLOWPLAYER-based web-video page? (HTML codes text etc...)

What is Flowplayer Special Embed Customizer? Can it make easier the web video creation?

About Flowplayer Special Embed Customizer: http://www.youtube.com/watch?v=2jx8MkWzC_U

My target to create a "stage video" supported (HW accelerated) web video page with flowplayer.

Thank you!

[_Al_]

What is Flowplayer Special Embed Customizer? Can it make easier the web video creation?

yes, you create html code for customized player,

-download that flowplayer from their site http://flowplayer.org/download/
-you can upload those files into your server, where that path you write into that Flowplayer Special Embed Customizer, you need some ftp client software to upload those files directly from your PC to your hosting server (core ftp, file zilla etc.)
-you upload your video onto your server and you specify path within Flowplayer Special Embed Customizer also
-then you copy html code what Flowplayer Special Embed Customizer gives you and paste into your html page, use some html editor (google some)

I know nothing about stage video, not sure what has to be done on your host server and what providers allow this sort of things. That above is just regular progressive download from your web site , providing you have moov atom on right place in your mp4 and it is allowed, progressive download meaning video will start to play without downloading it as a whole first from your site. We want playback to start right away.

[Stears555]

What is Flowplayer Special Embed Customizer? Can it make easier the web video creation?

yes, you create html code for customized player,

-download that flowplayer from their site http://flowplayer.org/download/
-you can upload those files into your server, where that path you write into that Flowplayer Special Embed Customizer, you need some ftp client software to upload those files directly from your PC to your hosting server (core ftp, file zilla etc.)
-you upload your video onto your server and you specify path within Flowplayer Special Embed Customizer also
-then you copy html code what Flowplayer Special Embed Customizer gives you and paste into your html page, use some html editor (google some)

I know nothing about stage video, not sure what has to be done on your host server and what providers allow this sort of things. That above is just regular progressive download from your web site , providing you have moov atom on right place in your mp4 and it is allowed, progressive download meaning video will start to play without downloading it as a whole first from your site. We want playback to start right away.

Hello!

About Adobe flash STAGE-VIDEO: http://www.adobe.com/devnet/flashplayer/stagevideo.html

Youtube and Vimeo use Adobe stage-video technology (it support HW accelerated flash player playback)
I want use my homepage for the runing of the player, and I want to use archive.org as the source of mp4 file (because archive.org can host 100GB files even in 4K resolutions, therefore it has "unlimited" video-dimension by the means of attributes). My dream is the streaming of AVCHD camcorder files in highest quality. When I transform avchd-camcorder video (with the so-called direct-stream-copy technology) into mp4 container, I can publish it in the same quality as the camcorder file.

But where can I download the "Flowplayer Special Embed Customizer" ?

[_Al_]

But where can I download the "Flowplayer Special Embed Customizer" ?

I don't know, I just watched that 5min or so tutorial. I never used it. I do it manually, meaning creating html code that is being added into your html page then.

Use this web page http://flowplayer.org/demos/installation/index.html ,it is easy to create it yourself without "Flowplayer Special Embed Customizer".
Use demo pages, standalone demo links like this one: http://flowplayer.org/demos/standalone/installation/index.html where usually they have only player alone for the whole page. So it is very clear for beginners. You can use web browsers to look at the html code. For example with Firefox you go Ctrl+U (tools/web developer/ page source).

But you need html editor software, and ftp client software to upload your files on your hosting site.

[Stears555]

But where can I download the "Flowplayer Special Embed Customizer" ?

I don't know, I just watched that 5min or so tutorial. I never used it. I do it manually, meaning creating html code that is being added into your html page then.

Use this web page http://flowplayer.org/demos/installation/index.html ,it is easy to create it yourself without "Flowplayer Special Embed Customizer".
Use demo pages, standalone demo links like this one: http://flowplayer.org/demos/standalone/installation/index.html where usually they have only player alone for the whole page. So it is very clear for beginners. You can use web browsers to look at the html code. For example with Firefox you go Ctrl+U (tools/web developer/ page source).

But you need html editor software, and ftp client software to upload your files on your hosting site.

Hello!

Flowplayer supports stage-video, read about it: http://flowplayer.org/demos/configuration/accelerated.html

A google-created help page for stage-video flowplayer is located here:

http://code.google.com/p/flowplayer-core/source/browse/flowplayer/trunk/test/stage-video.html?r=762



Here are the flowplayer files (thanks for Poisondeathray) http://flowplayer-releases.s3.amazonaws.com/info/dist.html

Which files will be necessary to create a web-video?

[_Al_]

Which files will be necessary to create a web-video?

you only need those 3 files from that zip file I gave you link in my first response, http://releases.flowplayer.org/flowplayer/flowplayer-3.2.11.zip
there are:
flowplayer.controls-3.2.11.swf ... that is for visual look of your player
flowplayer-3.2.10.min.js ... that is script to make your player work
flowplayer-3.2.11.swf ... this is your player

all of them you put into your root on your host site or you can dedicate a folder for them but you should always have to specify path to those within html code you put on your web page. It is explained on flowplayer web site, my second response link, http://flowplayer.org/demos/installation/index.html

I recommend you make it work first and then you can proceed to stage video, hardware acceleration, adding that particular javascript code into your page , (from this link http://flowplayer.org/demos/configuration/accelerated.html ). Basically just adding this:
clip: {
// enable hardware acceleration
accelerated: true
}
But I am not sure if it just works easy like that.

[Stears555]

Which files will be necessary to create a web-video?

you only need those 3 files from that zip file I gave you link in my first response, http://releases.flowplayer.org/flowplayer/flowplayer-3.2.11.zip
there are:
flowplayer.controls-3.2.11.swf ... that is for visual look of your player
flowplayer-3.2.10.min.js ... that is script to make your player work
flowplayer-3.2.11.swf ... this is your player

all of them you put into your root on your host site or you can dedicate a folder for them but you should always have to specify path to those within html code you put on your web page. It is explained on flowplayer web site, my second response link, http://flowplayer.org/demos/installation/index.html

I recommend you make it work first and then you can proceed to stage video, hardware acceleration, adding that particular javascript code into your page , (from this link http://flowplayer.org/demos/configuration/accelerated.html ). Basically just adding this:
clip: {
// enable hardware acceleration
accelerated: true
}
But I am not sure if it just works easy like that.

Hello!

Here is a home-page for the video: http://dictaphone.atw.hu I uploaded a "test.mp4" video to the root.
FTP: Login name: dictaphone
FTP SERVER: ftp.atw.hu
THE password: password123

What's wrong with the video? It can't work.

[_Al_]

I cannot log in, but nevermind, ignore some flowplayer demos do it easy yourself

-place those 3 files into your root on your server

flowplayer.controls-3.2.11.swf ... that is for visual look of your player
flowplayer-3.2.10.min.js ... that is script to make your player work
flowplayer-3.2.11.swf  ... this is your player

-place some video.mp4 into your root on your server
-and place html page there called index.html

 <html>
 <head>
          <title>test - flowplayer</title>
                <!-- flowplayer javascript component -->
     <script src="http://...correct_path_to_your_web_site... /flowplayer-3.2.10.min.js"></script>
      </head>
  <body>
     <!-- player container--> 
<a href="http://...correct_path_to_your_web_site.../video.mp4"    class="player"     style="display:block;width:425px;height:300px;margin:10px auto"     id="player">
     </a>
  <!-- this script block will install Flowplayer inside previous A tag -->
 <script> flowplayer("player", "http://...correct_path_to_your_web_site.../flowplayer-3.2.11.swf"); 
</script>  
</body>  
</html>

because all files are in your root folder perhaps you can just omit absolute path for your files and just state name of those files with slash in front.... "/"

[Stears555]

<html>
<head>
<title>test - flowplayer</title>
<!-- flowplayer javascript component -->
<script src="http://dictaphone.atw.hu/flowplayer-3.2.10.min.js">
</script>
</head>
<body>
<!-- player container-->
<a href="http://dictaphone.atw.hu/konyvtar/test.mp4" class="player" style="display:block;width:425px;height:300px;marg in:10px auto" id="player">
</a>
<!-- this script block will install Flowplayer inside previous A tag -->
<script> flowplayer("player", "http://dictaphone.atw.hu/flowplayer-3.2.11.swf");
</script>
</body>
</html>



Sorry, but it doesn't work!

[TreeTops]

This is what we see:

<html>
<head>
<title>dictaphone</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2"></head>
<frameset rows="62, *" frameborder=NO border=1 framespacing=0 cols=*>
<frame name="topFrame" scrolling=NO noresize src="http://atw.hu/reklam.php?ad=dictaphone&kat=19" frameborder=NO>
<frame name="user" src="http://users.atw.hu/dictaphone/" scrolling=auto>
</frameset>
<noframes>
<body bgcolor=#FFFFFF text=#000000>
<a href="http://users.atw.hu/dictaphone/">http://users.atw.hu/dictaphone/</a>
</body>
</noframes>
</html>


Stop using frames

[_Al_]

ok, this one should work:

<html>
 <head>
          <title>test - flowplayer</title>
                <!-- flowplayer javascript component -->
     <script src="flowplayer-3.2.10.min.js"></script>
 </head>
 
 <body>
     <!-- player container--> 

     <a  class="player"
                          href="http://..path to your video.../video/1.mp4"
                        
                          style="display:block;width:480px;height:270px;">
             
    </a>
  
  <script type="text/javascript">
                       $f("a.player", "flowplayer-3.2.11.swf", {
                           clip: {
       
                              autoPlay: true,
                              scaling: 'fit'
                                 }   
                       });
                      </script>  
</body>  
</html>

There was something wrong with those paths , this way , where flowplayer-3.2.10.min.js script and flowplayer-3.2.11.swf are without path in html code, it seems to work , but of course, these files has to be in the same folder as index.html then. Also I changed that script a bit for possibility to choose autoplay false, scaling 'fit' makes sure video is not stretched to fill monitor screen after full screen view, but it is stretched proportionally right.

[Stears555]

ok, this one should work:

<html>
 <head>
          <title>test - flowplayer</title>
                <!-- flowplayer javascript component -->
     <script src="flowplayer-3.2.10.min.js"></script>
 </head>
 
 <body>
     <!-- player container--> 

     <a  class="player"
                          href="http://..path to your video.../video/1.mp4"
                        
                          style="display:block;width:480px;height:270px;">
             
    </a>
  
  <script type="text/javascript">
                       $f("a.player", "flowplayer-3.2.11.swf", {
                           clip: {
       
                              autoPlay: true,
                              scaling: 'fit'
                                 }   
                       });
                      </script>  
</body>  
</html>

There was something wrong with those paths , this way , where flowplayer-3.2.10.min.js script and flowplayer-3.2.11.swf are without path in html code, it seems to work , but of course, these files has to be in the same folder as index.html then. Also I changed that script a bit for possibility to choose autoplay false, scaling 'fit' makes sure video is not stretched to fill monitor screen after full screen view, but it is stretched proportionally right.

Ok , this works, the problem was the path of the mp4 file, because I gave absolute link for the file "http://".
But exactly where and how can I paste the HW acceleration code into the html?

[_Al_]

according to this web page: http://flowplayer.org/demos/configuration/accelerated.html just adding one line into html:

accelerated: true

<html>
  <head>
           <title>test - flowplayer</title>
                 <!-- flowplayer javascript component -->      
           <script src="flowplayer-3.2.10.min.js"></script>
 </head>    <body>      
<!-- player container-->
        
<a  class="player" href="http://..path to your video.../video/1.mp4"                                                    style="display:block;width:480px;height:270px;">                   
</a>      

<script type="text/javascript">                        
$f("a.player", "flowplayer-3.2.11.swf", 
         {                            
               clip: { autoPlay: true,
                         scaling: 'fit',
                         accelerated: true
                      }                        
         }
    );
 </script>   
</body>
 </html>

notice if you add one line into that clip {} function you have to add comma at the end of previous line, this is common mistake ...,
and as I said before, not sure if just this works, never tried this