Fix black rectangle for HTML video element - css

I'm implementing WebRTC video chat. I want to implement the following case:
By default video element has background-image via css and if there are no video input then user see his (or interlocutor's) avatar:
No video expected result:
No video actual result:
As you can see from the screenshots I have black rectangles above my fancy backgrounds. I want to make this ugly black rectangle transparent and keep my video's backgrounds visible.
Actually it will be awesome to resolve the problem without introducing any additional markup.
Appreciate your help =)
Update:
"No video" means that user/users don't have web cams and stream has only audio track.

Bingo!
Reading documentation in depth gave some results =) It was as easy:
<video poster="image.jpg">
One simple attribute made me happy

Try Alpha transparency in Chrome video or waitUntilRemoteStreamStartsFlowing.
function onaddstream(event) {
remote_video.src = webkitURL.createObjectURL(event.stream);
// remote_video.mozSrcObject = event.stream;
waitUntilRemoteStreamStartsFlowing();
}
function waitUntilRemoteStreamStartsFlowing()
{
if (!(remote_video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA
|| remote_video.paused || remote_video.currentTime <= 0))
{
// remote stream started flowing!
}
else setTimeout(waitUntilRemoteStreamStartsFlowing, 50);
}

Related

How to pause video on last frame in QML?

I'm trying to stop a QML video and show its last frame when playback has finished. Does anybody know how to do this? (Sorry, this seems to be not as trivial as it sounds...)
At the moment, my problem is that the Video element simply becomes invisible/hidden after playback is done. (onVisibleChanged is never called.)
When I use the hack in onStatusChanged in my code, the video disappears for a moment after the end and then shows the end of the video.
What I'm doing is simply:
Video {
anchors.fill: parent
fillMode: VideoOutput.PreserveAspectFit;
source: "path/to/file"
autoPlay: true
onStatusChanged: {
console.warn("StatusChanged:"+status+"|"+MediaPlayer.Loaded)
if (status == MediaPlayer.EndOfMedia)
{
// seek a bit before the end of the video since the last frames
// are the same here, anyway
seek(metaData.duration-200)
play()
pause()
}
}
onVisibleChanged:
{
console.log(visible)
}
}
It's possible that I'm missing something, but I could not find anything on this topic in the docs. Also, using separate MediaPlayer and VideoOutput does not change the behavior.
For the record, I'm using the latest Qt 5.2 on Windows (msvc2010+OpenGL-build).
I'm still looking for a better solution to this. What I've come up with is to pause the video one second before it's over:
MediaPlayer {
autoLoad: true
id: video
onPositionChanged: {
if (video.position > 1000 && video.duration - video.position < 1000) {
video.pause();
}
}
}
Why one second? On my machine if you try to pause it about 500ms before the end, the video manages to run to completion and disappear from view without even registering the pause() call. Thus 1 second is sort of a good safe value for me.
Frankly, I'd prefer if there was a more explicit way to tell the MediaPlayer what to do at the end of the video. I know for a fact that GStreamer, which is what Qt uses on Linux and Mac, notifies you when the video is almost over so that you can decide what to do next - e.g. pause the video or loop it seamlessly.
I share your pain (mainly interested in OSX and iOS, where the same problem occurs). The only solution I have is to pair each video (which at least are "canned" app resources, not dynamic content off the net) with a png image of their final frame. When the video starts, enable display of the image under it (although it's not actually visible at that point). When the video ends abruptly, the image is left visible.
This works perfectly on iOS, but on (some?) Macs there may a slight brightness jump between the video and the image (guessing: something to do with OSX display preferences' screen calibration not affecting video?)
An option to the MediaPlayer or VideoOutput element types to freeze on the last frame would indeed be much simpler.
One other possibility I've considered but not tried would be stacking two videos. The one on top is the main player, but the one underneath would just be seeked to, say, the last millisecond of the video and paused. Then when the main video finishes and disappears... there's as-good-as the final frame of the video showing there underneath. This'd basically be the same as the image-based solution, but with the image underneath being dynamically created using a video player. I've found mobile HW's video and Qt's wrappings of it to be temperamental enough (admittedly more back in the earlier days of Qt5) to really not want to try and do anything too clever with it at all though.
A few years later and I am facing the same issue. However, I found a workaround (for Qt >= 5.9) that allows me to pause the video within 100 ms of the end:
It seems that the issue is related to the notifyInterval property (introduced in Qt 5.9). It is by default set to 1000ms (same as the 1000ms observed in other answers, not a coincidence I believe). Thus, changing it to a very small value when the video is almost done allows for catching a position very close to the end and pausing the video there:
Video {
id: videoelem
source: "file:///my/video.mp4"
notifyInterval: videoelem.duration>2000 ? 1000 : 50
onPositionChanged: {
if(position > videoelem.duration-2*notifyInterval) {
if(notifyInterval == 1000)
notifyInterval = 50
else if(notifyInterval == 50)
videoelem.pause()
}
}
onStatusChanged: {
if(status == MediaPlayer.Loaded)
videoelem.play()
}
}
Hope this helps somebody!
in MediaPlayer element: Pause the video 100ms before end based on duration
MediaPlayer {
id: video1
onPlaybackStateChanged: {
if(playbackState==1){
durTrig.stop();
durTrig.interval=duration-100;
durTrig.restart();
}
}
}
Timer:{
id:durTrig
running:false
repeat: false
onTriggered:{
video1.pause();
}
}

SVG used as background-image loses embed images?

I'm using svg's as background-images for a responsive layout that recreates a complex brochure in online format.
Everything works perfectly for vector objects however if I embed images on the svg they don't appear on the background.
The strangest thing is if I check the svg on its own, the images are there, so this is kind of annoying!
Does anyone know if it has something to do with the svg configuration or something like that?
How can I solve this and still be able to use the svg as a background-image (background-size:cover rules!)?
Oh I should add that I've seen this "phenom" happen on chrome in my mac, if it's browser specific please say so!
The svg in question is this: http://nonstoptrip.limsomnium.com/img/fundoinfo1.svg
Unfortunately I'm not much of a jsfiddler so I couldn't create something to show you all.
Thanks in advance!
The images will appear if you load the svg at the document level. You can remove this element later and the images won't disappear. You can set it to load into a 1px x 1px element...
function loadSVG(svgpath){
if( /webkit/gi.test(navigator.userAgent.toLowerCase()) ){
var obj = document.createElement("object");
obj.setAttribute("type", "image/svg+xml");
obj.setAttribute("data", svgpath);
obj.setAttribute("width", "1");
obj.setAttribute("height", "1");
obj.setAttribute("style", "width: 0px; height: 0px; position: absolute;visibility : hidden");
document.getElementsByTagName("html")[0].appendChild(obj);
}
}
window.onload = function(){
loadSVG("../img/mySVG.svg");
}
The author of this technique is Dirk Weber, here are more details: http://www.eleqtriq.com/2012/01/enhancing-css-sprites-and-background-image-with-svg/
Webkit simply doesn't support this yet I'm afraid. https://bugs.webkit.org/show_bug.cgi?id=63548 is tracking this issue.
#Duopixel, using just "image/xml" for the type attribute also works (I've only tested it in chrome) and doesn't cause a "Resource interpreted as Document but transferred with MIME type image/svg+xml" error (while "image/svg+xml" does). Hope this helps get rid of that annoying error in the console you may be getting!

How to prevent webkit from making custom css forms ugly with autocomplete (without turning it off)?

I have a login box, where I want the browser to remember the saved password if the user chose to do so, but when a password is actually saved, the form starts looking really ugly:
is there a way to override this behavior? In Firefox and IE it looks normal. In Chrome and Opera it looks really bad.
And yes, I do know "remmember" is misspelled :P
From the picture it looks like you are using images for the design of that input field. You should be able to use border-radius to get the effect you want without using images. Check out http://inspectelement.com/didyouknow/rounded-corners-on-input-fields-in-almost-all-modern-browsers/ for an example.
If you use border-radius, the yellow background that Chrome inserts (which is intended to indicate to the user that the form was prefilled), should fill the entire input field and be rounded.
For browsers that don't have border-radius, you can use the images. Since this problem is only in Chrome, and Chrome supports border-radius, it should work. Check out http://www.modernizr.com/ for help gracefully degrading depending on what HTML5/CSS3 features are available.
jquery based js solution, it is not ideal but works. Chrome change the style and than the js return it to your styles.
if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
$(window).load(function(){
$('input:-webkit-autofill').each(function(){
var text = $(this).val();
var name = $(this).attr('name');
$(this).after(this.outerHTML).remove();
$('input[name=' + name + ']').val(text);
});
});
}
A possible workaround for the moment is to set a "strong" inside shadow:
input:-webkit-autofill {
-webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
}

Debugging CSS in Internet Explorer 8 Compatability View and Quirks Mode

I've built a very simple jQuery overlay which works fine in non-Microsoft browsers. I now want to debug the CSS for the overlay so that it works in IE 8 Comptability View and Quirks Mode.
The overlay can be seen at http://pointlessandannoying.com/so/ - click the 'about' link in the bottom right of the page to display the overlay. Could anyone suggest a good place to start with regards to the debugging?
If you're looking for code debugging help
You may be able to eliminate the quirks/compatibilityView problems by forcing IE8 Standards view. Put <meta http-equiv="X-UA-Compatible" content="IE=edge" > in the header.
If you're looking for Debugging tools
Firebug Lite bookmarklet works well. IE also makes a debug toolbar, which is not as easy to use (imho).
What exactly is the issue that you seem to be running into - I see that the overlay displays in IE8 (and Compatibility Mode etc.) however it seems to be being cut off towards the bottom, and is also un-clickable.
It could be an issue dealing with the z-index of the overlay or possibly how it is positioned (relative or absolutely) as I know the IE Family isn't fond of overlays. I'll dig into in some more to see if I can find anything.
One of the issues seems to be the size of the overlay - in style.css the height of #about-wrapper and #about-lightbox-wrapper were each set to 200px. I found that changing that to 400px would allow them to be seen in both IE and other browsers.
The only issue remaining is being unable to access the overlay area (The "About" area). You may want to consider using some jQuery to possibly change the z-index on show / hide so that it will be accessible.
In script.js:
Consider changing:
function about_click() {
$('#about').click( function() {
$('#about-overlay').show();
$('#transparent-overlay').show().fadeTo(200, 0.5);
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
});
}
function about_close() {
$('#about-overlay').hide();
$('#about-wrapper').hide().fadeTo(0, 0);
$('#transparent-overlay').fadeTo(200, 0, function() {
$(this).hide();
});
to something like:
function about_click() {
$('#about').click( function() {
$('#about-overlay').show();
$('#about-overlay').css('z-index',250); //Line Changed
$('#transparent-overlay').show().fadeTo(200, 0.5);
$('#about-wrapper').delay(200).show().fadeTo(170, 1.0);
});
}
function about_close() {
$('#about-overlay').hide();
$('#about-overlay').css('z-index',0); // Line Changed
$('#about-wrapper').hide().fadeTo(0, 0);
$('#transparent-overlay').fadeTo(200, 0, function() {
$(this).hide();
});
My syntax may be off - but I hope that this can at least maybe point you in the right direction.
Thanks everyone for the tips - in the end I outsourced the job, but all of this is good for future reference.

jquery cycle IE7 transparent png problem

I'm having trouble getting jquery cycle to work when I have transparent png files in IE7
It's fine in Firefox and Chrome but in IE (version 7) I get a black colour where
the png transparency is during the fade.
Can this be made to work right?
unfortunately, though IE7 supports transparent PNG's, only one filter can be applied to an element at a time.
What is happening in your application is that IE7 is applying the alpha filter to your PNG, and is then asked by jQuery to apply another alpha filter for the fade. This has visible results like you said.
The way to get around this is to nest your png inside a container and then fade the container. Sort of like this:
<div id="fadeMe">
<img src="transparent.png" alt="" />
</div>
Another way to get around this is this simple jQuery plugin that i used because i couldn't change the structure. I would give attribution but I honestly cant remember where i found it.
/* IE PNG fix multiple filters */
(function ($) {
if (!$) return;
$.fn.extend({
fixPNG: function(sizingMethod, forceBG) {
if (!($.browser.msie)) return this;
var emptyimg = "empty.gif"; //Path to empty 1x1px GIF goes here
sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
this.each(function() {
var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
if (isImg) this.src = emptyimg;
else this.style.backgroundImage = "url(" + emptyimg + ")";
});
return this;
}
});
})(jQuery);
NOTE Originally the plugin was written to fix PNG transparency in IE6 but I modified it to work with your problem in IE6+.
Sidenote: I cant remember off the top of my head but i think that IE8 may have the same problem. Correct me if i'm wrong :)
This has been driving me mad for the last few days! Finally found a decent solution that works pretty well.
Add this to your CSS:
img {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); /* IE6 & 7 */
zoom: 1;
}
Credit: Dan Tello
Try adding
cleartype: true,
cleartypeNoBg: true
to your cycle jquery arugments.
It should be fine now :)
Coupled with the "wrap the image in a div / fade the div" tactic previously mentioned, using this line of CSS will fix the IE issue:
#div img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/bubble_intro_ph1.png');
}
For me it worked to just include the filter property with blank value in jQuery's .animate()function
Maybe this will work for you, too.
$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});
Internet Explorer 7 has some issues
with fading transparent PNGs. If
you've gotten to the this page because
you're seeing a black border where the
transparent edges in your PNG are,
then here are some tips for fixing the
problem:
Do not fade the element directly, but fade a parent container
holding the PNG. This may mean you
need to add a wrapper element to your
code.
Give the parent element a background color.
Lastly, if you're still having problems, try giving your parent element
the old zoom: 1 trick. Give the
parent element a style declaration of
zoom: 1 (either via CSS or an inline
style.) This will force IE to give the
element hasLayout—which tends to fix
all sorts of weird display issues in
IE.
Source: Fading a 24-bit transparent PNG in IE7+
Unfortunately, this means that it’s impossible to have transparent PNGs fading in over a transparent background, since you have to apply a background color to the parent element in order for the transition to go smoothly, i.e. without the black pixels. background: transparent won’t work (since transparent isn’t really a color). :(
I'm loading some png's dynamically into the DOM... this worked for me: http://www.twinhelix.com/css/iepngfix/
I had this problem with Drupal Views Slideshow using the Fade transition on transparent PNGs.
I stumbled across the following quasi-solution totally by chance. I don't know why it works, but the drawback is it essentially removes the cross-fade envelope in IE (it doesn't appear to visibly affect FF or Safari):
Views Slideshow will print something like the following as part of its output:
<div class="views-field-field-photo-fid">
<span class="field-content"><img height="433" width="834" src="http://devel.acupuncture2.polishyourimage.com/sites/acupuncture2.polishyourimage.com/files/pain_splash.png?1292552784" alt="" class="imagefield imagefield-field_photo"></span>
</div>
I hid views-field-field-photo-fid:
.views-field-field-photo-fid { width: 0px; }
Not perfect but maybe good enough till I find a better solution. You can take a look at the development site: http://acupuncture2.polishyourimage.com/
I'm also using Weezy's solution but doesn't play nice with IE7. The effects is even worse.
When assigning jQuery opacity-property to animate-function instead of Black-Border-Bug it generates a Black&White-Border-Bug :-P So I did the following for IE8;
In the head IE8 conditional comment with the HTC behavior on class .fixpng especially for htc.
<!--[if IE 8]>
<style type="text/css">
.fixpng {
/* this fixes transparency in IE8 ONLY! */
behavior: url(css/IE8pngfix.htc);
}
</style>
<![endif]-->
changed HTC-file to IE8pngfix.htc. Changed line 75 in the .htc to
!/MSIE
(8)/.test(navigator.userAgent
It's actually double-filtered, first IE conditional and then in htc, but what the hell!
I found that because htc could interfere with jQuery. Example;
[div id="tooltip" class="fixpng"]
Had to change $(div#tooltip).css({opacity: 0}) to display:none in CSS and set display: 'block' in hover-event.
So if anybody has found a working solution for IE7 I would be really happy. All the workarounds /hacks above don't work for me. About IE6 I don't care any second.
Ok so I took Darko Z suggestion about the div. In the end this is what I had to do to be able to get jQuery Cycler fadeing FX to work on IE with drupal 7. Instead of placing an tag I used divs and applied the.png to the background of the image along with
So I changed this:
<div class="fademe">
<a href="http://mysite/node/1">
<img class="firstTAB-phase2" src="http://mysite/IMG/bio_640x330.png" height="330px" width="640px" />
</a>
to this:
<a href="http://mysite/node/1">
<div class="fademe" id="TAB1"></div>
</a>
then in the css I did:
.fademe{ width:640px; height:330px;}
#TAB1{ background: #999 url(http://mysite/IMG/bio_640x330.png) no-repeat;}
and it works for now =D.
Hope it helps,
Defigo
I've got the ultimate solution for this damn IE-PNG-BlackBorderProblem when using fading or other jQuery effects. It is working in every IE > 6 even in IE8!:
Download jQuery's pngFix at: http://jquery.andreaseberhard.de/pngFix/
Modify this script by searching:
if (jQuery.browser.msie && (ie55 || ie6)) {
and replace it with:
if (jQuery.browser.msie) {
create a blank.gif (1x1 transparent gif)
put a:
.pngFix( {blankgif: '< relative location to the blank.gif >'} );
at the end of the line where you perform jQuery effects eg.
$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500 ).pngFix( {blankgif: './library/img/blank.gif'} );
make sure that all pictures have been loaded before you use jQuery effects within your document ready function by using the .load event on the window DOM-Element:
$(document).ready( function() {
$(window).load( function() {
$('#LOGO').animate( {'top': '40%', 'opacity': '1.0'}, 2500).pngFix( {blankgif: './library/img/blank.gif'} );
});
});
Load page in IE8 and feel happy ;-)
You can see it in action on http://www.claudworks.net
No ugly dark borders anymore around some animated PNGs in IE.
I found the fix to this bug, simply add the following to the wrapping div and to the img and other elements (e.g. h1,h2,p)
#div, #div img {
background:none !important;
filter:none !important;
}
This will fix it
This drove me mad for a couple of days and I finally stumbled across Unit's PNG fix. http://labs.unitinteractive.com/unitpngfix.php - works with Cycle and stopped me from switching to a JPEG solution!
It needs a bit of tinkering to target specific PNGs in the cycle div, but she works!
Hoping to help somebody else who encounters this problem:
I had transparent .png backgrounds (tiled) on a few divs on my page and when I activated the jquery cycle plugin, those transparent areas became screwy. They lost some of their transparency.
My solution was to simply make the tiles much bigger, so there really is no tiling at all. There is a small trade off for file size, but it fixed the problem.
I rewrited the fadeIn and fadeOut methods. It seems I don't get the black color on PNG image. No parent div is needed. Still you use as jQuery.
http://www.pagecolumn.com/javascript/fade.htm
If you can afford to sacrifice a bit of image quality, you can save the images as PNG-8 instead of PNG-24, then apply the fix mentioned by Prosini, i.e.
cleartype: true, cleartypeNoBg: true
and that should work. With PNG-24, I was still getting a bit of black border during the transitions.
While not specifically limited to the cycle plugin, this may help others. I came across this stream in my attempt to find a solution to .animate() transparent/translucent png files. I had the issue of a black border occurring in both IE7 and IE8. The images appear fine until I attempted to use JQuery to animate the opacity...
$('#my-png-img').stop().animate({opacity:0.0},3000);
I went thru a number of the solutions and unfortunately, none of them were ideal. While this stream is a bit dated, it may help someone else still searching to piece together a solution. I ended up using the Twin Helix solution (http://www.twinhelix.com/css/iepngfix/) with a bit of a tweak. I'm not a huge fan of .htc files but that's beside the point. I edited the iepngfix.htc file (~line 75) to trap for IE7 and IE8. I changed...
!/MSIE (5\.5|6)/.test(navigator.userAgent) ||
to
!/MSIE (5\.5|6|7|8)/.test(navigator.userAgent) ||
From there I followed the general instructions (see demo) including adding this bit to my CSS
/* IE PNG Fix */
img, div, a, input {
behavior: url(/_css/iepngfix.htc)
}
In addition and as others have mentioned, I had to nest my image in a container...
<div id="img-container"><img src="/images/my_semi_trans_png24.png" /></div>
Then I applied .animate() effect to the containing div. A bit constraining however, this was the only way I was able to get fading to work consistently. In one case, I even found that the transparency issue affected animating the opacity on a transparent .gif file. Oh and, whether I used .fadeIn()/.fadeOut rather than .animate() made no difference.
This is all pretty hectic stuff you're being asked to do. All very coding codingsky.
Here's my suggestion. IE will not allow a png background above a colored background to live in peace, like so...
<div style="background:url('something.png') no-repeat 0 0 scroll; position:absolute; z-index:2;"> </div>
<div style="background-color:#fa0237; position:absolute; z-index:1;"> </div>
Notice the first div is z-index 2(on top of 2nd div).
This can be simplified by putting your bgColor in the background css in the 1st Div and doing away with the second div. This solves the problem of the black areas. I had this problem myself.
The only way I can see you having a problem where you can't use this method is where you have the need to overlay two png background images over one another and fade simultaneously. Don't do that. You'll need to animate each one after one another.
Define a solid background color to your image:
.container img {
background-color: white;
}
Define the background-image css property of your image to its src attribute:
$('.container img').each(function() {
$(this).css('background-image', $(this).attr('src'));
});
Advantage: you don't need to change your markup
Disadvantage: sometimes applying a solid background color is not an acceptable solution. It normally is for me.
To solve this issue simply add:
"filter" : ""
to your .css() or .animate() and it'll fix a number of IE related issues.
The most reliable solution is to not use pngs in fading style animations in <IE9 browsers.
I tried nearly every "fix" and variation of a fix available that I could find for this issue and had no success. The solution I used was to export pngs that were going to have fading-style animations applied to them (ie, fadeIn/fadeOut) to gifs and do a conditional replacement for <IE9. Although the gifs don't look as good as pngs in a modern browser, they look a hell of a lot better than the way IE8 and earlier render pngs, and this method works reliably. You still get to display nice pngs for capable browsers and when the fix is applied nothing else gets broken; most of the png hacks are known to break other css properties. Your code might look something like this:
$(document).ready(function ()
{
if ($.browser.msie && parseInt($.browser.version, 10) < 9)
{
$(".myClass, .myOtherClass").each(function (val)
{
var backgroundValue = val.css("background-image");
backgroundValue.replace('.png', '.gif');
$(this).css("background-image", backgroundValue);
//you could just as easily do this with 'img' tags
});
}
}
Weezy's solution worked for me!
I tweaked the .htc file further, and changed this line:
var bgPNG = bgSrc.match(/url[("']+(.*\.png[^\)"']*)[\)"']/i);
to:
var bgPNG = bgSrc.match(/url[("']+(.*\.fixme.png[^\)"']*)[\)"']/i);
By doing this, the .htc script will ignore all .png files unless they end with .fixme.png (for example "transparant.fixme.png"). I intended this to speed up the script a little and ensure that only problem .pngs are fixed (the ones you must have transparant).
I use other .pngs which are not transparant, and therefore don't need this script to run against them.
The best fix is unitpngfix.
Include it in your script and be sure to provide the path to your 1px by 1px transparent gif. Voila!

Resources