We Keep Coding

How to change video tag's forwarding time

I have video tag on my website and when i click right arrow, it forwards with about 1 minute and i want to reduce this time to 10 seconds.
<video src="SOURCE" controls="true" id="video" style="height: 477px; width: 980px"></video>

You can attach an eventlistener directly to the video instead of the site.
var video = document.getElementById("video");
var timer = 10;
video.addEventListener('keydown', (e) => {
event.preventDefault();
switch (event.keyCode) {
case 37:
var currentTime = video.currentTime;
video.currentTime = currentTime - timer;
break;
case 39:
var currentTime = video.currentTime;
video.currentTime = currentTime + timer;
break;
}
});
<video controls="true" id="video" style="height: 477px; width: 480px">
<source src="https://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>

you can attach an event handler on this arrow key and then change the currentTime property. But prevent the default behaviour before.
const $video = document.querySelector('video');
const handleKeyDown = (event) => {
e.preventDefault();
if (e.keyCode === 39) {
const seconds = $video.currentTime;
$video.currentTime = seconds + 10;
}
}
$video.addEventListener('keydown', handleKeyDown);
<video width="320" height="200">
<source src="your/file.mp4" type="video/mp4">
</video>
<p>Hello</p>

This may help you.
https://www.codespeedy.com/forward-and-backward-html5-video-player-javascript/
You can use event.preventDefault() to prevent default forwarding and set manual forward by adding currentTime + 10 seconds.

Can you stop a HTML5 video pausing/stopping on scroll?

I have a HTML5 video banner at the top of my page. It has the autoplay and loop attributes added. When I begin to scroll down the page the video stops and never restarts when I scroll back upwards. I'd like the video to carry on playing no matter if the user scrolls or not.
There doesn't seem to be any attributes listed in the W3C spec that suggests a solution, so is there another way of disabling this functionality?
The HTML and CSS is very simple so I'm wondering if I need some JS to help along the way:
HTML:
<video preload="none" autoplay loop>
<source src="/media/test.mp4" type="video/mp4">
</video>
CSS:
video {
width: 100%;
height: auto;
}
Any help would be much appreciated.

You can use isInViewport jQuery plugin as below:
$('video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})

it works fine for me,, if you want to change yiur viewport then change fraction = 0.5; in my code
var videos = document.getElementsByTagName("video"),
fraction = 0.5;
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);
div {padding-top:300px; width:320px;}
video {
padding-bottom:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<video id="video1" preload="auto" loop="loop">
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">>
bgvideo
</video>
</div>

This can be disabled by using the attribute data-keepplaying.
<video preload="none" autoplay loop>
<source src="/media/test.mp4" type="video/mp4">
</video>

if using fullpage.js
<video autoplay muted loop data-keepplaying>
<source src="myvide.mp4" type="video/mp4">
</video>
works

How to make HTML5 video fade in when it has finished loading?

I'm trying to have my HTML5 video element fade in when it loads, (I'm currently having it appear using Javascript canplaythrough as you can see in the code you see below, but it's a little harsh.) How can I get the HTML5 video element to fade in gently? I'm OK with JavaScript or jquery, but I don't know either one very well, so some complete code would be very helpful!
Here's the code: (if you run the code with the Run Code Snippet, it doesn't work well, so I highly suggest to go to my website, it's on is my video page here and works if you wait a 30 seconds/minute (until the video loads): jeffarries.com/videos.
<script>
var e = document.getElementById("myVideo");
e.style.display = 'none'
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
var e = document.getElementById("myVideo");
e.style.display = 'block'
};
</script>
<video style="display: block;" id="myVideo" width="320" height="176" controls>
<source src="http://www.jeffarries.com/videos/jeff_arries_productions_intro.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Thanks for you time and effort!

Here's how to fade in the video with javascript
var e = document.getElementById("myVideo");
e.style.opacity = 0;
var vid = document.getElementById("myVideo");
vid.oncanplaythrough = function() {
setTimeout(function() {
var e = document.getElementById('myVideo');
fade(e);
}, 5000);
};
function fade(element) {
var op = 0;
var timer = setInterval(function() {
if (op >= 1) clearInterval(timer);
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1 || 0.1;
}, 50);
}
FIDDLE

Video not pre-loading and still buffering

I'm trying to get a video to preload before it starts playing so i don't have any issues with buffering, but no matter what i do it still seems to buffer at random points through the video, here is the code i am using:
<video preload="auto" height="auto" id="video" width="100%" controls="" autoplay="false"><source src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg"> <img src="http://placehold.it/400x400"> </video>
<p><source src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg">
</p><p><source src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg"></p>
<source src="/media/export/cms/01_CL_Sleigh 1280.mp4" type="video/mp4"> <source src="/media/export/cms/01_CL_Sleigh 1280.webm" type="video/webm"> <source src="/media/export/cms/01_CL_Sleigh 1280.ogv" type="video/ogg">
var clinique_animation = {
video: document.getElementById('video'),
preload: true,
actions: [
{
time: 8, // seconds
action: function() {
$('.text').fadeIn();
}
},
{
time: 9, // seconds
action: function() {
$('a.reset').fadeIn().on('click', function() {
clinique_animation.reset();
});
}
}
],
init: function() {
var self = this;
if(this.preload === true) {
this.video.addEventListener('canplaythrough', function() {
self.video.play();
$('#video').fadeIn();
}, false);
}
this.timer_actions();
},
reset: function() {
this.timer_actions();
this.video.currentTime = 0;
$('a.reset').fadeOut();
$('.text').fadeOut();
},
timer_actions: function() {
var self = this;
var eventFired = {};
this.video.removeEventListener('timeupdate');
this.video.addEventListener('timeupdate', function(event) {;
var currentTime = parseInt(self.video.currentTime, 10);
for(var i = 0, l = self.actions.length; i < l; i++) {
if(currentTime === self.actions[i].time && !eventFired[currentTime]) {
self.actions[i].action();
eventFired[currentTime] = true;
}
}
}, false);
}
}
$(document).ready(function() {
clinique_animation.init();
});

How use canvas from external video?

I have the following code:
<!DOCTYPE html>
<title>Video/Canvas Gray Effect</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var back = document.createElement('canvas');
var backcontext = back.getContext('2d');
var cw,ch;
v.addEventListener('play', function(){
cw = v.clientWidth;
ch = v.clientHeight;
canvas.width = cw;
canvas.height = ch;
back.width = cw;
back.height = ch;
draw(v,context,backcontext,cw,ch);
},false);
},false);
function draw(v,c,bc,w,h) {
if(v.paused || v.ended) return false;
// First, draw it into the backing canvas
bc.drawImage(v,0,0,w,h);
// Grab the pixel data from the backing canvas
var idata = bc.getImageData(0,0,w,h);
var data = idata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4) {
var r = data[i];
var g = data[i+1];
var b = data[i+2];
var brightness = (3*r+4*g+b)>>>3;
data[i] = brightness;
data[i+1] = brightness;
data[i+2] = brightness;
}
idata.data = data;
// Draw the pixels onto the visible canvas
c.putImageData(idata,0,0);
// Start over!
setTimeout(draw,20,v,c,bc,w,h);
}
</script>
<video id=v controls loop>
<source src=video.webm type=video/webm>
</video>
<canvas id=c></canvas>
<style>
#c {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 20px;
}
#v {
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -500px;
}
</style>
The canvas work only if the video hosted in my site, but if a external video the canvas not working only work if make a proxy using the same domain, for example:
Working if a hosted the video on my site:
<video id=v controls loop>
<source src=video.webm type=video/webm>
</video>
Working if a use a proxy, but I will not use a proxy:
<video id=v controls loop>
<source src=./proxy.php?url_toexternal_video=http://host.com/video.webm type=video/webm>
</video>
Not working if a use the direct link to the video:
<video id=v controls loop>
<source src=http://host.com/video.webm type=video/webm>
</video>
any way to make it work if it is from an external video? Thanks! ;)

Nope, there's no way to use getImageData on a canvas that has been tainted by cross-origin content.