StreamableDownloader

Downloads the current Streamable video when you click the button.

目前為 2022-12-28 提交的版本,檢視 最新版本

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         StreamableDownloader
// @namespace    http://tampermonkey.net/
// @version      1.2.1
// @description  Downloads the current Streamable video when you click the button.
// @author       PneuTueur
// @match        *://streamable.com/*
// @icon         https://cdn0.iconfinder.com/data/icons/ui-line-pixel-perfect-3/32/user_interface_UI_line_download_unduh_media_ui-512.png
// @grant        none
// @license      MIT
// ==/UserScript==

let CSS = `<style type="text/css">
.download-button {
  background-color: #222;
  border-radius: 4px;
  border-style: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: "Farfetch Basis","Helvetica Neue",Arial,sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  margin-left: auto;
  outline: none;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-transform: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 80px;
}

.download-button:hover,
.download-button:focus {
  opacity: .75;
}</style>` // Useful CSS code for button layout

function handleClick(event) { // Called when button is clicked
    const videoURL = document.getElementById('video-player-tag').getAttribute('src');
    const videoID = window.location.href.split('/')[3];
    if (videoURL.includes('cdn-cf-east.streamable.com')) {
        window.location.href = videoURL; // Sends a request to the video hosting link which automatically downloads the video
    }
    else {
        alert('Your download will begin in a few seconds');

        fetch(videoURL).then(response => { return response.blob(); })
        .then(blob => {
            var urlCreator = window.URL || window.webkitURL;
            var videoLink = urlCreator.createObjectURL(blob);
            var tag = document.createElement('a');
            tag.href = videoLink;
            tag.target = '_blank';
            tag.download = videoID + '.mp4';
            document.body.appendChild(tag);
            tag.click();
            document.body.removeChild(tag);
        })
        .catch(err => {
            alert('ERROR : Failed to download the video. Please try again. \n If it still doesn\'t work, you can contact the script author on greasyfork.org with the video URL.');
        });
    }
}

document.head.insertAdjacentHTML("beforeend", CSS); // Inserts CSS code above
const downloadBar = document.getElementsByClassName('actions-section')[0] // Finds the place where the button will be added
const btn = document.createElement('button'); // Creates the button
btn.setAttribute('class', 'download-button'); // Settings up the button
btn.textContent = 'Download';
downloadBar.style.display = 'flex';
downloadBar.style.width = 'auto';
downloadBar.appendChild(btn); // Adds the button to the actions-section bar

btn.addEventListener('click', handleClick); // Calls handleClick() when button is clicked