Replace specific img tag with video tag
目前為
// ==UserScript==
// @name Sakugabooru Browse Fix
// @namespace http://tampermonkey.net/
// @version 0.2069
// @description Replace specific img tag with video tag
// @match *://www.sakugabooru.com/post/browse*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Function to replace the img with video
function replaceImageWithVideo() {
console.log("tampermonkey script working");
// Select the img element using a class name (or any other selector as needed)
const imgElement = document.querySelector('img.main-image');
const vidElement = document.querySelector('.vjs-tech');
// Initialize vidSrc variable
let vidSrc = null;
// Check if the element exists
if (imgElement && !vidElement) {
// Extract the src attribute value
const imgSrc = imgElement.getAttribute('src');
// Check if the src ends with .mp4
if (imgSrc && imgSrc.endsWith('.mp4')) {
imgElement.style.display = 'none';
vidSrc = imgSrc; // Store the .mp4 URL in vidSrc
console.log('Video Source:', vidSrc);
// Create the new video element
const video = document.createElement('video');
video.className = 'vjs-tech';
video.loop = true;
video.setAttribute('data-setup', JSON.stringify({
autoplay: true,
controls: true,
playbackRates: [0.2, 0.4, 0.6, 0.8, 1],
plugins: {
framebyframe: {
fps: 24.0,
steps: [
{ text: '< 1f', step: -1 },
{ text: '1f >', step: 1 }
]
}
}
}));
video.id = 'vjs_video_3_html5_api';
video.tabIndex = -1;
video.autoplay = true;
video.controls = false;
video.style.width = '100%';
video.style.height = '100%';
// Create and append the source element
const source = document.createElement('source');
source.src = vidSrc;
source.type = 'video/mp4';
video.appendChild(source);
// Create and append the fallback content
const p = document.createElement('p');
p.className = 'vjs-no-js';
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>';
video.appendChild(p);
// Replace the img element with the video element
imgElement.parentNode.parentNode.appendChild(video, imgElement);
} else {
console.log('The src is an image');
}
} else {
console.log('Image element not found');
// Select the image and video elements
const imgElement = document.querySelector('img.main-image');
const vidElement = document.querySelector('.vjs-tech');
// Get the src attributes
const imgSrc = imgElement ? imgElement.getAttribute('src') : null;
const vidSourceElement = vidElement ? vidElement.querySelector('source') : null;
const vidSrc = vidSourceElement ? vidSourceElement.getAttribute('src') : null;
// Check if the image src is different from the video source src
if (imgSrc && vidSrc && imgSrc !== vidSrc) {
if (!imgSrc.endsWith('.mp4')){
vidElement.outerHTML = '';
}
else {
imgElement.style.display = 'none';
// Update the video source src with the image src
vidSourceElement.setAttribute('src', imgSrc);
// Optionally, you may need to load the new video source
vidElement.load();
}
}
}
}
// Run the function on page load
replaceImageWithVideo();
// Optionally, observe changes to the DOM and replace elements dynamically
const observer = new MutationObserver(replaceImageWithVideo);
observer.observe(document.body, { childList: true, subtree: true });
})();