I have a video as 100% width & height, over that are interactive elements, when you click on the chapter it goes to white and then loads in a video very quickly.. when the video ends & you click on the video, it will go to the next video and again it goes to white and loads the video.
My issue is that it goes to a white screen for ~500ms, because I change the video source of the video-frame, the background-color of the body is white so I believe that's where the white comes from, changing the background color to blue or black changes the issue witht he white in their respective color, I was wondering if there is a solution for this?
I've suggested the following:
Loading screen for the ~500ms it goes to white.. this however doesn't look good.
First frame of the next video as background of the body, where I load the video over, so that it appears to be on the video but it's actually loading in the video.
The code as to how I change the video frame to the next video:
$("#klikimg").on('click', function(){
switch(klik) {
case 100:
$("#wereldbol").attr("src", "aardeFrag/klik1.mp4");
klik = 90;
break;
});
With Chris S. his suggestion of trying image frames again I did the following:
html:
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" > </video>
Loaded the video in after the image, so that it wouldn't fall back on white or black for example.
CSS:
#tFrame{
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1;
overflow: hidden;
background-size:cover;
}
this is the css code I used, thank you, Chris S
note - this only works for one video source changing, as whenever it loads in a new frame it still goes to black if you don't have the image already present on the page
edit: For multiple video's: Load in every image at the beginning of your body tag, give them all the same class, and a width of 1px, height of 1 px and opacity of 0, then when you change your video source, change the width & height of the image you need to 100% and opacity to 1, on the next click, just before you change the image again change the image width & height to 1px and opacity to 0, this way it won't go to white or black -- Credit to: Chris S. for this solution, thank you Sir!
Try adding a hidden div on top of the video element, show this div before you set the src of the video and hide it again on video's loadeddata event:
case 100:
$("#loadingDiv").show();
$("#wereldbol").attr("src", "aardeFrag/klik1.mp4");
klik = 90;
break;
and on document ready:
$("#wereldbol").on("loadeddata", function() { $("#loadingDiv").hide(); } );
You can find the supported media events here: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events
I've similar problem and I've solved just creating differents video dom elements and append it in to the DOM. When a new video to be played appears just remove from the dom the older and add the new dom video element to the DOM. Here is an example of my code:`
function playVideo(aviso){
let newVideo = document.createElement('video');
newVideo.style.cursor = 'none !important';
newVideo.style.width = pantalla.width;
newVideo.style.height = pantalla.height;
newVideo.muted = true;
newVideo.src = aviso.url;
newVideo.style.objectFit = 'contain';
const sourceElem = document.createElement('source');
sourceElem.src = '';
const pElem = document.createElement('P');
pElem.innerHTML = 'No soporta video';
newVideo.appendChild(sourceElem);
newVideo.appendChild(pElem);
newVideo.oncanplay = function() {
// video.style.visibility = 'visible';
removeCurrents();
document.body.appendChild(newVideo);
newVideo.play();
currentVideo = newVideo;
};
`
Related
First, I'm sorry for my bad english ^^
I'm working on my web site and I would like to put my canvas animation (created with easelJS framework) in my div background.
I tried something like this :
.canvas-bg {
background: -webkit-canvas(animation);
}
var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);
It work on safari (but the animation is paused when I refresh the page) and not working at all on chrome...
So, have you any way to make an animated canvas as div background ?
Like the blue banner of this web site for example : http://www.createjs.com/easeljs
Thanks a lot !
Julien.
You can include the canvas in your DIV, and then set it's position as absolute. Other content in the DIV will sit on top.
#canvas {
position: absolute;
display: inline;
}
Here is a quick sample:
http://jsfiddle.net/obcv1rex/1/
You can add text to the first DIV to see it scroll. I set the size to 1000x1000, but to make it more dynamic you would want to size the canvas with JavaScript (using CSS will scale the contents).
I have many div elements that I pull and each of them have a background-image. Some elements however represent a gif and when I mouse hover over them I wish to play the gif and have it stop or reset when the mouse exit.
I see many examples of gif animation with an image tag but I cannot seem to get it to work with a background-image.
So for each Image I have the starting image for the gif as well as the .gif extension to the full content.
I am reading this question here for reference: Start GIF On Mouse Hover and Pause Otherwise?
which brings me to my question: what is a gif?
Is it a collection of smaller images for the "animation"? I see alot of "image slicing" terminology or having multiple images that cycle through to simulate the animation. But is it possible to show a gif through html/css/js with just the starting image and the .gif url?
$container.on('mouseenter', ".gif", function (event) {
var target = event.target;
var $target = $(target);
//play gif
$target.css("background-image", "url(" + theGIFurl + ")");
});
.item gif{
background-image: url(theJPGurl); /
}
A gif is a type of bitmap image. It used to be very popular, because it can have transparent pixels (in contrast to jpg). But in that regard it is replaced by png, which is generally smaller, supports alpha transparency (where gif pixels are either fully transparent or fully opaque), and most importantly, gif images are limited to 256 colors.
One other feat of gif images is their animation. You may know them from old websites that show a rotating envelope or something.
An animated gif image is just a collection of images combined in a single file. Such a file also contains additional timing information in the file. However, a gif image is not a smart object that can be controlled. You can't start, stop, pause or speed up a gif image using JavaScript. It just contains frames and can be looped or not, but all that information is in the file.
So, while you can animate using JavaScript or CSS by showing different images, this is a different technique than just showing an animated gif.
So, maybe it's best to investigate other techniques. While gifs are basically very simple, they are also very limited in their use. For instance, you can't reliably time a script to run the end of a gif animation.
-edit-
Apparently you can (in FireFox) pause a gif file.
$container.on('mouseenter', ".gif", function (event) {
var target = event.target;
var $target = $(target);
//play gif
$target.css("background-image", "url(" + theGIFurl + ")");
});
.item gif{
background-image: url(theJPGurl); /
}
$container.on('mouseenter', ".gif", function (event) {
var target = event.target;
var $target = $(target);
//play gif
$target.css("background-image", "url(" + theGIFurl + ")");
});
.item gif{
background-image: url(theJPGurl); /
}
If anyone could comment, I did find this example which solves this:
http://codepen.io/anon/pen/qbqvgy
div {
width: 500px;
height: 500px;
background: url('http://2.bp.blogspot.com/-CmBgofK7QzU/TVj3u3N1h2I/AAAAAAAADN8/OszBhGvvXRU/s640/tumblr_lg7h9gpbtP1qap9qio1_500.jpeg');
}
div:hover {
background: url('https://media.giphy.com/media/V1T2JBmK03OFy/giphy.gifs');
}
<div>
</div>
js to load a video, this is fine.
I'm using Popcorn Capture to capture the current frame, copy it into an image which is attached to the body. This appears to be working. An image of the frame shows, and pauses.
What I want to happen is to keep this image at the top level, do some stuff underneath and then fade this image away when ready for a nice transition.
What I get is
image shows
layer underneath renders
video starts again above new rendered layer, unless I remove the video with jQuery which removes the image as well.
I can't seem to even destroy/get rid of video without removing the image.
Here's the code
image = document.createElement("image");
image.id = "capture";
image.setAttribute("class", "video-js");
img = currentVideo.pause().currentTime( 0 ).capture({
target: "img#capture",
media: true
});
image.src = img;
document.body.appendChild(image);
$("#capture").fadeTo("slow" , 0);
currentVideo.src = '';
currentVideo.load();
currentVideo.destroy();
videoPlaying = false;
createScene();
$('#video').remove();
$('#prevButton').show();
$('#openGuide').show();
$('#openSceneInfo').show();
Any clues on how to make sure that image stays on screen, and then can be faded away?
Just faded out the video element with fadeTo. This worked better.
I have a page with an embedded youtube video, and I'm trying to implement a custom overlay where you can define areas using a resizable and draggable <div> (using JQuery UI).
When dragging the <div> in other areas of the screen, it's perfectly responsive, but when over the video (embedded using the IFrame API, incase it matters), if you move the mouse at anything other than a crawl, it will regularly 'lose its grip' on the resize handles or the move handle. This is the case in both IE and Chrome.
JSFiddle here: http://jsfiddle.net/MfZes/1/ (draggable box is below the youtube frame)
Does anyone know why this is, or if it's avoidable?
Thanks in advance.
I've done this before.
You can hook onto the dragstart, resizestart, dragstop and resizestop events of jquery ui's resizeable and draggable plugins.
Put the video in a container div. Alongside the video, insert another div which will act as an overlay. Set the width and height to 100%, position it absolutely and set the display to hidden.
When the resize/drag start events fire, show the overlay div. When they stop, hide it. (You need to hide it as you still want to be able to interact with the video when you're not resizing or dragging.
I had the same problem but with hover on canvas:
$('.DraggableDiv').draggable({
start : function() {
var d = document.createElement('div');
$(d).addClass('canvas_shadow');
$('.canvasContainer').append(d);
},
stop : function() {
$( ".canvas_shadow" ).remove();
});
add css for .canvas_shadow:
.canvas_shadow {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0.1;
z-index: 80;
}
take a look at the first panel (in red) on the homepage.
http://www.boomtown.co.za/
I'd like to do something like this with an invisible image and only reveal parts of it as the mouse tracks over. Is this possible without using Flash?
This can be done quite easily using some css and background positioning with javascript. Here's 2 examples : http://jsbin.com/ococal/3
The source code is quite easy to understand and you can start working out with this.
You could do it by using a transparent png image that was a radial fade from transparent in the centre to semi-transparent at the edges and making it follow the mouse.
document.onmousemove=mousefollower
function mousefollower(e){
x = (!document.all)? e.pageX : event.x+document.body.scrollLeft;
y = (!document.all)? e.pageY : event.y+document.body.scrollTop;
document.getElementById('myImage').style.left = x + 'px';
document.getElementById('myImage').style.top = y + 'px';
}
Obviously you can use jQuery for this too, and set the mousemove function to occur only over a specific div. Also make sure the image you use is large enough (at least twice the size) so that the edges don't show up when you move to the far sides of the div (this means that for large areas you will need a huge image so it may get a big laggy). Put the image in the div and set overflow to none to clip anything that falls outside of the area.
It is possible yes, but only in modern browsers (chrome, safari, firefox, opera).
You would need to have two <div>'s
like so..
<div class="container">
<div class="revealer"></div>
</div>
and CSS like so
.container {
position: relative;
background: url("images/your-background.jpg");
}
.revealer {
position: absolute;
//set the mask size to be the size of the container
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1;
background: url("images/your-background-over-state.jpg");
//css3 image masks, this is not cross browser, see the demo for
// cross browser syntax
mask: url("images/mask-shape.png") no-repeat;
//make sure the mask is off screen at first, by setting the mask position
//to minus the width and height of your mask image
mask-position: -300px -300px
}
And the JS
window.addEventListener('load',function(){
var background = document.querySelector('.container'),
revealer = document.querySelector('.revealer');
background.addEventListener('mousemove', function(e){
//the minus represents the half the width/height of your mask image
// to make the reveal centred to the mouse.
var x = e.offsetX - 150,
y = e.offsetY - 150;
// move the position of the mask to match the mouse offsets
revealer.style.maskPosition = x+'px '+y+'px';
return false;
});
});
Because of the way this works you need to ensure that any other content in the .container has a higher z-index than the mask to ensure the content is not masked. To do this add relative positioning to the elements in the container
like so
.container *:not(.revealer) {
position: relative;
z-index: 2;
}
Images used in masks are images where the solid colours create the visible or fill area, and the transparent areas are the mask or cut out.
Demo with cross browser code