We Keep Coding

How to pause html5 video when out of view code (non-statically positioned)

I am using a html5 video on my website. I want it to play only when in view and pause otherwise.
I am also using javascript to have a play/pause button on it.
I was able to use both the features on one site easily and the video was the first element on the site. However this time it is the second div
I feel like there is a conflict because of the same element being targetted or something going wrong that I just can't seem to understand
In this case the video autoplays when I open the site, and when I scroll to the actual video, it stops(pauses)! Can anyone see what I am doing wrong ?
<script>
var videos = document.getElementsByTagName("video"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
b = y + h, //bottom
visibleX, visibleY, visible;
visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));
visible = visibleX * visibleY / (w * h);
if (visible > fraction) {
video.play();
} else {
video.pause();
}
}
}
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
</script>
I have attached a fiddle
http://jsfiddle.net/5wZLL/12/
other plugins that I have used on this site :
Stellar.Js
FlexSlider
SmoothScroll

The code you've posted here is mostly fine and should work more or less correctly, but here are a few things to look out for:
Remove the autoplay attribute completely from your video element. Setting it to "0" does not turn it off. Any value at all for autoplay will make it true.
You'll probably want to call checkScroll one time at page load to cover the initial window state, in case the video is in view initially. Otherwise, it won't start until you scroll at least one time.
The math here assumes that your video is positioned statically, with no parent elements that have CSS position as fixed, relative, or absolute. If you need to do that, you may need to modify the position calculation slightly. But this is not a problem in the jsfiddle you posted.
Based on the value of fraction, the video will only play if 80% of it is visible. If the browser window is smaller than 80% of the area of the video element, it will never play no matter where you scroll. You may want to adjust the value compared to visible to account for that, or you can leave it as is. Up to you.
Make sure the video is actually being loaded. If the file is not found or if the network is too slow, the play state may be set but you may not see it playing. You might want to have some other visual indicator of the play state, using the play and pause events and the paused property.
Finally, if you're going to have a separate pause/play button, you'll want to use that to set some external variable that disables the scrolling logic so they don't conflict.
Based on your description, I suspect that you want to pay close attention to 1. and 3., as they will likely solve your problem.
Update:
It looks like your problem is 3. When you have parent elements that are not positioned statically, offsetTop and offsetLeft are not sufficient to get the position of your video element within the page. You need to loop through all the ancestor elements that can affect the position, like this:
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
Here's a working example:
http://jsbin.com/qekat/1/edit

Mobile App "unable to load previous operation due to low memory" after loading image?

I have a simple mobile app. It starts by prompting the user to select an image which is then loaded locally via the following code and displayed on a canvas:
function handleFileSelect(evt) {
var files = evt.target.files;
var f = files[0];
console.log(evt);
var ctx = document.getElementById("myCanvas").getContext('2d'),
img = new Image(),
f = document.getElementById("uploadbutton").files[0],
url = window.URL || window.webkitURL,
src = url.createObjectURL(f);
img.src = src;
lastImage = img;
img.onload = function()
{
window.requestAnimationFrame(function(){
var w = window.innerWidth;
var h = window.innerHeight;
ctx.clearRect(0, 0, w, h);
ctx.drawImage(lastImage, 0, 0);
//url.revokeObjectURL(src);
});
}}
In my web browser and on my phone, the image is loaded and displayed in a canvas properly, however I have heard from a user who was running it on a Razr Maxx HD with Google Chrome, that they would receive "Error: unable to load previous operation due to low memory." I suspect that this issue cannot be solved by first reading in the image and then scaling it prior to displaying because the full image will have already been loaded into memory even if not displayed. Is there any way to load a scaled version of an image into memory without first loading the entire thing? Any idea what is causing this issue as I am able to load massive images on my Galaxy S3 in chrome and the Galaxy S3 has the same amount of RAM as the Razr Maxx HD?

It may depend on which applications the user is running as to how much memory is available.
One solution is to have the application request the image with certain width and the server can return a scaled image, which should reduce memory requirements.

I have had the same problem on my Samsung Galaxy S4. I have found the solution on my phone and I have had no issues since:
Go to the Settings on your phone.
Select More in the top right task item.
Scroll to Developer Options. - If you don`t have developer options enabled follow steps 1 & 2, Then scroll down to about device and click on it. The phone information should be displayed and you should scroll down till you get to Build Number. The next thing to do is click on Build Number several times... ( Each time you click on it an info bar will be displayed telling you how many clicks are needed for Developer options. When you have clicked BN several times then DO will now be open and we can continue with the above.
If you have clicked into Developer Options successfully then you must scroll down to the apps options near the bottom of D.O menu.
If ( Do not keep activities) is selected then be sure to untick it making sure the box has no tick in it as it will end every app or running operation as soon as it leaves the page, Hence the reason photos wont load up to Facebook etc. If this is done correctly then you should now be able to upload photos.

Mouse tracking of page - and displaying it

Basically I am trying to create a little image at the top corner of a webpage, which would stay in the same position even if the page is scrolled and would show the position of the mouse.
The point is to have a large webpage that would extend down and right, and navigation of this large page would be easier if I had a little image that indicated where exactly the visitor is on this page (as the browser window is smaller than the page). I wanted to to just track the browser window position on the web page, but I cannot find anything that would help me do it, so I thought I might do it with just the mouse movement. The problem is that I know about nothing about java, so does anyone know how I could track the mouse position on the page (not the browser) and display it at the same time on a small image on the upper corner of the browser?

This would work, but only in modern browsers that support css3 transforms (scale):
JsFiddle
It works by copying the whole page that should be in the .actual-page div into a .thumbnail div which is positioned on the top left of the page. Then I scale the cloned page with css transforms and use javascript to replicate mouse movements into the little box, here's the script:
var TinyNav = function() {
this.init = function() {
var clone = $('.actual-page').clone();
$('.thumbnail').append(clone);
$('.actual-page').on('mousemove', function(e) {
var posX = e.offsetX;
var posY = e.offsetY;
$('.thumbnail .cursor').css({
top: posY / 10,
left: posX / 10
});
});
}
this.init();
}
var tinyNav = new TinyNav();
Another way of doing it would be using canvas, but browser support isn't the best with that either..
Hope this helps

MouseUp and MouseDown Events in Google Chrome

I have a simple html5/canvas and js-setup:
HTML
<canvas id="canvas" width="500" height="500" ></canvas>
JS
var canvas = $("#canvas"),
c = canvas[0].getContext("2d");
c.fillStyle = "gray";
c.fillRect(0, 0, 500, 500);
$(document).mousedown(function() {
console.log('down');
});
$(document).mouseup(function() {
console.log('up');
});
What buffles me is that I am able to log events with google chrome like so
down
up
down
up
down
down
down
down
up
down
down
down
meaning, I get consecutive down events. I think it is caused by the canvas element, because I am not able to reproduce this behavior without it.
Here is a fiddle: http://jsfiddle.net/SunnyRed/zcmaT/
Update
I think it only happens, when the user clicks and drags, which might be the case in my scenario. Here is a simple clicking demo. I can't reproduce it in Firefox and Opera.

The only way that I could replicate this is in your demo was that I either:
started a click outside the page (in another iframe from JS fiddle) and then did the mouse up over the canvas. Or
start the click on the canvas and then release it outside the bounds of the page (such as over the page padding).
I believe this is the correct behaviour.

context drawImage / canvas toDataURL lagging significantly on opera mobile

I have a bit of Javascript that runs on an Android tablet, running Opera Mobile 12. The tablet is attached to the wall in an office, so it's used by everyone who works in this office, as a timekeeping system (ie. they use it to clock in/clock out of work). This javascript takes a photo of the user when a certain event is raised, then converts this photo to a data URL so it can be sent to a server. This all runs in the background, though - the video and canvas elements are both set to display:none;.
Here's the code that handles the webcam interaction:
var Webcam = function() {
var video = document.getElementById('video');
var stream_webcam = function(stream) {
video.addEventListener('loadedmetadata', function(){
video.play();
}, false);
video.src = window.URL.createObjectURL(stream);
}
// start recording
if (navigator.getUserMedia)
navigator.getUserMedia({video: true}, stream_webcam);
else
_error("No navigator.getUserMedia support detected!");
var w = {};
w.snap = function(callback) {
var canvas = document.getElementById('canvas');
canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
// delay is incurred in writing to canvas on opera mobile
setTimeout(function() {
callback(canvas.toDataURL());
}, 1);
};
return w;
}
w.snap(callback) gets called when the user presses a certain button. The problem is that there is a significant lag between the call to drawImage, and an image actually being drawn to the canvas. Here's the problem that occurs:
User 1 users the tablet, presses the button, has their photo "snapped" and sent to the server. The server receives a blank, transparent, image. (It's not the same issue as html5 canvas toDataURL returns blank image - the data being sent to the server is substantially less for the first image, because it's blank)
A few minutes later, user 2 uses the tablet and presses the button, and has their photo "snapped". The server receives the photo of user 1.
Later, user 3 does the same thing, and the server gets a photo of user 2.
So I'm guessing the call to toDataURL() is returning old data because drawImage() doesn't . (I read somewhere that it's async, but I can't confirm and can't find any way of attaching an event to when it finishes drawing.)
I've tried:
changing the timeout in snap() to a variety of values. The highest I tried was 2000, but the same issue occurred. (If anyone suggests higher numbers, I'm happy to try them, but I don't want to go much higher because if I go too high, there's potential for user 3 to have their photo taken before I've even processed user 2's photo, which means I might lose it entirely!)
having the canvas draw something when the page first loads, but that didn't fix it - when user 1 was photographed, the server received whatever photo was taken when the page loaded, instead of the photo of user 1.
"getting" the canvas element again, using getElementById, before calling toDataURL.
A few more notes:
This works fine on my computer (macbook air) in Chrome and Opera.
I can't reliably replicate it using a debugger (linking to the tablet using Opera Dragonfly).
AFAIK Opera Mobile is the only Android browser that supports getUserMedia and can thus take photos.
If I remove the display:none; from the video and canvas, it works correctly (on the tablet). The issue only occurs when the video and canvas have display:none; set.
Because the page is a single page app with no scrolling or zooming required, a possible workaround is to move the video and canvas below the page fold, then disable scrolling with javascript (ie. scroll to the top whenever the user scrolls).
But I would rather a proper fix than a workaround, if possible!

I don't have a very good solution but I would suggest not handling an invisible canvas through the dom by setting it invisible.
Instead of
var canvas = document.getElementById('canvas');
Try
var canvas = document.createElement('canvas');
canvas.width = video.width;
canvas.height = video.height;
canvas.getContext('2d').drawImage(video, 0, 0)
This way it's separate from the DOM.
Also Why not use
canvas.toDataURL("image/jpg")?
EDIT: Also, if you're designing it, have you tried the other browsers out there? Whats restricting you to Opera over the other browsers available or using phonegap?
EDIT2: Thinking about it, Canvas also has two other options for getting that photo into place that you would want to look in two. Those two being:
var imgData = canvas.getContext('2d').getImageData(0,0,canvas.width,canvas.height);
-or-
canvas.getContext('2d').putImageData(imgData,0,0);
These two ignore any scaling you've done to the context but I've found that they are much more direct and often faster. They are a solid alternative to toDataURL and drawImage but the image data you put and get from these are encoded as an array in the form:
[r1, b1, g1, a1, r2, b2, g2, a2....]
you can find documentation for them here:
http://www.w3schools.com/tags/canvas_putimagedata.asp
http://www.w3schools.com/tags/canvas_getimagedata.asp

Some version of Android have problems with toDataUrl(); Maybe this is the solution?
http://code.google.com/p/todataurl-png-js/wiki/FirstSteps
The script: http://todataurl-png-js.googlecode.com/svn/trunk/todataurl.js
Paste this in your head:
<script src="todataurl.js"></script>