SamuelMiller
asked on
Best method for embedding flv file on webpage.?
Hi,
What is the easiest, most broadly supported way to embed flv on a web page. I am familiar with how to embed swf files using swfobject. Is it possible to use swfobject to play flv directly? If not, what is the best, and ideally free, solution then?
Thanks,
Sam
What is the easiest, most broadly supported way to embed flv on a web page. I am familiar with how to embed swf files using swfobject. Is it possible to use swfobject to play flv directly? If not, what is the best, and ideally free, solution then?
Thanks,
Sam
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks both for the helpful info!
If one can play a flv file through the players suggested why and when would someone use a swf to play an external FLV. And, if doing so doesn't add much more download time, why not use swfobject to handle flv?
Thanks,
Sam
If one can play a flv file through the players suggested why and when would someone use a swf to play an external FLV. And, if doing so doesn't add much more download time, why not use swfobject to handle flv?
Thanks,
Sam
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sorry, I should have clarified that better.
Sadly, I don't believe (at least most) browsers are able to play FLV files directly. They need to be played in some sortof player.
With Flash Professional, you generate a SWF file that can be used by the browser. In fact, FLV stands for "FLash Video". The FLV format was made by Adobe (the creators of Flash) to be used with SWF files and Flash Professional.
I haven't used it myself, but I'm guessing that FlowPlayer is some sort of video player originally made in Flash Professional and exported to SWF format.
Flash Professional contains several templates for playing video files (just check out the links I put in my previous post) so all you need to do is drag a "Video Component" onto the main area, and specify the video file you want to play. Then, you click "Publish" and it will generate a SWF file containing the video that you can embed onto your site.
And if you learn ActionScript (the coding language of Flash) you have A LOT more control over what happens, and you can do things like automatically browse to your website or display a contact form when the video finishes playing. There are tons of opportunities available to you if you learn ActionScript. :)
Sadly, I don't believe (at least most) browsers are able to play FLV files directly. They need to be played in some sortof player.
With Flash Professional, you generate a SWF file that can be used by the browser. In fact, FLV stands for "FLash Video". The FLV format was made by Adobe (the creators of Flash) to be used with SWF files and Flash Professional.
I haven't used it myself, but I'm guessing that FlowPlayer is some sort of video player originally made in Flash Professional and exported to SWF format.
Flash Professional contains several templates for playing video files (just check out the links I put in my previous post) so all you need to do is drag a "Video Component" onto the main area, and specify the video file you want to play. Then, you click "Publish" and it will generate a SWF file containing the video that you can embed onto your site.
And if you learn ActionScript (the coding language of Flash) you have A LOT more control over what happens, and you can do things like automatically browse to your website or display a contact form when the video finishes playing. There are tons of opportunities available to you if you learn ActionScript. :)
If you decide to take the ActionScript route, and want to do some extra coding, Adobe released a free online book "Programming ActionScript 3.0".
This chapter specifically talks about FLV files, but if you want to learn ActionScript, the entire book is a great resource:
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e1a.html
However, if you are just creating a simple video player in Flash Professional, you likely won't need ActionScript at all.
This chapter specifically talks about FLV files, but if you want to learn ActionScript, the entire book is a great resource:
http://help.adobe.com/en_US/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e1a.html
However, if you are just creating a simple video player in Flash Professional, you likely won't need ActionScript at all.
ASKER
Again thanks both for the very helpful information.
IqAndreas are you saying that the flv players out there are actually swf players that don't require you to export the flash with is own swf file. You just need the flv file to play it with a flv player. In other words, the flv players acts as a "swf" container?
Sam
IqAndreas are you saying that the flv players out there are actually swf players that don't require you to export the flash with is own swf file. You just need the flv file to play it with a flv player. In other words, the flv players acts as a "swf" container?
Sam
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Wow, nice diagram! Very clear! Definitely answered my question.
Here is an interesting tutorial the uses SWFObjects and the MPW player, an open-source flv player, to play flv files: http://net.tutsplus.com/tutorials/other/how-to-play-video-using-an-open-source-player/
In the words of the tutorial: "The advantage of embedding the flv player with SWFObjects is that allows us to use a placeholder image or text in case the user doesn’t have flash or javascript. A big reason for this is many computers or devices like the iPhone don’t have Flash or JavaScript enabled."
Swfobject also uses uses "JavaScript to detect Flash Player and avoid broken SWF content, and is designed to make embedding SWFs as easy as possible." (http://www.adobe.com/devnet/flashplayer/articles/swfobject.html)
It looks like Flowplayer comes with it own api file flowplayer-3.1.4.min.js as an alternative to the opensource SWFobject (http://flowplayer.org/documentation/installation/index.html).
What attracts me to the SWFobject + open-source Flv player method is that there is no branding on the player. I don't have Flash professional, but the person who is providing the videos for the site I am working, might. If he does, I will also explore that option as describe by Andreas.
I've got plenty to work with for now, but I may be back with more questions.
Thanks again,
Sam
Here is an interesting tutorial the uses SWFObjects and the MPW player, an open-source flv player, to play flv files: http://net.tutsplus.com/tutorials/other/how-to-play-video-using-an-open-source-player/
In the words of the tutorial: "The advantage of embedding the flv player with SWFObjects is that allows us to use a placeholder image or text in case the user doesn’t have flash or javascript. A big reason for this is many computers or devices like the iPhone don’t have Flash or JavaScript enabled."
Swfobject also uses uses "JavaScript to detect Flash Player and avoid broken SWF content, and is designed to make embedding SWFs as easy as possible." (http://www.adobe.com/devnet/flashplayer/articles/swfobject.html)
It looks like Flowplayer comes with it own api file flowplayer-3.1.4.min.js as an alternative to the opensource SWFobject (http://flowplayer.org/documentation/installation/index.html).
What attracts me to the SWFobject + open-source Flv player method is that there is no branding on the player. I don't have Flash professional, but the person who is providing the videos for the site I am working, might. If he does, I will also explore that option as describe by Andreas.
I've got plenty to work with for now, but I may be back with more questions.
Thanks again,
Sam
ASKER
Great responses. Fast and detailed.
SWF Object can be used both when using a custom FLV player (such as MPW Player, which is definitely a precompiled SWF), and when using your own custom SWF for playing the FLV file.
It's actually SWF Object which instructs the SWF (see the right part of the above diagram) where it can find the FLA file.
You can do the same and keep the FLA file separate even when creating your own custom SWF, but it is a lot easier to just embed it.
By default, when you publish a SWF in Flash Professional, it generates a sample "HTML wrapper" for it that uses SWF Object to correctly position and scale the SWF onto the webpage, and will also include (as you found) a notification to install Flash if it is not found on the system.
There is some more information on SWFObject on this page
http://www.gotoandlearn.com/play?id=77
Those video tutorials are aimed more at developers, so you don't have to watch the whole thing, but I if I remember correctly, I believe he does cover the capabilities of SWF Object quite well.
Good luck with your programming,
Andreas
It's actually SWF Object which instructs the SWF (see the right part of the above diagram) where it can find the FLA file.
You can do the same and keep the FLA file separate even when creating your own custom SWF, but it is a lot easier to just embed it.
By default, when you publish a SWF in Flash Professional, it generates a sample "HTML wrapper" for it that uses SWF Object to correctly position and scale the SWF onto the webpage, and will also include (as you found) a notification to install Flash if it is not found on the system.
There is some more information on SWFObject on this page
http://www.gotoandlearn.com/play?id=77
Those video tutorials are aimed more at developers, so you don't have to watch the whole thing, but I if I remember correctly, I believe he does cover the capabilities of SWF Object quite well.
Good luck with your programming,
Andreas
If you don't have Flash Professional, you can download the 30 day trial version and fix something up before it expires. There are literally thousands of videos out there on how to make a Flash video player:
http://www.google.com/#q=as3+video+player+tutorial
Though, for simplicities sake, you might want to upload that FLV to YouTube, and embed their player onto your site. That way, they pay for the bandwidth, and watchers of your video get higher speeds. :)
Good luck with your project,
Andreas