Skip to content

Instantly share code, notes, and snippets.

Avatar

Gerben van Dijk gerbenvandijk

View GitHub Profile
@gerbenvandijk
gerbenvandijk / hrt.js
Last active Aug 29, 2015
- When title is not visible anymore, then show the title in the top bar. - Show a reading time indicator.
View hrt.js
// Function to convert to human readable time
function millisecondsToStr(milliseconds) {
function numberEnding (number) {
return (number > 1) ? 's left' : ' left';
}
var temp = Math.floor(milliseconds / 1000);
@gerbenvandijk
gerbenvandijk / z-index-mixin.less
Last active Dec 13, 2019
Z-index mixin for LESS
View z-index-mixin.less
@z-index-order: 'contact', 'lightbox', 'nav';
.zindex(@elementName) {
.loop(@elementName, @counter) when (@counter > 0) {
.loop(@elementName, @counter - 1);
.pickIndex(@elementName, @counter);
}
View html5video-subtitles.html
<track kind="subtitles" label="English subtitles" src="subtitles_en.vtt" srclang="en" default></track>
<track kind="subtitles" label="Nederlandse ondertitels" src="subtitles_nl.vtt" srclang="nl"></track>
@gerbenvandijk
gerbenvandijk / mediafragment.html
Created Jun 27, 2014
HTML5 video media fragment
View mediafragment.html
<source src="http://www.domain.com/assets/video/video.webm#t=10,20" type="video/webm" />
<!-- Set's the media fragment to play the video from 10 to 20 seconds. -->
@gerbenvandijk
gerbenvandijk / html5video-basic-sources.html
Created Jun 27, 2014
Basic HTML5 video implementation including sources
View html5video-basic-sources.html
<video width="1920" height="1080" poster="http://www.domain.com/assets/img/poster.jpg" autoplay loop preload muted>
<source src="http://www.domain.com/assets/video/video.mp4" type="video/mp4" />
<source src="http://www.domain.com/assets/video/video.webm" type="video/webm" />
<source src="http://www.domain.com/assets/video/video.ogv" type="video/ogg" />
</video>
<!--
@gerbenvandijk
gerbenvandijk / html5video-basic.html
Created Jun 27, 2014
Basic HTML5 video implementation
View html5video-basic.html
<video width="1920" height="1080" src="http://www.domain.com/assets/video/video.mp4" poster="http://www.domain.com/assets/img/poster.jpg" autoplay loop preload muted></video>
<!--
The above element behaves like this:
- Sets the width and height of the video element to 1920x1080 (can be overridden by CSS or even JS).
- Sets the source of the video to the URL of the video file.
- Sets a poster image to show before the video plays.
- Makes the video play automatically as soon as possible.
@gerbenvandijk
gerbenvandijk / .htaccess
Created Jun 27, 2014
Mime Types for HTML5 video
View .htaccess
AddType video/mp4 f4v f4p m4v mp4
AddType video/ogg ogv
AddType video/webm webm
@gerbenvandijk
gerbenvandijk / dynamicvideo.js
Last active Jul 18, 2019
Dynamically loading a HTML5 video element with JavaScript
View dynamicvideo.js
function loadVid(){
var videourl = 'urltoyourvideo here'; // set the url to your video file here
var videocontainer = '#videocontainer'; // set the ID of the container that you want to insert the video in
var parameter = new Date().getMilliseconds(); // generate variable based on current date/time
var video = '<video width="1102" height="720" id="intro-video" autoplay loop src="' + videourl + '?t=' + parameter + '"></video>'; // setup the video element
$(videocontainer).append(video); // insert the video element into its container
@gerbenvandijk
gerbenvandijk / playHTMLvideo.js
Last active Aug 29, 2015
Initiate play event on click
View playHTMLvideo.js
// jQuery version - we use the .on() function to make sure we can also run the function on dynamically inserted elements.
$(document).on("click", "a.playbtn", function (e) {
var video = $(document).find('#intro-video')[0]; // Find the video element to play
video.play(); // play the video, simple innit?
});
View retinaimg.html
<img src="myimage.jpg" data-2x="myimage-2x.jpg">