API tools faq
paste
Advertisement
Thunder-Menu

VideoPlayListJson.html

Thunder-Menu
Aug 16th, 2023 (edited)
1,266
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 6.05 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Video Player</title>
  5. </head>
  6. <body>
  7.     <video id="videoPlayer" width="640" height="360" controls>
  8.         <source src="" type="video/mp4">
  9.         <source src="" type="video/webm">
  10.         <source src="" type="video/ogg">
  11.         Your browser does not support the video tag.
  12.     </video>
  13.     <br>
  14.     <button id="playButton">Play</button>
  15.     <button id="pauseButton">Pause</button>
  16.     <button id="stopButton">Stop</button>
  17.     <button id="backButton">Back</button>
  18.     <button id="nextButton">Next</button>
  19.     <button id="openButton">Open Video</button>
  20.     <button id="deleteButton">Delete Video</button>
  21.     <button id="refreshButton">Refresh List from JSON</button>
  22.     <button id="saveButton">Save Video List</button>
  23.     <select id="videoList"></select>
  24.  
  25.     <script>
  26.         var videoPlayer = document.getElementById('videoPlayer');
  27.         var playButton = document.getElementById('playButton');
  28.         var pauseButton = document.getElementById('pauseButton');
  29.         var stopButton = document.getElementById('stopButton');
  30.         var backButton = document.getElementById('backButton');
  31.         var nextButton = document.getElementById('nextButton');
  32.         var openButton = document.getElementById('openButton');
  33.         var deleteButton = document.getElementById('deleteButton');
  34.         var refreshButton = document.getElementById('refreshButton');
  35.         var saveButton = document.getElementById('saveButton');
  36.         var videoList = document.getElementById('videoList');
  37.         var currentVideoIndex = 0;
  38.  
  39.         var videos = [];
  40.  
  41.         function loadVideosFromConfig(config) {
  42.             videos = config;
  43.             videoList.innerHTML = ''; // Clear existing options
  44.             videos.forEach(function (video, index) {
  45.                 addOptionToComboBox(index, video.name);
  46.             });
  47.             loadCurrentVideo();
  48.         }
  49.  
  50.         function loadCurrentVideo() {
  51.             videoPlayer.src = videos[currentVideoIndex].src;
  52.             videoPlayer.load();
  53.         }
  54.  
  55.         playButton.addEventListener('click', function () {
  56.             videoPlayer.play();
  57.         });
  58.  
  59.         pauseButton.addEventListener('click', function () {
  60.             videoPlayer.pause();
  61.         });
  62.  
  63.         stopButton.addEventListener('click', function () {
  64.             videoPlayer.pause();
  65.             videoPlayer.currentTime = 0;
  66.         });
  67.  
  68.         backButton.addEventListener('click', function () {
  69.             if (currentVideoIndex > 0) {
  70.                 currentVideoIndex--;
  71.                 loadCurrentVideo();
  72.             }
  73.         });
  74.  
  75.         nextButton.addEventListener('click', function () {
  76.             if (currentVideoIndex < videos.length - 1) {
  77.                currentVideoIndex++;
  78.                loadCurrentVideo();
  79.            }
  80.        });
  81.  
  82.        openButton.addEventListener('click', function () {
  83.            var fileInput = document.createElement('input');
  84.            fileInput.type = 'file';
  85.            fileInput.accept = 'video/*';
  86.            fileInput.addEventListener('change', function (event) {
  87.                var file = event.target.files[0];
  88.                if (file) {
  89.                    var videoSrc = URL.createObjectURL(file);
  90.                    var videoName = prompt('Enter video name:');
  91.                    if (videoName) {
  92.                        videos.push({ name: videoName, src: videoSrc });
  93.                        addOptionToComboBox(videos.length - 1, videoName);
  94.                    }
  95.                }
  96.            });
  97.            fileInput.click();
  98.        });
  99.  
  100.        deleteButton.addEventListener('click', function () {
  101.            var selectedIndex = parseInt(videoList.value);
  102.            if (selectedIndex >= 0) {
  103.                 var videoName = videos[selectedIndex].name;
  104.                 var deleteConfirm = confirm('Delete ' + videoName + '?');
  105.                 if (deleteConfirm) {
  106.                     videos.splice(selectedIndex, 1);
  107.                     videoList.removeChild(videoList.options[selectedIndex]);
  108.                     if (currentVideoIndex === selectedIndex) {
  109.                         currentVideoIndex = 0;
  110.                         loadCurrentVideo();
  111.                     }
  112.                 }
  113.             }
  114.         });
  115.  
  116.         refreshButton.addEventListener('click', function () {
  117.             var fileInput = document.createElement('input');
  118.             fileInput.type = 'file';
  119.             fileInput.accept = '.json';
  120.             fileInput.addEventListener('change', function (event) {
  121.                 var file = event.target.files[0];
  122.                 if (file) {
  123.                     var reader = new FileReader();
  124.                     reader.onload = function (event) {
  125.                         var config = JSON.parse(event.target.result);
  126.                         loadVideosFromConfig(config);
  127.                     };
  128.                     reader.readAsText(file);
  129.                 }
  130.             });
  131.             fileInput.click();
  132.         });
  133.  
  134.         saveButton.addEventListener('click', function () {
  135.             var jsonString = JSON.stringify(videos, null, 2);
  136.             var blob = new Blob([jsonString], { type: 'application/json' });
  137.             var url = URL.createObjectURL(blob);
  138.             var a = document.createElement('a');
  139.             a.href = url;
  140.             a.download = 'videos.json';
  141.             a.style.display = 'none';
  142.             document.body.appendChild(a);
  143.             a.click();
  144.             document.body.removeChild(a);
  145.             URL.revokeObjectURL(url);
  146.         });
  147.  
  148.         videoList.addEventListener('change', function () {
  149.             currentVideoIndex = parseInt(videoList.value);
  150.             loadCurrentVideo();
  151.         });
  152.  
  153.         function addOptionToComboBox(index, text) {
  154.             var option = document.createElement('option');
  155.             option.value = index;
  156.             option.textContent = text;
  157.             videoList.appendChild(option);
  158.         }
  159.     </script>
  160. </body>
  161. </html>
  162. <!--
  163. https://encodedecodetobmp.w3spaces.com/VideoPlayListJson.html
  164. -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!