No, I don't use flash. All HTML 5.

As I say, I can, and do, do this now using the video editing features in Photoshop CS 5.5 (and earlier). Just mask as normal and PS renders a video with transparency in the corners just as it would in, say, a PNG file. PS is smart that way. The video shows nice and rounded and transparent in all the corners and my complex web page background shows thru all nicey nicey.

But this makes each video edit a 3 render job: 1 for the base vid, 1 in PS for the rounded, transparent corners, and a collection of others in a post process to support HTML5 (MP4, WebM, and blah blah outputs).

I'd like to remove the PS step. If PS can render a vid with transparent corners, I'm pretty sure VP can do it too. I'm just too dumb to know how at the moment.

S.

I guess, I was incomplete in my reply. The video above was rendered with square corners (i.e. without photoshop masking). The rounding occurred entirely in the html. Here 'tis:

    <div style="width: 1024px; margin: 0 auto; background: url(Images/html5.gif) repeat;

        text-align: center; padding-bottom: 50px; -moz-border-radius: 15px; border-radius: 15px;">

        <h1 style="text-align: center">

            HTML5 Testing</ h1>

        <video  style="-moz-border-radius: 8px; border-radius: 8px;" width="640" height="360" autoplay controls>

        <source src="Videos/Horse.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

        <source src="Videos/Horse-FF.ogv" type='video/ogg; codecs="theora, vorbis"' />    

        <source src="Videos/Horse.webm" type='video/webm; codecs="vp8, vorbis"' />

    </video>

    </div>

...Jerry

Jerry:

I see what you're saying, and the idea is great; a simple and reasonable and nicely tailor-able solution. But...it doesn't work in Chrome, which is my main browser. (Interestingly, it DOES work in Chrome...for just a moment. And then it goes square-cornered. Would have been a GREAT solution, too.).

So...I'm kinda back where I started.

Anything else?

S.

Bummer! I just spent about a half hour doing some Google research and it appears others are equally stumped here: http://stackoverflow.com/questions/6238451/rounded-corners-on-html5-video

I thought maybe this might be solved using jQuery, but couldn't readily come up with a solution. Plus jQuery is not my strong suit.

...Jerry

Is there, perhaps, any answer that lies within VP itself? Masking or child layers or some such?

Anyone?

This seems to work: http://www.jazzythedog.com/testing/monkey.html

Same trick as with Flash - create a .png mask with a transparent center and outside border the same color as the webpage background. In this case #FFFF6F.



Somewhat kludgy... there may be better solutions.

....Jerry

btw: The above link doesn't work in Firefox as I only rendered to .mp4 video format.
btw2: Don't forget the levels expansion when playing h.264 videos

That's what I hate about anything having to do with working with the Internet. Eventually, it always comes down to some unclean thing involving goats blood and heinous acts at midnight by a full moon.

Thanks fer trying'.

S.

"Eventually, it always comes down to some unclean thing involving goats blood and heinous acts at midnight by a full moon.Ha! I guess my statement "Somewhat kludgy" was the understatement of the day!! [grin]

...Jerry

First off, I haven't tried this, but here are some things I'd be looking for:

--Does the codec you're rendering to actually support an alpha channel?
-----Is there a setting for this in the Render settings dialog?
--Is there a specific matte mode, like premultiplied, that you need to pay attention to?
--We know Flash can play video with alpha. I think that's with the VP6 codec and not h.264. Although you don't want to use Flash, there might still be some clues online.

And although the HTML5 corners route isn't working in Chrome, since you say it works for a second, there must be a solution.

<edit> When I right click the video in firefox and chose "Save video as..." it offers to save the .ogv version. In Chrome it offers to save the .mp4 version. So the two browsers are playing two different files. Maybe that affects whether the corners work.

btw, you can get a lot of information out of Chrome, IE, and Firefox by opening the Developer Tools windowpane (or equivalent). You might need to add it in to Firefox but Chrome and IE include it.</edit>