Skip to content

Instantly share code, notes, and snippets.

Avatar
🤓

Gerben van Dijk gerbenvandijk

🤓
  • Tech Lead Frontend @ Tui Spain
  • Amsterdam, The Netherlands
View GitHub Profile
@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?
});
@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>
<!--
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 / 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 / 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 / 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);
View Detect safari on windows
safari = ($.browser.webkit && !(/chrome/.test(navigator.userAgent.toLowerCase())));
windows = (navigator.userAgent.indexOf("Win")!=-1);
if (safari && windows) {
alert('this is safari on windows');
}
@gerbenvandijk
gerbenvandijk / random video ID from a users videofeed
Last active Dec 17, 2015
// Function that returns random video ID from a users videofeed
View random video ID from a users videofeed
<?php
// Function that returns random video ID from a users videofeed
function RandomYoutube($youtubefeed){
$feedresult = simplexml_load_file($youtubefeed);
$videoids = array();
foreach ($feedresult->entry as $video) {
@gerbenvandijk
gerbenvandijk / ShowTweets.php
Last active Dec 18, 2015
Get tweets (using the Twitter API 1.1) and cache them using the Wordpress Transient API. You need twitter-api-php (http://github.com/j7mbo/twitter-api-php).
View ShowTweets.php
<?php
function ShowTweets(){
// Setting the name of our transient
$transName = 'twitter';
// Time that the transient expires (in minutes)
$cacheTime = 10;