60 lines
926 B
HTML
60 lines
926 B
HTML
|
{% include base.html %}
|
||
|
|
<button id="video_pause">Pause<br />Video</button>
|
||
|
|
|
||
|
|
|
||
|
|
<video autoplay loop poster="{{ base }}/assets/img/bg/frontpage.jpg" id="bgvid">
|
||
|
|
<source src="{{ base }}/assets/vi/0001-0076.webm" type="video/webm">
|
||
|
|
<source src="{{ base }}/assets/vi/0001-0076.mp4" type="video/mp4">
|
||
|
|
</video>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
|
||
|
|
var vid = document.getElementsByTagName("video")[0];vid.playbackRate = 0.1;
|
||
|
|
|
||
|
|
var pauseButton = document.getElementById("video_pause");
|
||
|
|
|
||
|
|
function vidFade() {
|
||
|
|
|
||
|
|
vid.classList.add("stopfade");
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
vid.addEventListener('ended', function() {
|
||
|
|
|
||
|
|
// only functional if "loop" is removed
|
||
|
|
|
||
|
|
vid.pause();
|
||
|
|
|
||
|
|
// to capture IE10
|
||
|
|
|
||
|
|
vidFade();
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
pauseButton.addEventListener("click", function() {
|
||
|
|
|
||
|
|
vid.classList.toggle("stopfade");
|
||
|
|
|
||
|
|
if (vid.paused) {
|
||
|
|
|
||
|
|
vid.play();
|
||
|
|
|
||
|
|
pauseButton.innerHTML = "Pause Video";
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
vid.pause();
|
||
|
|
|
||
|
|
pauseButton.innerHTML = "Resume Video";
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|