VideoHelp Forum
+ Reply to Thread
Results 1 to 13 of 13
Thread
  1. Member
    Join Date: Jan 2012
    Location: Budapest
    Search Comp PM
    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!
    Quote Quote  
  2. Originally Posted by Stears555 View Post
    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.
    Last edited by _Al_; 1st Jun 2012 at 20:41.
    Quote Quote  
  3. Member
    Join Date: Jan 2012
    Location: Budapest
    Search Comp PM
    Originally Posted by _Al_ View Post
    Originally Posted by Stears555 View Post
    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" ?
    Last edited by Stears555; 2nd Jun 2012 at 04:33.
    Quote Quote  
  4. Originally Posted by Stears555 View Post
    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.
    Quote Quote  
  5. Member
    Join Date: Jan 2012
    Location: Budapest
    Search Comp PM
    Originally Posted by _Al_ View Post
    Originally Posted by Stears555 View Post
    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?
    Last edited by Stears555; 2nd Jun 2012 at 14:56.
    Quote Quote  
  6. Originally Posted by Stears555 View Post
    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.
    Quote Quote  
  7. Member
    Join Date: Jan 2012
    Location: Budapest
    Search Comp PM
    Originally Posted by _Al_ View Post
    Originally Posted by Stears555 View Post
    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.
    Quote Quote  
  8. I cannot log in, but nevermind, ignore some flowplayer demos do it easy yourself

    -place those 3 files into your root on your server
    Code:
    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
    Code:
     <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.... "/"
    Last edited by _Al_; 3rd Jun 2012 at 16:02.
    Quote Quote  
  9. Member
    Join Date: Jan 2012
    Location: Budapest
    Search Comp PM
    <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!
    Quote Quote  
  10. Member TreeTops's Avatar
    Join Date: May 2010
    Location: Oregon
    Search Comp PM
    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
    Quote Quote  
  11. ok, this one should work:
    Code:
    <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.
    Quote Quote  
  12. Member
    Join Date: Jan 2012
    Location: Budapest
    Search Comp PM
    Originally Posted by _Al_ View Post
    ok, this one should work:
    Code:
    <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?
    Quote Quote  
  13. according to this web page: http://flowplayer.org/demos/configuration/accelerated.html just adding one line into html:

    accelerated: true

    Code:
    <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
    Last edited by _Al_; 9th Jun 2012 at 22:53.
    Quote Quote  



Similar Threads