Solved

Adding play/stop feature to a Flash video

Posted on 2008-10-06
12
1,453 Views
Last Modified: 2013-11-13
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
0
Comment
Question by:P1ST0LPETE
  • 6
  • 4
  • 2
12 Comments
 
LVL 22

Accepted Solution

by:
fredshovel earned 500 total points
ID: 22654633
To get Flash controls you have to make your video into an FLV file -- NOT SWF.
You can do this in a number of ways, like either converting your SWF flash file or just converting any video to FLV in an encoder like SUPER.
An FLV file virtually tells the video file to go look for a Flash Player -- which is called an FLV player.
So you have to upload an FLV player to your directory so it can play your FLV video with controls.
You can download the flvplayer.swf here: http://www.jeroenwijering.com/upload/mediaplayer-3-14.zip
It's zipped so you unzip it and just extract the flvplayer.swf file-- nothing else.
Then you make a page in your HTML (web editor) editor like this:
(Notice I like to put the player and the video in sub-directories like "video" and  "misc")

<embed width="448" height="361" type="application/x-shockwave-flash" wmode="transparent"
src="http://YOUR_WEBSITE/misc/flvplayer.swf?file=http://YOUR_WEBSITE/video/YOUR_VIDEO.flv"></embed>

NOTE:
Don't make seperate lines like above or add any extra spaces -- EE has put this into seperate lines but just keep it all together without any extra spaces -- other that the space after "embed"
Don't forget to change YOUR_WEBSITE AND YOUR_VIDEO.
 
0
 
LVL 7

Expert Comment

by:kishoregp
ID: 22656433
flash video as in flv file, there is also a component called flvplayer in flash.
u can use that and customize it as u need.
0
 
LVL 7

Expert Comment

by:kishoregp
ID: 22656451
0
 
LVL 22

Expert Comment

by:fredshovel
ID: 22657357
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?
0
 
LVL 10

Author Comment

by:P1ST0LPETE
ID: 22660911
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-shockwave-flash" wmode="transparent"
src="FlashPlayer/player.swf?file=Video/myvideo.flv"></embed>
</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>

Open in new window

0
 
LVL 10

Author Comment

by:P1ST0LPETE
ID: 22661061
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:
<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>

Open in new window

0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 10

Author Comment

by:P1ST0LPETE
ID: 22662107
Ok, figured out the flashvars thing.  They are added like so:

flashvars="controlbar=none&autostart=true"

Still having problems loading the video though.  Any Ideas?
0
 
LVL 10

Author Comment

by:P1ST0LPETE
ID: 22663139
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-stream
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.

0
 
LVL 22

Expert Comment

by:fredshovel
ID: 22663456
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.
0
 
LVL 10

Author Comment

by:P1ST0LPETE
ID: 22670291
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-shockwave-flash"
      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-shockwave-flash"
      wmode="transparent"
      src="misc/player.swf?file=video/myvideo.flv"
      flashvars="controlbar=none&autostart=true&screencolor=FFFFFF">
</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.
0
 
LVL 10

Author Closing Comment

by:P1ST0LPETE
ID: 31503546
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.
0
 
LVL 22

Expert Comment

by:fredshovel
ID: 22672703
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-shockwave-flash" wmode="transparent"
src="http://microsoft.com/misc/flvplayer.swf?file=http://microsoft.com/video/billgates.flv"></embed>





0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
I have been doing hardcore actionscripting for some time; and needless to say I have faced a lot of problems in just understanding others' code rather than understanding what the code executes. A programmer's life can become hell when there are a lo…
The goal of the tutorial is to teach the user how to select which audio input to use. Once you have an audio input plugged into the laptop or computer, you will go into the audio input settings and choose which audio input you want to use.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now