PDA

View Full Version : Embedded mp4 file controls


Golden Child
06-06-2011, 03:54 PM
Hello,

I embedded a basic mp4 movie file into my webpage. However, when I embed the file and launch the site in a browser, the mp4 just starts playing automatically without any of the standard pause or play buttons. What do I have to put into my html code for the mp4 to have standard play and pause buttons? Here is my html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body>
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab" WIDTH="160" HEIGHT="136" >
<PARAM NAME="src" VALUE="videofilename.mp4" >
<PARAM NAME="autoplay" VALUE="true" >
<EMBED SRC="../../../T of D/T of D Media/WheatonEditP.mp4" TYPE="image/x-macpaint"
PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="320" HEIGHT="272" AUTOPLAY="true"></EMBED>
</OBJECT></body>
</html>


Thanks.

domedia
06-06-2011, 05:31 PM
You need to load a player of some sorts.

johnMoss
06-07-2011, 12:24 AM
Try setting autoplay to 'false'. The site call should capture that & load a start button by default. If not, lemme know...

Golden Child
06-07-2011, 03:03 PM
Try setting autoplay to 'false'. The site call should capture that & load a start button by default. If not, lemme know...

When I set the autoplay to "false", the video just no longer plays and still doesn't have the start button.

You need to load a player of some sorts.

Can you direct me to a nice looking player?

johnMoss
06-07-2011, 03:28 PM
<embed src=""../../../T of D/T of D Media/WheatonEditP.swf" TYPE="image/x-macpaint" width="320" height="272" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" </EMBED>

Note that in the above I renamed your file to a flash file. I don't know about quicktime, but if you can convert your mp4 into a flash (.swf), the above code will give you precisely what you want in terms of function.

Golden Child
06-07-2011, 04:50 PM
So there is currently no way to put an mp4 file into a webpage with working buttons without converting it to a swf? :confused:

domedia
06-07-2011, 04:57 PM
Maybe a simple solution like Soundcloud would work for you?
http://soundcloud.com
There are a lot of services like that online. They let you upload any kind of audio file and code to embed it to your website.

If you want something custom, get a hold of Adobe Flash (pro version) which let's you build a player and convert sound

Golden Child
06-07-2011, 05:04 PM
I'm working with a video mp4 file on a Mac. It's looking like I might have to buy one of these mp4 to swf/flv software packages that allow you to design better layout controls for your videos. I think all of these software packages cost money and aren't downloadable for free.

johnMoss
06-07-2011, 05:09 PM
This should work...

<EMBED SRC="../../../T of D/T of D Media/WheatonEditP.mp4" TYPE="image/x-macpaint"
PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="320" HEIGHT="272" AUTOPLAY="false" CONTROLLER="true"></EMBED>

johnMoss
06-07-2011, 05:12 PM
I just edited, make sure you use the final edit, my opening tag was improper on the first...

Golden Child
06-07-2011, 05:48 PM
The buttons still aren't working. I'm going to have to download one of those video to swf/flv programs anyway because I need the player to look nice and professional because it's going to be on a business website. What video/mp4 to swf/flv programs for Mac are the best? Does anyone here know?

domedia
06-07-2011, 05:58 PM
I'm working with a video mp4 file on a Mac. . Just upload it to youtube, and grab their embed code.

domedia
06-07-2011, 06:00 PM
I'm going to have to download one of those video to swf/flv programs anyway because I need the player to look nice and professional because it's going to be on a business website. What video/mp4 to swf/flv programs for Mac are the best? Does anyone here know?

In that case either outsource it, or get Flash Pro (and make sure you know ho to use it and the separate video converter software that comes with it).
(or youtube :) )

johnMoss
06-07-2011, 06:08 PM
The buttons still aren't working.

So the player buttons showed up at the bottom but they don't function?

gentleone
06-07-2011, 06:19 PM
This should work...

<EMBED SRC="../../../T of D/T of D Media/WheatonEditP.mp4" TYPE="image/x-macpaint"
PLUGINSPAGE="http://www.apple.com/quicktime/download" WIDTH="320" HEIGHT="272" AUTOPLAY="false" CONTROLLER="true"></EMBED>
I would definately check this code in all browsers. I might be wrong, but I think Safari doesn't support only embed scr.

I would recommend something like this:
http://mediaelementjs.com/

It works on the iPhone and iPad too and has a fallback to Flash and Silverlight for (older) browsers that doesn't support the <audio> and <video> tag.
And of course you'll have to use the HTML5 doctype.

domedia
06-07-2011, 07:26 PM
I would definately check this code in all browsers. I might be wrong, but I think Safari doesn't support only embed scr. It's a tag from the Netscape days :)

johnMoss
06-07-2011, 07:43 PM
It's a tag from the Netscape days :)

True... conversion to flash was a better option, but now that mediaElement post above has got flash beat for sure...

Golden Child
06-07-2011, 07:54 PM
Okay. I chose another route to launch my video on my website. I used a software program by Doremisoft to convert my mp4 into a swf file with a more polished looking control panel of movie buttons. The swf works and looks fine when launched in Flash. However, when I embed the file into the site using a standard code, the movie background is blank white instead of portraying the opening video graphic. What do I need to change in my html to fix this:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>

<body><object id="whatever" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0">
<param name="src" value="example.swf"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="quality" value="best"/>
<embed name="whatever" src="../Movies/DoremiSoft Studio/WheatonEditP-20110607-151910/WheatonEditP.swf" width="400" height="300" bgcolor="#FFFFFF" quality="best" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>
</body>
</html>


Thanks again.

Golden Child
06-07-2011, 08:15 PM
Alright. I figured that one out myself. I put bgcolor="none". I guess a better question would be how do I put a static preview image into the player so it won't just have a plain black background before you click the play button?

johnMoss
06-07-2011, 09:48 PM
With background set to none, I'm going to assume that means transparent, in which case the containing div can be given a background image in it's CSS. That should work. Create an image set to the size of the player & plug it in...

Golden Child
06-07-2011, 09:51 PM
With background set to none, I'm going to assume that means transparent, in which case the containing div can be given a background image in it's CSS. That should work. Create an image set to the size of the player & plug it in...

Thanks for responding. How exactly can you do that?