☰

Flickr - Video AUTO Play / Replay v.10

Video Auto Play and Replay - by IA DuckDuckDo

// ==UserScript==
// @name          Flickr - Video AUTO Play / Replay v.10
// @version       v.10
// @description	  Video Auto Play and Replay - by IA DuckDuckDo
// @icon           https://external-content.duckduckgo.com/ip3/blog.flickr.net.ico
// @namespace      https://greasyfork.org/fr/users/8-decembre?sort=updated
// @include        https://www.flickr.com/photos/*
// @exclude	   http*://*flickr.com/photos/*/favorites*
// @exclude	   http*://*flickr.com/photos/*/favorites/*
// @exclude	   http*://*flickr.com/photos/*/albums*
// @grant          GM_addStyle
// ==/UserScript==


// IA: Muting the video before playing it is a good workaround for the autoplay policy issue

function loadScript(url, callback) {
  var script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

loadScript('https://code.jquery.com/jquery-3.6.0.min.js', function() {
  (function($) {
    'use strict';

    console.log('Script loaded');

    // Wait for the video element to be loaded
    var videoElement = document.querySelector('.fluid.html-photo-page-scrappy-view video#video_1_html5_api');
    if (videoElement) {
      console.log('Video element found');
      // Set the video to auto play and loop
      videoElement.autoplay = true;
      videoElement.loop = true;
      videoElement.muted = true; // Mute the video
      videoElement.volume = 0.5;

      console.log('Auto-play and loop properties set');

      // Add an event listener to play the video when the user interacts with it
      videoElement.addEventListener('click', function() {
        this.play();
      });

      // Add an event listener to replay the video when it ends
      videoElement.addEventListener('ended', function() {
        this.play();
      });

      // Add an event listener to handle volume control
      videoElement.addEventListener('volumechange', function() {
        this.muted = false;
      });

      // Play the video
      videoElement.play();

      console.log('Video played');
    } else {
      console.log('Video element not found');

      // If the video element is not found, wait for it to be loaded
      var intervalId = setInterval(function() {
        var videoElement = document.querySelector('.fluid.html-photo-page-scrappy-view video#video_1_html5_api');
        if (videoElement) {
          console.log('Video element found after interval');

          // Set the video to auto play and loop
          videoElement.autoplay = true;
          videoElement.loop = true;
          videoElement.muted = true; // Mute the video
          videoElement.volume = 0.5;

          console.log('Auto-play and loop properties set after interval');

          // Add an event listener to play the video when the user interacts with it
          videoElement.addEventListener('click', function() {
            this.play();
          });

          // Add an event listener to replay the video when it ends
          videoElement.addEventListener('ended', function() {
            this.play();
          });

          // Add an event listener to handle volume control
          videoElement.addEventListener('volumechange', function() {
            this.muted = false;
          });

          // Play the video
          videoElement.play();

          console.log('Video played after interval');

          // Clear the interval
          clearInterval(intervalId);
        }
      }, 100);
    }
  })(null);
});