asked on Need assistance generating video on website
Hi,
I have a video in wmv format and need a little help. I need to generate an image of a golf ball, and embed mmy video as a rounded shape within the golf ball, which is compatible with all browsers. I have however no idea where to start.
Can anyone point me in the right direction and show me?
Cheers
I have a video in wmv format and need a little help. I need to generate an image of a golf ball, and embed mmy video as a rounded shape within the golf ball, which is compatible with all browsers. I have however no idea where to start.
Can anyone point me in the right direction and show me?
Cheers
HTMLJavaScriptMultimedia Programming
Last Comment
Mark Brady
Instead of "cutting out the shape" of the video in the golf ball image you will need to cut it out so it's on a new layer, then change the opacity so it is showing but very lightly then save that image as a .png file. That should show the golf ball on top of the video but ghostly looking. I'll try and make an example for you and post it in a few minutes.
Here is a small example. The golfball has had the middle of it cut out and made 50% transparent. On the page I placed the first file (the octopus) then the golf ball div so it shows what is beneath. If you replaced the octopus with a video and sized the video to suit then you should get the correct results.
Here is the result
http://www.bnsrecords.net/tutorials/test/test.html
Here is the code I wrote:
<html><head>
<style type="text/css">
.video {
position :absolute;
left :0px;
top :0px;
width :260px;
height :214px;
background :url("octopus.gif");
background-repeat:no-repea
}
.golfBall {
position :absolute;
left :0px;
top :0px;
width :273px;
height :281px;
background :url("ball.png");
background-repeat:no-repea
}
</style>
</head>
<body>
<div class="video"></div>
<div class="golfBall"></div>
</body>
Here is the result
http://www.bnsrecords.net/tutorials/test/test.html
Here is the code I wrote:
<html><head>
<style type="text/css">
.video {
position :absolute;
left :0px;
top :0px;
width :260px;
height :214px;
background :url("octopus.gif");
background-repeat:no-repea
}
.golfBall {
position :absolute;
left :0px;
top :0px;
width :273px;
height :281px;
background :url("ball.png");
background-repeat:no-repea
}
</style>
</head>
<body>
<div class="video"></div>
<div class="golfBall"></div>
</body>
ASKER
Hi elvin66,
That's excellent but could you show me with a media window embedded? That's exactly what I need.
Cheers
That's excellent but could you show me with a media window embedded? That's exactly what I need.
Cheers
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Hi Elvin, I actually got it working by adding a table with a cellbackground image, then adding the media player within the cell centralised and that worked fine! Thanks though, points to you as you pointed me in the right direction with the overlay divs.
Cheers
Cheers
Hey no problem. Glad you got it working!
Then place the div with the golf ball image over top of the first div and set it's background property to "transparent". If you take the golf ball into photoshop and cut out the part you want the video to show through first.
When you place the 2nd div on the page it should show the video beneath it. Let me know if you don't understand.