SlideShare une entreprise Scribd logo
1  sur  4
Télécharger pour lire hors ligne
Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player                                     http://reallyshiny.com/tutorials/flash.php




          A Quick and Easy, Dynamic, flv (Flash Video) Player
          If like me, your not much of a flash developer, you’d probably have no idea where to
          start if someone asked you to integrate a flash video player into a website, which can
          play any flv file you want to throw at it (at least I didn’t). Well, I worked out a really
          quick and easy way to do it, and that’s what this tutorials for.

          This tutorial will guide you through the process of making a quick and easy, dynamic
          flv player that can be embedded in an html web page, and play any flv video file you
          want. The video file is specified through the html that inserts the swf into the page, so
          you can very easily set the value with php or whichever scripting language you’re
          using.

          I have written this with someone who is completely new to flash video in mind, so it might cover things you
          already know. Flash video requires either Flash 7 or 8, I will be using 8 in this tutorial, you can get a demo from
          Macromedia. All the tutorial files can be downloaded at the bottom of the page.

          Converting the video
          First you need to get a source video file, and convert it to a Flash video file (flv). Although this player is going to
          be dynamic, I thought it would be beneficial to explain the process of converting a video to the Flash video
          format, and because by importing a video onto the stage, Flash sets up a default player for you, which just makes
          things easier. You can convert the video with the stand-alone Flash video encoder (Flash 8 only), the built in flash
          video encoder (as I will be using) or some other 3rd party tool.

          Load up Flash and create a new “Flash Document”. Now go to File >Import >Import Video. On the first screen,
          click the browse button and pick your source video file, then click next.




          On the next screen you have to select the method you wish to use to deploy your video, I am using progressive
          download, as it’s the simplest, and I don’t have a Flash video streaming server, pick your preferred option, and
          click next.




1 of 4                                                                                                                        12/01/2008 16:44
Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player                                  http://reallyshiny.com/tutorials/flash.php




          You now need to pick the compression settings for this video, this is only specific to this particular video, and if
          you encode another later on, you can have different settings, remember that the player (the swf that you insert
          into your web page) and the video file (flv) are completely separate. I am going to pick “Flash 8 – Low Quality”
          and then in “Advanced Settings”, I’m going to resize the video to 240x180, and set the bit rate to 30kbps (to keep
          it small for the download). Pick your preferred options and click next.

          On the next screen you have to pick a skin for the controls of your player. Its worth noting that these controls are
          also separate from the player swf, and so can be changed later, and even set to different controls dynamically.
          Select your favourite and click next (I am using ClearOverPlaySeekMute.swf).




          The next screen is a confirmation, click finish. You will be asked to save the fla file (Flash Document), and then
          the video will be encoded.

          Setting up the player
          Once the video has been encoded you will be back to the main Flash window. You should resize the document so
          that it is the same size as your video (Modify >Document) and then center the player in the document.




2 of 4                                                                                                                     12/01/2008 16:44
Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player                                    http://reallyshiny.com/tutorials/flash.php




          Now, in the folder you saved the fla file to, you will also have an flv file, that’s the video you just converted. Just
          so you know, its not possible to play flv files directly through the Flash player, instead you either have to create
          your own player (as we are) or get a 3rd party flv player, FLV Player is a good one.

          Now, as we want this player to be dynamic, we don’t want the name of the video file to be hard coded into the
          final swf, so click on the player, and the click the parameters tab in the panel at the bottom of flash.




          You need to find the contentPath option and clear the value. You will also need to give the player a name, this can
          be done by typing a name into the “Instance Name” box on the left hand side of the parameters tab, I’ve called
          mine “player”.

          Now right click on the first frame in the timeline, and click “Actions”, this is where we put the only one line of
          actionscript we need to get a video to load dynamically. In the actions box, type this:
              player.contentPath = file;

          That’s it, the file variable is going to be parsed from the html that’s generated to display the swf file. Now just go
          to File >Publish, and flash will generate your player swf, and its related files.

          The html and the clever bit
          You will now have three more files in the folder where your fla is. You will have an swf of the same name as your
          fla (this is the player), another swf with the same name as the skin you chose, and an html file with the required
          html code you need to insert the player into a web page.

          If you open up the html file, you won’t see the video playing because we cleared the contentPath setting in the
          player, we now need to edit the html file so that it sends the player the file variable, with the name of the flv file
          in.

          Open up the html file in a text editor. After all the param tags within the object tag, add another param tag that
          looks like this, but replace “exhibition-stand.flv” with the name of your flv file



3 of 4                                                                                                                       12/01/2008 16:44
Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player                                     http://reallyshiny.com/tutorials/flash.php


              <param name="FlashVars" value="file=exhibition-stand.flv" />

          Then, in the embed tag, add this attribute:
              FlashVars="file=exhibition-stand.flv"

          My object tag now looks like this:
              <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
              codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/
              flash/swflash.cab#version=8,0,0,0" width="240" height="180" id="exhibition-stand"
              align="middle">
                  <param name="allowScriptAccess" value="sameDomain" />
                  <param name="movie" value="exhibition-stand.swf" />
                  <param name="quality" value="high" />
                  <param name="bgcolor" value="#ffffff" />
                  <param name="FlashVars" value="file=exhibition-stand.flv" />
                  <embed src="exhibition-stand.swf" FlashVars="file=exhibition-stand.flv"
              quality="high" bgcolor="#ffffff" width="240" height="180" name="exhibition-stand"
              align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"
              pluginspage="http://www.macromedia.com/go/getflashplayer" />
              </object>

          Save the file and open it in a browser, and the videos there! As you can see, its now very easy to just specify the
          name of another flv file, and get that to play in the same player. If you mix this html code with a bit of php that
          gets records from a database, you can easily have a dynamic video player that is database driven.




          Notes
          I mentioned earlier that it was possible to make the skin for the player dynamic, and it is. All you need to do is
          clear the skin option from the preferences for the player (like you did with contentPath), and then add this line to
          the action script:
              player.skin = playerSkin;

          Then add this to the FlashVars param tag and attribute:
              &playerSkin=ClearOverPlaySeekMute.swf

          Now you can easily specify a different skin (just make sure you have the skin file in the same directory).

          It’s also worth noting that when specifying relative paths to your flv file, and to the skin file, the path to the flv is
          relative to the folder that the player (swf) is contained in, whereas the path to the skin file is relative to the
          location of the html file that contains the player.

          The end
          I hope that’s helped if you were looking for an easy way to use flash video, without needing to know much at all
          about flash or action script. I’m sure there are probably much better ways to do this, however for the sake of a
          quick solution, this works, and it’s all I needed. Let me know what you think.

          Download Files

                                                          Copyright © 2008 Jack Sleight




4 of 4                                                                                                                        12/01/2008 16:44

Contenu connexe

Tendances

Beef Up Your Website With Audio And Video - It's Easy!
Beef Up Your Website With Audio And Video - It's Easy!Beef Up Your Website With Audio And Video - It's Easy!
Beef Up Your Website With Audio And Video - It's Easy!Melodie Laylor
 
User guide flashnavigationprofessional
User guide flashnavigationprofessionalUser guide flashnavigationprofessional
User guide flashnavigationprofessionalSamir Dash
 
Ubento with own cloud
Ubento with own cloud Ubento with own cloud
Ubento with own cloud schaplinski
 
A R T D M171 Week14 Multimedia
A R T D M171  Week14  MultimediaA R T D M171  Week14  Multimedia
A R T D M171 Week14 MultimediaGilbert Guerrero
 
Implementing xpages extension library
Implementing xpages extension libraryImplementing xpages extension library
Implementing xpages extension librarydominion
 

Tendances (6)

Beef Up Your Website With Audio And Video - It's Easy!
Beef Up Your Website With Audio And Video - It's Easy!Beef Up Your Website With Audio And Video - It's Easy!
Beef Up Your Website With Audio And Video - It's Easy!
 
Tutorial de plex
Tutorial de plexTutorial de plex
Tutorial de plex
 
User guide flashnavigationprofessional
User guide flashnavigationprofessionalUser guide flashnavigationprofessional
User guide flashnavigationprofessional
 
Ubento with own cloud
Ubento with own cloud Ubento with own cloud
Ubento with own cloud
 
A R T D M171 Week14 Multimedia
A R T D M171  Week14  MultimediaA R T D M171  Week14  Multimedia
A R T D M171 Week14 Multimedia
 
Implementing xpages extension library
Implementing xpages extension libraryImplementing xpages extension library
Implementing xpages extension library
 

En vedette

annotation_tutorial_2008
annotation_tutorial_2008annotation_tutorial_2008
annotation_tutorial_2008tutorialsruby
 
collapsible-panels-tutorial
collapsible-panels-tutorialcollapsible-panels-tutorial
collapsible-panels-tutorialtutorialsruby
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>tutorialsruby
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>tutorialsruby
 

En vedette (7)

annotation_tutorial_2008
annotation_tutorial_2008annotation_tutorial_2008
annotation_tutorial_2008
 
phpTutorial1
phpTutorial1phpTutorial1
phpTutorial1
 
bcgr3-jquery
bcgr3-jquerybcgr3-jquery
bcgr3-jquery
 
presentation
presentationpresentation
presentation
 
collapsible-panels-tutorial
collapsible-panels-tutorialcollapsible-panels-tutorial
collapsible-panels-tutorial
 
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting &lt;b>...&lt;/b>
 
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
TopStyle Help &amp; &lt;b>Tutorial&lt;/b>
 

Similaire à flash-flv

MacVide FlashVideo Converter UserGuide
MacVide FlashVideo Converter UserGuideMacVide FlashVideo Converter UserGuide
MacVide FlashVideo Converter UserGuideMacVide
 
Drupal Video Presentation
Drupal Video PresentationDrupal Video Presentation
Drupal Video PresentationEric Michalsen
 
User guide flashonavigation
User guide flashonavigationUser guide flashonavigation
User guide flashonavigationSamir Dash
 
User guide swfseq
User guide swfseqUser guide swfseq
User guide swfseqSamir Dash
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioChristian Heilmann
 
How to convert f4v to flv
How to convert f4v to flvHow to convert f4v to flv
How to convert f4v to flvtenorshare ware
 
Adding flash animation to a website
Adding flash animation to a websiteAdding flash animation to a website
Adding flash animation to a websiteBubblefruit.com
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingbrucelawson
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014RZasadzinski
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingbrucelawson
 
Graphical Animation - Flash Introduction
Graphical Animation - Flash IntroductionGraphical Animation - Flash Introduction
Graphical Animation - Flash IntroductionJamie Hutt
 
Flash, actionscript 2 : preloader for loader component.pdf
Flash, actionscript 2 : preloader for loader component.pdfFlash, actionscript 2 : preloader for loader component.pdf
Flash, actionscript 2 : preloader for loader component.pdfSMK Negeri 6 Malang
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationMatthew Fabb
 
Flash, actionscript 2 : preloader for loader component.docx
Flash, actionscript 2 : preloader for loader component.docxFlash, actionscript 2 : preloader for loader component.docx
Flash, actionscript 2 : preloader for loader component.docxSMK Negeri 6 Malang
 
Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3Saurabh Kheni
 
WordcampNYC 2010 - Wordpress & Multimedia (Updated)
WordcampNYC 2010 - Wordpress & Multimedia (Updated)WordcampNYC 2010 - Wordpress & Multimedia (Updated)
WordcampNYC 2010 - Wordpress & Multimedia (Updated)Digital Strategy Works LLC
 

Similaire à flash-flv (20)

MacVide FlashVideo Converter UserGuide
MacVide FlashVideo Converter UserGuideMacVide FlashVideo Converter UserGuide
MacVide FlashVideo Converter UserGuide
 
Php2pdf
Php2pdfPhp2pdf
Php2pdf
 
Drupal Video Presentation
Drupal Video PresentationDrupal Video Presentation
Drupal Video Presentation
 
User guide flashonavigation
User guide flashonavigationUser guide flashonavigation
User guide flashonavigation
 
User guide swfseq
User guide swfseqUser guide swfseq
User guide swfseq
 
Multimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audioMultimedia on the web - HTML5 video and audio
Multimedia on the web - HTML5 video and audio
 
FVCP Ad Words
FVCP Ad WordsFVCP Ad Words
FVCP Ad Words
 
How to convert f4v to flv
How to convert f4v to flvHow to convert f4v to flv
How to convert f4v to flv
 
Adding flash animation to a website
Adding flash animation to a websiteAdding flash animation to a website
Adding flash animation to a website
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
 
Audio and Video Streaming
Audio and Video StreamingAudio and Video Streaming
Audio and Video Streaming
 
HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014HTML5 video & Amazon elastic transcoder - FCIP August 2014
HTML5 video & Amazon elastic transcoder - FCIP August 2014
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
 
Graphical Animation - Flash Introduction
Graphical Animation - Flash IntroductionGraphical Animation - Flash Introduction
Graphical Animation - Flash Introduction
 
Flash, actionscript 2 : preloader for loader component.pdf
Flash, actionscript 2 : preloader for loader component.pdfFlash, actionscript 2 : preloader for loader component.pdf
Flash, actionscript 2 : preloader for loader component.pdf
 
Html5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentationHtml5 Video Vs Flash Video presentation
Html5 Video Vs Flash Video presentation
 
Flash, actionscript 2 : preloader for loader component.docx
Flash, actionscript 2 : preloader for loader component.docxFlash, actionscript 2 : preloader for loader component.docx
Flash, actionscript 2 : preloader for loader component.docx
 
Beginning WordPress
Beginning WordPressBeginning WordPress
Beginning WordPress
 
Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3Replacing flash with HTML5 and CSS3
Replacing flash with HTML5 and CSS3
 
WordcampNYC 2010 - Wordpress & Multimedia (Updated)
WordcampNYC 2010 - Wordpress & Multimedia (Updated)WordcampNYC 2010 - Wordpress & Multimedia (Updated)
WordcampNYC 2010 - Wordpress & Multimedia (Updated)
 

Plus de tutorialsruby

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008tutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheetstutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascripttutorialsruby
 

Plus de tutorialsruby (20)

&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml_basics
xhtml_basicsxhtml_basics
xhtml_basics
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
xhtml-documentation
xhtml-documentationxhtml-documentation
xhtml-documentation
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa0602690047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
HowTo_CSS
HowTo_CSSHowTo_CSS
HowTo_CSS
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
BloggingWithStyle_2008
BloggingWithStyle_2008BloggingWithStyle_2008
BloggingWithStyle_2008
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 
Winter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20JavascriptWinter%200405%20-%20Advanced%20Javascript
Winter%200405%20-%20Advanced%20Javascript
 

Dernier

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?Igalia
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsJoaquim Jorge
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobeapidays
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...Neo4j
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 

Dernier (20)

Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 

flash-flv

  • 1. Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player http://reallyshiny.com/tutorials/flash.php A Quick and Easy, Dynamic, flv (Flash Video) Player If like me, your not much of a flash developer, you’d probably have no idea where to start if someone asked you to integrate a flash video player into a website, which can play any flv file you want to throw at it (at least I didn’t). Well, I worked out a really quick and easy way to do it, and that’s what this tutorials for. This tutorial will guide you through the process of making a quick and easy, dynamic flv player that can be embedded in an html web page, and play any flv video file you want. The video file is specified through the html that inserts the swf into the page, so you can very easily set the value with php or whichever scripting language you’re using. I have written this with someone who is completely new to flash video in mind, so it might cover things you already know. Flash video requires either Flash 7 or 8, I will be using 8 in this tutorial, you can get a demo from Macromedia. All the tutorial files can be downloaded at the bottom of the page. Converting the video First you need to get a source video file, and convert it to a Flash video file (flv). Although this player is going to be dynamic, I thought it would be beneficial to explain the process of converting a video to the Flash video format, and because by importing a video onto the stage, Flash sets up a default player for you, which just makes things easier. You can convert the video with the stand-alone Flash video encoder (Flash 8 only), the built in flash video encoder (as I will be using) or some other 3rd party tool. Load up Flash and create a new “Flash Document”. Now go to File >Import >Import Video. On the first screen, click the browse button and pick your source video file, then click next. On the next screen you have to select the method you wish to use to deploy your video, I am using progressive download, as it’s the simplest, and I don’t have a Flash video streaming server, pick your preferred option, and click next. 1 of 4 12/01/2008 16:44
  • 2. Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player http://reallyshiny.com/tutorials/flash.php You now need to pick the compression settings for this video, this is only specific to this particular video, and if you encode another later on, you can have different settings, remember that the player (the swf that you insert into your web page) and the video file (flv) are completely separate. I am going to pick “Flash 8 – Low Quality” and then in “Advanced Settings”, I’m going to resize the video to 240x180, and set the bit rate to 30kbps (to keep it small for the download). Pick your preferred options and click next. On the next screen you have to pick a skin for the controls of your player. Its worth noting that these controls are also separate from the player swf, and so can be changed later, and even set to different controls dynamically. Select your favourite and click next (I am using ClearOverPlaySeekMute.swf). The next screen is a confirmation, click finish. You will be asked to save the fla file (Flash Document), and then the video will be encoded. Setting up the player Once the video has been encoded you will be back to the main Flash window. You should resize the document so that it is the same size as your video (Modify >Document) and then center the player in the document. 2 of 4 12/01/2008 16:44
  • 3. Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player http://reallyshiny.com/tutorials/flash.php Now, in the folder you saved the fla file to, you will also have an flv file, that’s the video you just converted. Just so you know, its not possible to play flv files directly through the Flash player, instead you either have to create your own player (as we are) or get a 3rd party flv player, FLV Player is a good one. Now, as we want this player to be dynamic, we don’t want the name of the video file to be hard coded into the final swf, so click on the player, and the click the parameters tab in the panel at the bottom of flash. You need to find the contentPath option and clear the value. You will also need to give the player a name, this can be done by typing a name into the “Instance Name” box on the left hand side of the parameters tab, I’ve called mine “player”. Now right click on the first frame in the timeline, and click “Actions”, this is where we put the only one line of actionscript we need to get a video to load dynamically. In the actions box, type this: player.contentPath = file; That’s it, the file variable is going to be parsed from the html that’s generated to display the swf file. Now just go to File >Publish, and flash will generate your player swf, and its related files. The html and the clever bit You will now have three more files in the folder where your fla is. You will have an swf of the same name as your fla (this is the player), another swf with the same name as the skin you chose, and an html file with the required html code you need to insert the player into a web page. If you open up the html file, you won’t see the video playing because we cleared the contentPath setting in the player, we now need to edit the html file so that it sends the player the file variable, with the name of the flv file in. Open up the html file in a text editor. After all the param tags within the object tag, add another param tag that looks like this, but replace “exhibition-stand.flv” with the name of your flv file 3 of 4 12/01/2008 16:44
  • 4. Really Shiny - A Quick and Easy, Dynamic, flv (Flash Video) Player http://reallyshiny.com/tutorials/flash.php <param name="FlashVars" value="file=exhibition-stand.flv" /> Then, in the embed tag, add this attribute: FlashVars="file=exhibition-stand.flv" My object tag now looks like this: <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/ flash/swflash.cab#version=8,0,0,0" width="240" height="180" id="exhibition-stand" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="exhibition-stand.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="FlashVars" value="file=exhibition-stand.flv" /> <embed src="exhibition-stand.swf" FlashVars="file=exhibition-stand.flv" quality="high" bgcolor="#ffffff" width="240" height="180" name="exhibition-stand" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> Save the file and open it in a browser, and the videos there! As you can see, its now very easy to just specify the name of another flv file, and get that to play in the same player. If you mix this html code with a bit of php that gets records from a database, you can easily have a dynamic video player that is database driven. Notes I mentioned earlier that it was possible to make the skin for the player dynamic, and it is. All you need to do is clear the skin option from the preferences for the player (like you did with contentPath), and then add this line to the action script: player.skin = playerSkin; Then add this to the FlashVars param tag and attribute: &playerSkin=ClearOverPlaySeekMute.swf Now you can easily specify a different skin (just make sure you have the skin file in the same directory). It’s also worth noting that when specifying relative paths to your flv file, and to the skin file, the path to the flv is relative to the folder that the player (swf) is contained in, whereas the path to the skin file is relative to the location of the html file that contains the player. The end I hope that’s helped if you were looking for an easy way to use flash video, without needing to know much at all about flash or action script. I’m sure there are probably much better ways to do this, however for the sake of a quick solution, this works, and it’s all I needed. Let me know what you think. Download Files Copyright © 2008 Jack Sleight 4 of 4 12/01/2008 16:44