https://guoyangzhao.github.io/projects/ts1m/static/js/switch_videos.js

1function switchVideo(prefix, videoContainerId, preview_id) {
2    // Reference to all video containers
3    var video1Container = document.getElementById(prefix + 'video1Container');
4    var video2Container = document.getElementById(prefix + 'video2Container');
5
6    // Hide all video containers first
7    video1Container.style.display = 'none';
8    video2Container.style.display = 'none';
9
10    // Stop and reset videos
11    var videos = video1Container.getElementsByTagName('video');
12    for (var i = 0; i < videos.length; i++) {
13        videos[i].pause();
14    }
15
16    videos = video2Container.getElementsByTagName('video');
17    for (var i = 0; i < videos.length; i++) {
18        videos[i].pause();
19    }
20
21    // Show the selected video container
22    var selectedVideoContainer = document.getElementById(prefix + videoContainerId);
23    selectedVideoContainer.style.display = 'block';
24
25    // Update preview images
26    var videoPreview1 = document.getElementById(prefix + 'video1Preview');
27    var videoPreview2 = document.getElementById(prefix + 'video2Preview');
28
29    videoPreview1.className = videoPreview1.className.replace(" preview-video-active", "");
30    videoPreview2.className = videoPreview2.className.replace(" preview-video-active", "");
31
32    document.getElementById(prefix + preview_id).className += " preview-video-active";
33}
34
35
36function isElementInViewport(el) {
37    var rect = el.getBoundingClientRect();
38    return (
39        rect.top >= 0 &&
40        rect.left >= 0 &&
41        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
42        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
43    );
44}
45
46function isElementInViewport(el) {
47    var rect = el.getBoundingClientRect();
48    return (
49        rect.top >= 0 &&
50        rect.left >= 0 &&
51        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
52        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
53    );
54}
55
56function checkVideoVisibility() {
57    var videos = document.querySelectorAll('.auto-video');
58    videos.forEach(function(video) {
59        // Check if the video is in the viewport
60        if (isElementInViewport(video)) {
61            if (video.paused) {
62                video.currentTime = 0; // Reset to start
63                video.play();
64            }
65        } else {
66            video.pause();
67        }
68    });
69}
70
71window.addEventListener('scroll', checkVideoVisibility);
72
73document.addEventListener("DOMContentLoaded", function() {
74    // Get all video elements with class 'video-music'
75    var videos = document.querySelectorAll('.video-music');
76
77    // Loop through each video and set the volume
78    videos.forEach(function(video) {
79        video.volume = 0.25; // 25% volume
80    });
81});
82
83