Skip to content

Instantly share code, notes, and snippets.

View 99corps's full-sized avatar

99corps 99corps

37 followers · 129 following
  • Seoul, Korea
View GitHub Profile
@99corps
99corps / w3schools-tryhtml5_video.html
Created January 25, 2018 09:34 — forked from westc/w3schools-tryhtml5_video.html
Code to be tried out at W3Schools at https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video.
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<p>These are the frames' images generated by getVideoImage():</p>
@99corps
99corps / getVideoImage.js
Created January 25, 2018 02:00 — forked from westc/getVideoImage.js
A function to grab the frame at a specific point within a video.
function getVideoImage(path, secs, callback) {
var me = this, video = document.createElement('video');
video.onloadedmetadata = function() {
if ('function' === typeof secs) {
secs = secs(this.duration);
}
this.currentTime = Math.min(Math.max(0, (secs < 0 ? this.duration : 0) + secs), this.duration);
};
video.onseeked = function(e) {
var canvas = document.createElement('canvas');
@99corps
99corps / what-forces-layout.md
Last active September 21, 2015 02:24 — forked from paulirish/what-forces-layout.md
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()