We help IT Professionals succeed at work.

Need assistance generating video on website

288 Views
Last Modified: 2012-05-11
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
Comment
Watch Question

Mark BradyPrincipal Data Engineer
CERTIFIED EXPERT

Commented:
I have never done that before but I would imagine the easiest way would be to create two floating divs and set them to "position:absolute". In the first instance, place the div that will hold the video on your page first.
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.
Mark BradyPrincipal Data Engineer
CERTIFIED EXPERT

Commented:
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.
Mark BradyPrincipal Data Engineer
CERTIFIED EXPERT

Commented:
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-repeat;
}
.golfBall {
position      :absolute;
left            :0px;
top            :0px;
width            :273px;
height            :281px;
background      :url("ball.png");
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="video"></div>
<div class="golfBall"></div>
</body>

Author

Commented:
Hi elvin66,
    That's excellent but could you show me with a media window embedded? That's exactly what I need.

Cheers
Principal Data Engineer
CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
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
Mark BradyPrincipal Data Engineer
CERTIFIED EXPERT

Commented:
Hey no problem. Glad you got it working!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.