☰

Sakugabooru Browse Fix

Replace specific img tag with video tag

当前为 2024-08-31 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Sakugabooru Browse Fix
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.12
  5. // @description  Replace specific img tag with video tag
  6. // @match        *://www.sakugabooru.com/post/browse*
  7. // @grant        none
  8. // @license MIT
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Function to replace the img with video
  15.     function replaceImageWithVideo() {
  16.         console.log("tampermonkey script working");
  17.  
  18.         // Select the img element using a class name (or any other selector as needed)
  19.         const imgElement = document.querySelector('img.main-image');
  20.         const vidElement = document.querySelector('.vjs-tech');
  21.  
  22.         // Initialize vidSrc variable
  23.         let vidSrc = null;
  24.  
  25.         // Check if the element exists
  26.         if (imgElement && !vidElement) {
  27.             // Extract the src attribute value
  28.             const imgSrc = imgElement.getAttribute('src');
  29.  
  30.             // Check if the src ends with .mp4
  31.             if (imgSrc && imgSrc.endsWith('.mp4')) {
  32.                 vidSrc = imgSrc; // Store the .mp4 URL in vidSrc
  33.                 console.log('Video Source:', vidSrc);
  34.                 // Create the new video element
  35.                 const video = document.createElement('video');
  36.                 video.className = 'vjs-tech';
  37.                 video.loop = true;
  38.                 video.setAttribute('data-setup', JSON.stringify({
  39.                     autoplay: true,
  40.                     controls: true,
  41.                     playbackRates: [0.2, 0.4, 0.6, 0.8, 1],
  42.                     plugins: {
  43.                         framebyframe: {
  44.                             fps: 24.0,
  45.                             steps: [
  46.                                 { text: '< 1f', step: -1 },
  47.                                 { text: '1f >', step: 1 }
  48.                             ]
  49.                         }
  50.                     }
  51.                 }));
  52.                 video.id = 'vjs_video_3_html5_api';
  53.                 video.tabIndex = -1;
  54.                 video.autoplay = true;
  55.  
  56.                 // Apply absolute positioning
  57.                 video.style.position = 'absolute';
  58.                 video.style.top = '43%';
  59.                 video.style.left = '50%';
  60.                 video.style.transform = 'translate(-50%, -50%)';
  61.                 video.style.maxWidth = '100%'; // Adjust to fit parent or as needed
  62.                 video.style.maxHeight = '100vh'; // Adjust to fit parent or as needed
  63.  
  64.                 // Create and append the source element
  65.                 const source = document.createElement('source');
  66.                 source.src = vidSrc;
  67.                 source.type = 'video/mp4';
  68.                 video.appendChild(source);
  69.  
  70.                 // Create and append the fallback content
  71.                 const p = document.createElement('p');
  72.                 p.className = 'vjs-no-js';
  73.                 p.innerHTML = 'To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="https://videojs.com/html5-video-support/" target="_blank" class="vjs-hidden" hidden="hidden">supports HTML5 video</a>';
  74.                 video.appendChild(p);
  75.  
  76.                 // Replace the img element with the video element
  77.                 imgElement.parentNode.parentNode.appendChild(video, imgElement);
  78.             } else {
  79.                 console.log('The src is an image');
  80.             }
  81.         } else {
  82.             console.log('Image element not found');
  83.             // Select the image and video elements
  84.             const imgElement = document.querySelector('img.main-image');
  85.             const vidElement = document.querySelector('.vjs-tech');
  86.  
  87.             // Get the src attributes
  88.             const imgSrc = imgElement ? imgElement.getAttribute('src') : null;
  89.             const vidSourceElement = vidElement ? vidElement.querySelector('source') : null;
  90.             const vidSrc = vidSourceElement ? vidSourceElement.getAttribute('src') : null;
  91.  
  92.             // Check if the image src is different from the video source src
  93.             if (imgSrc && vidSrc && imgSrc !== vidSrc) {
  94.                 // Update the video source src with the image src
  95.                 vidSourceElement.setAttribute('src', imgSrc);
  96.                 // Optionally, you may need to load the new video source
  97.                 vidElement.load();
  98.             }
  99.         }
  100.     }
  101.  
  102.     // Run the function on page load
  103.     replaceImageWithVideo();
  104.  
  105.     // Optionally, observe changes to the DOM and replace elements dynamically
  106.     const observer = new MutationObserver(replaceImageWithVideo);
  107.     observer.observe(document.body, { childList: true, subtree: true });
  108. })();