gerbenvandijk

// 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

@z-index-order: 'contact', 'lightbox', 'nav';

.zindex(@elementName) {

    .loop(@elementName, @counter) when (@counter > 0) {

        .loop(@elementName, @counter - 1);
        .pickIndex(@elementName, @counter);

    }

gerbenvandijk

<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

<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

<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

<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

AddType video/mp4 f4v f4p m4v mp4
AddType video/ogg ogv
AddType video/webm webm

gerbenvandijk

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

// 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?

});

gerbenvandijk

<img src="myimage.jpg" data-2x="myimage-2x.jpg">