|
| 1 | +// Array of video file names in the current directory |
| 2 | +var currentDirVideoFiles = [ |
| 3 | + 'video.mp4', |
| 4 | + 'video.mp4', |
| 5 | + 'video.mp4', |
| 6 | + 'video.mp4', |
| 7 | + 'video.mp4', |
| 8 | + 'video.mp4' |
| 9 | +]; |
| 10 | + |
| 11 | +// Get the video container element from the HTML document |
| 12 | +const videoContainer = document.getElementsByClassName('video-container')[0]; |
| 13 | + |
| 14 | +// Function to create video elements based on the provided array of video files |
| 15 | +function createElements(arr) { |
| 16 | + |
| 17 | + for (let i = 0; i < arr.length; i++) { |
| 18 | + // Create a div element for each video |
| 19 | + let videoDiv = document.createElement('div'); |
| 20 | + videoDiv.classList = 'video'; |
| 21 | + |
| 22 | + // Create a video element |
| 23 | + let video = document.createElement('video'); |
| 24 | + video.muted = true; |
| 25 | + |
| 26 | + // Path of the video |
| 27 | + video.src = `./${arr[i]}`; |
| 28 | + |
| 29 | + // Adding the feature so that user does not download the video |
| 30 | + video.controlsList.add('nodownload'); |
| 31 | + |
| 32 | + // Adding the option so that menu option will remove/disable |
| 33 | + video.oncontextmenu = function (e) { |
| 34 | + e.preventDefault(); |
| 35 | + }; |
| 36 | + |
| 37 | + // Append the video element to the video div |
| 38 | + videoDiv.appendChild(video); |
| 39 | + |
| 40 | + // Append the video div to the video container |
| 41 | + videoContainer.appendChild(videoDiv); |
| 42 | + } |
| 43 | +} |
| 44 | + |
| 45 | +// Function to handle the click events of video elements |
| 46 | +function load() { |
| 47 | + |
| 48 | + // Add click event listener to each video element inside the video container |
| 49 | + document.querySelectorAll('.video-container video').forEach(vid => { |
| 50 | + vid.onclick = () => { |
| 51 | + // Display the popup video container |
| 52 | + document.querySelector('.popup-video').style.display = 'block'; |
| 53 | + |
| 54 | + // Set the source of the popup video to the clicked video source |
| 55 | + document.querySelector('.popup-video video').src = vid.getAttribute('src'); |
| 56 | + } |
| 57 | + }); |
| 58 | + |
| 59 | + // Add click event listener to the close button of the popup video |
| 60 | + document.querySelector('.popup-video span').onclick = () => { |
| 61 | + let videoContainer = document.querySelector('.popup-video'); |
| 62 | + let video = videoContainer.querySelector('video'); |
| 63 | + |
| 64 | + // Pause the video and hide the popup video container |
| 65 | + video.pause(); |
| 66 | + videoContainer.style.display = 'none'; |
| 67 | + } |
| 68 | +} |
| 69 | + |
| 70 | +// Initialization function |
| 71 | +function init() { |
| 72 | + // Create video elements based on the current directory video files |
| 73 | + createElements(currentDirVideoFiles); |
| 74 | + |
| 75 | + // Wait for some time before attaching the event listeners |
| 76 | + setTimeout(load, 1500); |
| 77 | +} |
| 78 | + |
| 79 | +// Call the init function to start the process |
| 80 | +init(); |
| 81 | + |
| 82 | +// Adding the option so that menu option will remove/disable |
| 83 | +document.addEventListener('contextmenu', function (e) { |
| 84 | + e.preventDefault(); |
| 85 | +}); |
0 commit comments