This might be a challenge, but is it possible to make something like this:
https://codepen.io/ollieRogers/pen/lfeLc/
HTML:
#set-height
p#time
video(id="v0", tabindex="0", autobuffer preload)
<source type="video/webm; codecs="vp8, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.webm"></source>
<source type="video/ogg; codecs="theora, vorbis"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.ogv"></source>
<source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="https://www.html5rocks.com/tutorials/video/basics/Chrome_ImF.mp4"></source>
p Sorry, your browser does not support the <video> element.
JS:
var frameNumber = 0, // start video at frame 0
// lower numbers = faster playback
playbackConst = 500,
// get page height from video duration
setHeight = document.getElementById("set-height"),
// select video element
vid = document.getElementById('v0');
// var vid = $('#v0')[0]; // jquery option
// dynamically set the page height according to video length
vid.addEventListener('loadedmetadata', function() {
setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
});
// Use requestAnimationFrame for smooth playback
function scrollPlay(){
var frameNumber = window.pageYOffset/playbackConst;
vid.currentTime = frameNumber;
window.requestAnimationFrame(scrollPlay);
}
window.requestAnimationFrame(scrollPlay);
CSS:
#set-height
display block
#v0
position fixed
top 0
left 0
width 100%
p font-family helvetica
font-size 24px
With a Vimeo video? So that you can control/play the Vimeo video with your scrollbar? Scrolling down is playing video forward, scrolling up is playing video backwards. Does anybody know this?
Related
Still very much a newbie to coding, so please be gentle :)
I'm hoping someone might be able to help how to use Paper.js on a second canvas after the first one has been executed?
I'm trying to use x2 canvas elements:
Canvas 1 - to capture a html5 video image still and convert to base64 (tick :-) = done)
Canvas 2 - Use the base64 image and perform the 'Working with Rasters to find the colors of pixels' and convert to circle paths (boo = fail :-( )
Something like this:
The code:
<script src="https://cdn.jsdelivr.net/npm/hls.js#latest"></script>
<video id="video" preload="auto" muted="" playsinline="" width="580" src="blob:https://www.georgefisher.co.uk/78e3a45c-ae07-4ea5-af56-45a5ed9cf1b0"></video>
<script>
var video = document.getElementById('video');
var videoSrc = 'https://camsecure.co/HLS/georgefisher.m3u8';
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
}
video.play()
</script>
<br>
<button onclick="capture()">Capture</button>
<br>
<canvas id="canvas" style="overflow:auto">
</canvas>
<canvas id="canvas2" resize>
<img src="" id="myImg"/></canvas>
var resultb64="";
function capture() {
var canvas = document.getElementById('canvas');
var video = document.getElementById('video');
canvas.width = video.videoWidth/4;
canvas.height = video.videoHeight/4;
canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth/4, video.videoHeight/4);
resultb64=canvas.toDataURL();
document.querySelector("#myImg").src = canvas.toDataURL();
}
/*Paper JS Setup for working in CodePen */
/* ====================== *
* 0. Initiate Canvas *
* ====================== */
// expose paperjs classes into global scope
paper.install(window);
// Only executed our code once the DOM is ready.
window.onload = function() {
// bind paper to the canvas
paper.setup('canvas2');
// paper.activate();
// Get a reference to the canvas object
var canvas = document.getElementById('canvas2');
var ctx = canvas.getContext('2d');
// console.log(ctx, image);
// ctx.drawImage(image, 0, 0);
// return;
// }
// Create a raster item using the image id='' tag
var image = document.querySelector('img');
var raster = new Raster(image);
// Hide the raster:
raster.visible = false;
// The size of our grid cells:
var gridSize = 15;
// Space the cells by 120%:
var spacing = 1
;
// As the web is asynchronous, we need to wait for the raster to load before we can perform any operation on its pixels.
raster.onLoad = function() {
// Since the example image we're using is much too large, and therefore has way too many pixels, lets downsize it to 40 pixels wide and 30 pixels high:
raster.size = new Size(40, 30);
for (var y = 0; y < raster.height; y++) {
for(var x = 0; x < raster.width; x++) {
// Get the color of the pixel:
var color = raster.getPixel(x, y);
// Create a circle shaped path:
var path = new Path.Circle({
center: new Point(x, y).multiply(gridSize),
radius: gridSize / 2 / spacing,
});
// Set the fill color of the path to the color
// of the pixel:
path.fillColor = color;
}
}
// Move the active layer to the center of the view, so all the created paths in it appear centered.
project.activeLayer.position = view.center;
}
}
I've tried giving the second canvas a different Id="canvas2" and referencing that, which I can see in the console. However, nothing appears in the second canvas and the paper.js script doesn't seem to execute, can someone help me understand why?
Please see also see link to the fiddle below:
https://jsfiddle.net/jmnes/o4Lpkfs6/1/
Alternatives method.
You don't need to capture the video, you don't need to capture the pixels using paper.js and raster. You don't need to find the color of each circle and draw it.
All these methods are slow, complex, and power hungry.
You can create a mask and mask out the circles, with the colors drawn from a smaller canvas with a res that matches the number off circles.
How to
Add one (main canvas) canvas to the DOM. This will display the result
Create 2 offscreen canvas.
One (color canvas) has the same resolution as the circles you want to display. Eg if you have 30 by 40 circle the canvas res should be 30 by 40
One (mask canvas) is the circle mask. It is the same resolution as the main canvas. Draw the circles all in one color on this canvas.
Then rendering once a frame
Draw the video on the color canvas to fit.
Turn off smoothing on the main canvas eg ctxMain.imageSmoothingEnabled = false
Draw the color canvas onto the main canvas to fit.
This will draw a color square at each circle position. ctx.drawImage(colorCanvas, 0, 0, mainCanvas.width, mainCanvas.height)
Set composite operation "destination-in" eg ctxMain.globalCompositeOperation = "destination-in"
Draw the mask canvas (canvas with circles on it) onto the main canvas. This will remove pixels outside each circle.
Restore default composite operation for the main canvas ctxMain.globalCompositeOperation = "source-over"
All done for a real-time FX on almost any device.
The above methods is the fastest way to render the effect you are after using the 2D API
In my server, shell_exec and exec functions are disable. That is why, I need another solution may be using HTML5 and javascript. Please give me some suggestions. If anyone want to help by giving codes, please provide workable codes.
Thanks in advance
On the client-side you can do it with a HTML5 canvas.
HTML:
<video>
<source src="..." type="video/mp4">
</video>
<canvas>
</canvas>
<img id="screenshot" />
JavaScript:
// draw the image
var context = canvas.getContext('2d');
context.fillRect(0, 0, w, h);
context.drawImage(video, 0, 0, w, h);
// set it as img
var dataURL = canvas.toDataURL();
document.getElementById('screenshot').src = dataURL;
Working example on: HTML5 Canvas Video Screenshot
Save canvas as image
I have a video and I need to capture 3 images from it, at different time. Time is not random, I have to take images at specified time (13:10:02, 13:10:03, 13:10:04). The images should be displayed on the page when I access the page, not when I click a button or something like that.
Until now I tried with an example that I found on the internet, but on this example, the image is displayed after a button was clicked, and I don't know how to give a specified time.
<video controls>
<source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"></source>
<source src="http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"></source>
</video>
<canvas id="canvas" width="640" height="480"></canvas>
<button id="snap" onclick="snap()">Snap Photo</button>
<script>
var video=document.querySelector('video');
var canvas=document.querySelector('canvas');
var context=canvas.getContext('2d');
var w,h,ratio;
//add loadedmetadata which will helps to identify video attributes......
video.addEventListener('loadedmetadata',function()
{
ratio=video.videoWidth/video.videoHeight;
w=video.videoWidth-100;
h=parseInt(w/ratio,10);
canvas.width=w;
canvas.height=h;
},false);
///define a function
function snap()
{
context.fillRect(0,0,w,h);
context.drawImage(video,0,0,w,h);
}
</script>
You can set the time, for which frame you want to draw to canvas, by setting the currentTime on the video object.
Then you need to wait for video to finish seeking, draw the video onto canvas an move to the next frame.
Of course you need to wait for the video to load before you start drawing its frames.
var images = [ // defined canvases and times for frames
{
canvas: '#canvas1',
time: 10.0 // in seconds
},
{
canvas: '#canvas2',
time: 19.0
},
{
canvas: '#canvas3',
time: 26.0
},
];
function drawFrame(video, time, canvas, callback)
{
var context = canvas.getContext("2d");
video.addEventListener("seeked", function(e) {
e.target.removeEventListener(e.type, arguments.callee); // remove the handler or else it will draw another frame on the same canvas, when the next seek happens
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(video, 0, 0, canvas.width, canvas.height);
callback();
});
video.currentTime = time;
}
function draw(video, images, i)
{
if (i >= images.length)
return;
drawFrame(video, images[i].time, images[i].canvas, function() {
draw(video, images, i+1);
});
}
var video = document.createElement('video');
video.addEventListener('loadedmetadata', function() // when the metadata is loaded set the canvases size and start drawing frames
{
var ratio = video.videoWidth / video.videoHeight;
var w = video.videoWidth - 100; // set the width of the images to 100 px less than the video
var h = w / ratio; // fix the height accordingly
for (var i=0; i<images.length; i++)
{
images[i].canvas = document.querySelector(images[i].canvas);
images[i].canvas.width = w;
images[i].canvas.height = h;
}
draw(video, images, 0);
});
video.src = "http://www.jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v";
JSFiddle
I want an image to remain the full height of the browser window even if the window is made smaller. This seems to do the trick. However, at current, the image remains anchored to the left side of the screen with the right side of the image being what is lost as the window resizes. Instead, I'd like the image to chop from both sides leaving a centered image. Is this possible?
Note: I need the image in a div, not set as background.
Thanks!
Here is the CSS I'm currently using:
.div
{
min-height:100%;
min-width:100%;
text-align:center;
overflow: hidden;
margin: 0 auto;
}
.img
{
min-height:100%;
min-width:100%;
margin: 0 auto;
}
something like this ?
var origWidth;
$(document).ready(function() {
origWidth = $(window).width(); //store the window's width when the document loads
origHeight = $(window).height(); //store the window's width when the document loads
});
$(window).resize(function() {
var curWidth = $(window).width(); //store the window's current width
var curHeight = $(window).width(); //store the window's current height
var deltaTop = (curWidth- origWidth);
var deltaLeft = (curHeight- origHeight);
$("#image1").offset({top:($("#image1").offset().top + deltaTop)});
$("#image1").offset({left:($("#image1").offset().top + deltaLeft)});
origWidth = curWidth;
origHeight =curHeight;
});
JsFiddle
(inspired by this question's solution: link)
I’d like to concatenate two or three images (bottom of one to top of next) , and save that image for use on another page (shopping cart page) as a thumbnail. I've been looking into using either the HTML5 cache manifest, or the canvas.toDataURL() method. Which is more suited to this purpose?
I've written code for the toDataURL() method below:
<div style="width: 80px;">
<img id="imageA" src="imageA.jpg" alt="imageA"
width="70" height="400" >
<img id="imageB" src="imageB.jpg" alt="imageB"
width="70">
<canvas id="canvas1"></canvas>
<script type="text/javascript">
var img1 = document.getElementById("imageA");
var img2 = document.getElementById("imageB");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
canvas1.width = "70";
canvas1.height = "470";
context1.globalAlpha = 1.0;
var combinedImage = ctx.getImageData(0, 0, 70, 470);
var imgURL = canvas.toDataURL("image/png");
</script>
</div>
A cache manifest has no relevance here unless you want to have the images available when off-line, but has no effect when it comes to merging images.
The code shown is not actually drawing the images into the canvas and when you call getImageData() you will only get an empty pixel buffer which is not useful here.
Try something like this instead (JavaScript part only):
var img1 = document.getElementById("imageA");
var img2 = document.getElementById("imageB");
var canvas1 = document.getElementById("canvas1");
var context1 = canvas1.getContext("2d");
canvas1.width = 70; /// use numbers instead of strings here
canvas1.height = img1.height + img2.height;
/// draw the images onto canvas
context1.drawImage(img1, 0, 0);
context1.drawImage(img2, 0, img1.height);
var imgURL = canvas1.toDataURL(); /// defaults to PNG
Now your imgURL will contain the concatenated images as a PNG provided CORS requirements are fulfilled (ie. they are on the same server). You should also see the on-screen canvas with the two images embedded.
Hope this helps.