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();
});
Related
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.
I am trying to change my video source if my screen width is under 1000px.
Any help would be much appreciated as with my little knowledge with javascript and Jquery i am not sure what to do from here.
Thanks.
My current code below:
HTML
<video id="bg-vid" autoplay defaltmuted playsinline>
<source id="v1" src="img/optimised/desktop-palmtrees.mp4" type="video/mp4">
<source src="img/Palm_Trees.webm" type="video/webm" onerror="fallback(parentNode)">
</video>
Jquery
$(document).ready(function($){
'use strict';
if ($(window).width() < 1000) {
var videoFile = 'img/optimised/desktop-palmtrees.mp4';
var source = document.getelementbyid('v1');
source.src = videoFile;
}
else if ($(window).width() > 1000) {
var videoFile = 'img/optimised/iphone-palmtrees.mp4';
var source = document.getelementbyid('v1');
source.src = videoFile;
}
});
Here you go, I added some console.log() for you to trace the src attribute.
$(function(){
console.log('before: '+$('#v1').attr('src'));
if ($(window).width() < 1000) {
var videoFile = 'img/optimised/desktop-palmtrees.mp4';
$('#v1').attr('src',videoFile);
}
else if ($(window).width() > 1000) {
var videoFile = 'img/optimised/iphone-palmtrees.mp4';
$('#v1').attr('src',videoFile);
}
console.log('after: '+$('#v1').attr('src'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="bg-vid" autoplay defaltmuted playsinline>
<source id="v1" src="test.mp4" type="video/mp4">
<source src="img/Palm_Trees.webm" type="video/webm" >
</video>
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
Why does this code work on normal browsers, but show the same screenshot for Android browsers?
Html
<div class="video">
<video id="video" src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" muted controls autoplay></video>
</div>
<div class="timeline" id="timeline"></div>
JavaScript
var timeline = document.getElementById('timeline'),
video = document.getElementById('video'),
interval = null;
video.addEventListener("playing", onStart);
video.addEventListener("pause", onStop);
video.addEventListener("ended", onEnd);
function onStart() {
if (interval == null) {
interval = window.setInterval(createImage, 1000);
}
}
function onStop() {
if (interval) {
clearInterval(interval);
interval = null;
}
}
function onEnd() {
onStop();
video.removeEventListener("playing", onStart);
video.removeEventListener("pause", onStop);
video.removeEventListener("ended", onEnd);
}
function createImage() {
console.log('createImage', video.currentTime, video.videoWidth, video.videoHeight);
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
timeline.appendChild(canvas);
}
Here is the full code:
http://jsfiddle.net/kmturley/z99cmwtq/6/
how come this works for me in chrome android 4.4.4 ?
drawImage()
codepen
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.