Page 1 of 1
Using alpha blended transitions in windowless mode
Posted: 22 Apr 2013 05:59
by troycarr88
Question-- I'm experimenting with the Mozilla plugin in windowless mode on Windows 7. I'm showing a series of videos one after another by deleting and creating <embed> objects for VLC in Javascript and attaching/removing them from the DOM as I go. For the most part, it's working well. The only thing I'm having trouble with are transitions. I have a transparent <div> over the whole thing, and towards the end of each video, I smoothly transition the div from transparent to opaque over 1.5 seconds, do my vlc swap while no one can see behind it, then fade it back to transparent to reveal the new video. This is all done with CSS transitions and the idea is to simply "dip to black" between videos.
However, it appears VLC can't handle semi-transparent items on top of it. When the opacity hits the 50% mark, VLC appears/disappears, depending on which direction the transition is going. I'm guessing alpha blending just isn't supported in the very new windowless mode. If I'm right on this, any plans to add this support, or am I stuck with hard cuts between vids? Anyone have ideas on how to accomplish the same thing, if this doesn't work?
- Troy
Re: Using alpha blended transitions in windowless mode
Posted: 22 Apr 2013 12:26
by Jean-Baptiste Kempf
Nice setup.
VLC version used? Browser?
Re: Using alpha blended transitions in windowless mode
Posted: 22 Apr 2013 17:52
by troycarr88
It was a long day...sorry to leave out critical info. Version 2.0.6 of VLC. Firefox 20.0.1. Win 7 64bit.
Re: Using alpha blended transitions in windowless mode
Posted: 24 Apr 2013 02:03
by Jean-Baptiste Kempf
Can you share a simple sample page? (or a complex one)
Re: Using alpha blended transitions in windowless mode
Posted: 26 Apr 2013 17:29
by troycarr88
Here you go. You will need to replace the "target" parameter of vlc with a URL to a video file.
Once you get it loaded, notice that when you move your mouse over the blue area, it fades down and up smoothly. VLC, in contrast, pops in and out of being visible. One thing that was incorrect in my original post-- VLC is fully visible if the opacity of the item above it is less than 1.0. I had originally said 0.5.
Also, I tested the same code with Flash and it works, so I think I've eliminated it being a general problem of Firefox plugins.
Code: Select all
<html>
<head>
<style>
.mask {
position: absolute;
background-color: #FFF;
top: 8px;
left: 8px;
z-index: 1;
height: 400px;
width: 200px;
opacity: 0;
transition: opacity 1.0s ease-in-out;
}
.mask:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<embed type="application/x-vlc-plugin" width="200" height="200" autostart="true" target="some video file" windowsless="true" controls="false" />
<div style="height: 200px; width: 200px; color: #FFF; line-height: 200px; background-color: #00A;">Move your mouse here</div>
<div class="mask"></div>
</body>
</html>
Re: Using alpha blended transitions in windowless mode
Posted: 11 Jun 2014 06:22
by agrilledfish
I've been running into the same problem with firefox, chrome and IE on Windows 7. I'm trying to display subtitles over a VLC plugin video, but they only show up if I give the div with the subtitles a non-transparent background.
and
Code: Select all
background-color:rgba(255,255,255,0.6); result in the subtitles being hidden under the window.
It seems that VLC windowless mode can't deal with any kind of alpha at all. Is there any workaround for this?
Re: Using alpha blended transitions in windowless mode
Posted: 11 Jun 2014 07:27
by RSATom
Code: Select all
<embed type="application/x-vlc-plugin" width="200" height="200" autostart="true" target="some video file" windowsless="true" controls="false" />
how about use "windowless" instead of "windowsless" ?