Courses/Design & Technique-Essential Web Design/Q2/Example/Play pause video
From Publication Station
pause and play the video with the space key
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
body {text-align:center;}
div.videowrap {display: inline-block;}
</style>
</head>
<body>
<div class="videowrap">
<video id="testvideo" controls width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">
<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4" type="video/mp4">
<source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv" type="video/ogg">
</video>
</div>
<script>
$(document).ready(
function(){
video = $('video#testvideo')[0]; //video player on to variable
$( 'body').keydown(function( event ) {
if ( event.keyCode == "32" ) {
if ( video.paused == true) {
video.play();
}
else { video.pause();}
}
})
video.addEventListener('play', function(event){
$('body').css('background', 'url("http://www.aubenas-vals.com/wp-content/uploads/2014/05/Video41.jpg")');
})
video.addEventListener('pause', function(event){
$('body').css('background', 'white');
})
})
</script>
</body>
</html>
