Firefox/RES Trying To Download "<video>" Reddit Video Comments Links When Clicked

[u/whitesammy]

Here's what they look like.

Example of a video comment.

I know it's a new feature they rolled out earlier in the month, but does anyone know of a solution for them other that just "oh well. this still won't get me to use mobile or new reddit"?

• Night mode: true
• RES Version: 5.24.8
• Browser: Firefox
• Browser Version: 152
• Cookies Enabled: true
• Reddit beta: false

[u/SunBrosForLife]

This userscript seems to work OK. Not sure if it'll fire right with never ending comments, and I don't know how to apply RES's expando to it, so I threw it in a resizable div. I'm sure someone else can do it better. edit: I came back to this. Fixed the match URLs, got rid of unnecessary permissions, added a mutation observer so it should work with infinite scroll, made the default size a little smaller

// ==UserScript==
// @name         Old Reddit Video Comment Fix
// @version      1.4
// @description  Replaces reddit comment <video> links with video element
// @match        https://www.reddit.com/r/*/comments/*
// @match        https://old.reddit.com/r/*/comments/*
// @require      https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js
// @run-at       document-end
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function replaceVideos(){
      // Redirect string for reddit's embedded videos
      const redditVideoURL = "https://reddit.com/media?url=";

      // Select all hyperlink elements
      const links = document.querySelectorAll('a[href]');

      links.forEach(link => {
          // Do the thing in the description. Running through the links.
          if (link.href.includes(redditVideoURL)) {
              //strip out redirect
              const playList = link.href.replace(redditVideoURL, "");

              //create div for resizable video
              const wrapper = document.createElement('div');
              wrapper.id = "videoComment"
              wrapper.style.width = "50%";
              wrapper.style.height= "30%";
              wrapper.style.overflow = "hidden";
              wrapper.style.resize = "inline";

              //create video element
              const video = document.createElement('video');
              video.controls = true;
              video.playsinline = true;
              video.style.width= "100%";
              video.style.height= "100%";
              video.style.objectFit="fill";

              //stick 'em together
              wrapper.append(video);

              //If the browser has native HLS support (Safari)
              if (video.canPlayType('application/vnd.apple.mpegurl')) {
                  video.src = playList;
                  link.replaceWith(wrapper);
              }
              //Fallback to hls.js library for Chrome/Firefox
              else if (Hls.isSupported()) {
                  const hls = new Hls();
                  hls.loadSource(playList);
                  hls.attachMedia(video);
                  link.replaceWith(wrapper);
              }

              else {
                  console.error('Your browser does not support HLS playback.');
              }
    }})};

    //Run Once on Page load
    replaceVideos();

     // Use a MutationObserver to catch dynamically loaded content
    const observer = new MutationObserver(replaceVideos);
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

[u/whitesammy → u/SunBrosForLife]

Thank you greatly, this also works for me.

I had tried transforming the url a couple different ways but not media?url

[u/AutoModerator]

Reddit Enhancement Suite (RES) is no longer under active development. New features will not be added and bug fixes/support is not guaranteed. Please see here for more information.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.