66 lines
1.4 KiB
HTML
66 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
#myVideoLoop video {
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
|
|
#myVideoLoop {
|
|
position: fixed;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
overflow: hidden;
|
|
}
|
|
#myVideoLoop > video {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
@media (min-aspect-ratio: 16/9) {
|
|
#myVideoLoop > video { height: 300%; top: -100%; }
|
|
}
|
|
@media (max-aspect-ratio: 16/9) {
|
|
#myVideoLoop > video { width: 300%; left: -100%; }
|
|
}
|
|
@supports (object-fit: cover) {
|
|
#myVideoLoop > video {
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.source_info {
|
|
position: absolute;
|
|
z-index: 99999;
|
|
}
|
|
</style>
|
|
<script src="videoloop.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="source_info">
|
|
<a href="../index.html"> <- back</a>
|
|
</div>
|
|
<div id="myVideoLoop"></div>
|
|
<script>
|
|
|
|
window.onload = function() {
|
|
|
|
// Initialize video loop
|
|
videoLoopObj = new VideoLoop('myVideoLoop');
|
|
videoLoopObj.transitionDelay = 90; // delay until the second video starts
|
|
videoLoopObj.length = 7290; // original lenght: 7400ms (07.40s)
|
|
videoLoopObj.paths = ['gfdgsgds.mp4'];
|
|
videoLoopObj.types = ['video/mp4'];
|
|
videoLoopObj.volume = 0.3;
|
|
videoLoopObj.init();
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|