☰

Sakugabooru Browse Fix

Replace specific img tag with video tag

目前为 2024-09-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Sakugabooru Browse Fix
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.21
  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.                 video.controls = true;
  56.  
  57.                 // Apply absolute positioning
  58.                 video.style.position = 'absolute';
  59.                 video.style.top = '45%';
  60.                 video.style.left = '50%';
  61.                 video.style.transform = 'translate(-50%, -50%)';
  62.                 video.style.maxWidth = '100%'; // Adjust to fit parent or as needed
  63.                 video.style.maxHeight = '100vh'; // Adjust to fit parent or as needed
  64.  
  65.                 // Create and append the source element
  66.                 const source = document.createElement('source');
  67.                 source.src = vidSrc;
  68.                 source.type = 'video/mp4';
  69.                 video.appendChild(source);
  70.  
  71.                 // Create and append the fallback content
  72.                 const p = document.createElement('p');
  73.                 p.className = 'vjs-no-js';
  74.                 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>';
  75.                 video.appendChild(p);
  76.  
  77.                 // Replace the img element with the video element
  78.                 imgElement.parentNode.parentNode.appendChild(video, imgElement);
  79.             } else {
  80.                 console.log('The src is an image');
  81.             }
  82.         } else {
  83.             console.log('Image element not found');
  84.             // Select the image and video elements
  85.             const imgElement = document.querySelector('img.main-image');
  86.             const vidElement = document.querySelector('.vjs-tech');
  87.  
  88.             // Get the src attributes
  89.             const imgSrc = imgElement ? imgElement.getAttribute('src') : null;
  90.             const vidSourceElement = vidElement ? vidElement.querySelector('source') : null;
  91.             const vidSrc = vidSourceElement ? vidSourceElement.getAttribute('src') : null;
  92.  
  93.             // Check if the image src is different from the video source src
  94.             if (imgSrc && vidSrc && imgSrc !== vidSrc) {
  95.                 if (!imgSrc.endsWith('.mp4')){
  96.                     vidElement.outerHTML = '';
  97.                 }
  98.                 else {
  99.                     // Update the video source src with the image src
  100.                     vidSourceElement.setAttribute('src', imgSrc);
  101.                     // Optionally, you may need to load the new video source
  102.                     vidElement.load();
  103.                 }
  104.             }
  105.         }
  106.     }
  107.  
  108.     // Run the function on page load
  109.     replaceImageWithVideo();
  110.  
  111.     // Optionally, observe changes to the DOM and replace elements dynamically
  112.     const observer = new MutationObserver(replaceImageWithVideo);
  113.     observer.observe(document.body, { childList: true, subtree: true });
  114. })();