sakrecoer-mother-web/_includes/video_BG.html
2019-04-28 19:33:43 +02:00

60 lines
927 B
HTML

<button id="video_pause">Pause<br />Video</button>
<video autoplay loop poster="{{ site.baseurl }}/assets/img/bg/frontpage.jpg" id="bgvid">
<source src="{{ site.baseurl }}/assets/vi/0001-0076.webm" type="video/webm">
<source src="{{ site.baseurl }}/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>