Skip to content

Instantly share code, notes, and snippets.

@marpontes
Created October 17, 2016 11:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marpontes/22a2129e10353250ca349cd7f41a8ef6 to your computer and use it in GitHub Desktop.
Save marpontes/22a2129e10353250ca349cd7f41a8ef6 to your computer and use it in GitHub Desktop.
Reveal.js custom controls - offline video with custom key bindings
/*
Autoplay mp4 video and key bindings
*/
var vidIdx = 13;
var vidId = "demoVid";
var vid = document.getElementById(vidId);
Reveal.addEventListener( 'slidechanged', vidControl );
Reveal.addEventListener( 'ready', vidControl );
Reveal.configure({
keyboard: {
69: pauseControl,
101: pauseControl
}
});
function pauseControl(){
if(vid.paused){
vid.play();
}else{
vid.pause();
}
}
function vidControl(event){
if(event.indexh === vidIdx){
vid.play();
}else{
vid.pause();
vid.currentTime = 0;
}
}
<section data-id="132495209a4d01f3fd2bca78b0b91fe4">
<div class="sl-block" data-block-type="iframe" data-block-id="ff881ce87deb19f533dd58a8dc9d5404" style="min-width: 30px; min-height: 30px; width: 1160px; height: 700px; left: -100px; top: 0px;">
<div class="sl-block-content" style="z-index: 11;">
<video controls id="demoVid" style="width:100%;">
<source src="vid/lorka04.mp4" type="video/mp4" >
Your browser does not support the video tag.
</video>
</div>
</div>
</section>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment