Adding play/stop feature to a Flash video
Experts,
I'm completely new to Flash. I have a flash video that I want to add to the website I'm working on. I would like to add some functionality to the video. On several websites I've seen, such as when someone inserts a youtube video into their blog, the video is a bit greyed out with a grey transparent play button sitting ontop the video. Also I have seen where if you hover your mouse over the video, pause/stop options will pop up allowing the user to stop the video if they wish. How is this play/pause/stop functionality accomplished?
Note, having a constantly visible play/pause/stop option bar sitting above/below the video is not an option in this current circumstance.
Thanks for the help,
Pete
I'm completely new to Flash. I have a flash video that I want to add to the website I'm working on. I would like to add some functionality to the video. On several websites I've seen, such as when someone inserts a youtube video into their blog, the video is a bit greyed out with a grey transparent play button sitting ontop the video. Also I have seen where if you hover your mouse over the video, pause/stop options will pop up allowing the user to stop the video if they wish. How is this play/pause/stop functionality accomplished?
Note, having a constantly visible play/pause/stop option bar sitting above/below the video is not an option in this current circumstance.
Thanks for the help,
Pete
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
What's your point kishoregp? He said he's a beginner. You going to help him with a line of text and a cut-and-paste?
ASKER
Fredshovel, thanks for the help......got a few questions for ya:
I followed your instructions. My video guy who recorded the video actually gave me a .swf and a .flv version of the video, so didn't have to do any conversions :-) Anyway, downloaded the player, extracted all the files. I didn't see any that were exactly titled "flvplayer.swf", but there was one titled "player.swf", so I went with that. I copied/pasted your section of code from your first post and made some changes to the file structure to align with my setup. Currently it looks like this:
<div id="video">
<embed width="448" height="361" type="application/x-shockw
src="FlashPlayer/player.sw
</div>
The player seems to load just fine, but when I click on it to get it to start play I get the error:
Video not found: Video/myvideo.flv
I'm, not sure what is causing this. I know my file path is correct, as on the exact same page I have a flash object accessing the .swf version of the video which is sitting in the exact same file folder as the .flv version of the video. (to get a better understanding on what I'm talking about see attached code snippet.)
Anyway, any ideas as to why i'm getting that error?
Also, is there a way to get the video to auto play on page load, without having to click on it? I like the simple click to pause/restart (which is exactly what I was after), but I need the video to auto play.
Also, is there a way to make the control bar under the video invisible? All I want to see is the video, no controls.
I followed your instructions. My video guy who recorded the video actually gave me a .swf and a .flv version of the video, so didn't have to do any conversions :-) Anyway, downloaded the player, extracted all the files. I didn't see any that were exactly titled "flvplayer.swf", but there was one titled "player.swf", so I went with that. I copied/pasted your section of code from your first post and made some changes to the file structure to align with my setup. Currently it looks like this:
<div id="video">
<embed width="448" height="361" type="application/x-shockw
src="FlashPlayer/player.sw
</div>
The player seems to load just fine, but when I click on it to get it to start play I get the error:
Video not found: Video/myvideo.flv
I'm, not sure what is causing this. I know my file path is correct, as on the exact same page I have a flash object accessing the .swf version of the video which is sitting in the exact same file folder as the .flv version of the video. (to get a better understanding on what I'm talking about see attached code snippet.)
Anyway, any ideas as to why i'm getting that error?
Also, is there a way to get the video to auto play on page load, without having to click on it? I like the simple click to pause/restart (which is exactly what I was after), but I need the video to auto play.
Also, is there a way to make the control bar under the video invisible? All I want to see is the video, no controls.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Video.aspx.cs" Inherits="Video" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
#spacer
{
height: 30px;
}
#video
{
border: solid 1px red;
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="video">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="350" height="310" align="right">
<param name="movie" value="Video/devin.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="Video/devin.swf" width="350" height="310" align="right" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</div>
<div id="spacer"></div>
<div id="video">
<embed width="448" height="361" type="application/x-shockwave-flash" wmode="transparent"
src="FlashPlayer/player.swf?file=Video/Devin.flv"></embed>
</div>
</form>
</body>
</html>
ASKER
Ok, did some digging, and discovered flashvars :-).
Looks like controlbar="none" and autostart="true" are the mains ones I'm after. However, they don't seem to be working the way I'm using them. Am I to apply them within the <embed> tag? This is what I currently have:
Looks like controlbar="none" and autostart="true" are the mains ones I'm after. However, they don't seem to be working the way I'm using them. Am I to apply them within the <embed> tag? This is what I currently have:
<div id="video">
<embed width="448" height="361" controlbar="none" autostart="true" type="application/x-shockwave-flash" wmode="transparent"
src="FlashPlayer/player.swf?file=Video/myvideo.flv"></embed>
</div>
ASKER
Ok, figured out the flashvars thing. They are added like so:
flashvars="controlbar=none
Still having problems loading the video though. Any Ideas?
flashvars="controlbar=none
Still having problems loading the video though. Any Ideas?
ASKER
Ok, been doing some further discovery as to why I can't get the video to play.
I've learned that there is a problem with IISv6.0 on windows server 2003, with it not supporting the .flv MIME type by default. I've created a test html page on my local machine using the player.swf and my flv video file and it works just fine when I load the page off of my desktop. When I load it from the server is where the problems come into play. I've found several different sources dicussing this problem, all giving solutions about adding a flv MIME type to IIS, which I have done, but the problem persists
On my IIS server, in the MIME type section I added a new MIME type with the Extension = .flv and I have tried the following MIME type values:
flv-application/octet-stre
application/octet-stream
video/x-flv
Each time I changed the settings to one of the above (3) MIME types, I would reset IIS before attempting to load my page. All attempts thus far have failed.
I've learned that there is a problem with IISv6.0 on windows server 2003, with it not supporting the .flv MIME type by default. I've created a test html page on my local machine using the player.swf and my flv video file and it works just fine when I load the page off of my desktop. When I load it from the server is where the problems come into play. I've found several different sources dicussing this problem, all giving solutions about adding a flv MIME type to IIS, which I have done, but the problem persists
On my IIS server, in the MIME type section I added a new MIME type with the Extension = .flv and I have tried the following MIME type values:
flv-application/octet-stre
application/octet-stream
video/x-flv
Each time I changed the settings to one of the above (3) MIME types, I would reset IIS before attempting to load my page. All attempts thus far have failed.
It's a bit of a diversion from my code, so it's hard for me to say what's going on. If you want a simple flash video without controls you just make a page pointing to an swf file.
Cheers.
Cheers.
ASKER
Well, I've got what I want; I just can't get it to run on the server.
The code you posted is this:
<embed
width="448"
height="361"
type="application/x-shockw
wmode="transparent"
src="http://YOUR_WEBSITE/misc/flvplayer.swffile=http://YOUR_WEBSITE/video/YOUR_VIDEO.flv">
</embed>
My code is basically this:
<embed
width="400"
height="300"
type="application/x-shockw
wmode="transparent"
src="misc/player.swf?file=
flashvars="controlbar=none
</embed>
I did want a video to run without controls for the most part, but if a user left clicks on the video, it will pause play and another left click will start the play again. This is pretty much what I wanted, and it works perfectly when I run it off my local machine.
The problem however, is getting .flv files to work on my server. Anytime I try to access a .flv file, I get the response "file not found" or some http 404 error. I've even tried testing the web accessibility of the files by going to http://mywebsite/video/myvideo.flv and I get the same errors "HTTP 404". However, I can access any other files in the video folder, such as .swf .js .html etc.
At this point, I just need direction on how to get the .flv files working on a Windows Server 2003 running IIS vs 6.
The code you posted is this:
<embed
width="448"
height="361"
type="application/x-shockw
wmode="transparent"
src="http://YOUR_WEBSITE/misc/flvplayer.swffile=http://YOUR_WEBSITE/video/YOUR_VIDEO.flv">
</embed>
My code is basically this:
<embed
width="400"
height="300"
type="application/x-shockw
wmode="transparent"
src="misc/player.swf?file=
flashvars="controlbar=none
</embed>
I did want a video to run without controls for the most part, but if a user left clicks on the video, it will pause play and another left click will start the play again. This is pretty much what I wanted, and it works perfectly when I run it off my local machine.
The problem however, is getting .flv files to work on my server. Anytime I try to access a .flv file, I get the response "file not found" or some http 404 error. I've even tried testing the web accessibility of the files by going to http://mywebsite/video/myvideo.flv and I get the same errors "HTTP 404". However, I can access any other files in the video folder, such as .swf .js .html etc.
At this point, I just need direction on how to get the .flv files working on a Windows Server 2003 running IIS vs 6.
ASKER
Thanks for the help. I'll start a new thread on the FLV files not working, as it is a different problem, and you answered the problem stated in the topic of this thread.
Hey Pistol Pete,
Just to absolutely clarify:
Suppose your website was http://microsoft.com
Ok, so you'd be a billionare -- but stay with me:
Then you made 2 directories on it say:
http://microsoft.com/misc
http://microsoft.com/video
And then you made an FLV video and called it billgates.flv -- you upload this to the http://microsoft.com/video directory.
And then you upload the flvplayer.swf to http://microsoft.com/misc
If you do exactly that -- no modifications -- and then make a page with this code and upload it to your pages directry, it should work. Your code then should look exactly like this:
<embed width="448" height="361" type="application/x-shockw
src="http://microsoft.com/misc/flvplayer.swf?file=http://microsoft.com/video/billgates.flv"></embed>
Just to absolutely clarify:
Suppose your website was http://microsoft.com
Ok, so you'd be a billionare -- but stay with me:
Then you made 2 directories on it say:
http://microsoft.com/misc
http://microsoft.com/video
And then you made an FLV video and called it billgates.flv -- you upload this to the http://microsoft.com/video directory.
And then you upload the flvplayer.swf to http://microsoft.com/misc
If you do exactly that -- no modifications -- and then make a page with this code and upload it to your pages directry, it should work. Your code then should look exactly like this:
<embed width="448" height="361" type="application/x-shockw
src="http://microsoft.com/misc/flvplayer.swf?file=http://microsoft.com/video/billgates.flv"></embed>
u can use that and customize it as u need.