# SpeedControl

**Repository Path**: FlyingFatPenguin/SpeedControl

## Basic Information

- **Project Name**: SpeedControl
- **Description**: 浏览器中 video 的速度控制，视频加速，减速。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2019-06-16
- **Last Updated**: 2023-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 速度控制
## 项目简介
该项目致力于解决浏览器中视频播放速度的设置问题。
常见的使用场景如：

1. 视频无法被加速，如网课。
2. 视频的速度不理想

该项目将使用解决该问题。

## 快速上手
1. 拖动该链接到浏览器上方的收藏栏。
      <a href="javascript:(function(){'use strict';var InputRange =  (function () {    function InputRange(range, initialIndex) {        if (initialIndex === void 0) { initialIndex = -1; }        this.dom = document.createElement('div');        this.inputRange = document.createElement('input');        this.inputValue = document.createElement('input');        this.range = range;        this.callBack = function () { };        this.initInput(initialIndex);        this.update();        this.registerInputEvent();        this.dom.append(this.inputRange);        this.dom.append(this.inputValue);    }    InputRange.prototype.getDom = function () {        return this.dom;    };    InputRange.prototype.setCallBack = function (func) {        this.callBack = func;    };    InputRange.prototype.update = function () {        var value = this.range[parseInt(this.inputRange.value)];        this.inputValue.value = value;        this.callBack(value);    };    InputRange.prototype.registerInputEvent = function () {        var _this = this;        this.inputRange.addEventListener('input', function () { return _this.update(); });        this.inputValue.addEventListener('input', function () {            _this.callBack(_this.inputValue.value);        });    };    InputRange.prototype.initInput = function (initialValue) {        if (initialValue &lt; 0) {            initialValue = this.rangeLength() / 2;            console.log(initialValue);        }        this.inputRange.type = 'range';        this.inputRange.min = '0';        this.inputRange.max = (this.rangeLength() - 1).toString();        this.inputRange.value = Math.floor(initialValue).toString();    };    InputRange.prototype.rangeLength = function () {        return this.range.length;    };    return InputRange;}());function getAllVideo() {    var result = [];    function videoIter(document) {        var video = document.getElementsByTagName('video');        for (var i = 0; i &lt; video.length; i++) {            result.push(video[i]);        }                var iframes = document.getElementsByTagName('iframe');        for (var i = 0; i &lt; iframes.length; i++) {            var doc = iframes[i].contentDocument;            if (doc) {                videoIter(doc);            }        }    }    videoIter(document);    return result;}var dom = document.createElement('div');dom.style.position = 'fixed';dom.style.right = '10px';dom.style.top = '10px';dom.style.width = '300px';dom.style.backgroundColor = 'rgba(255, 255, 255, 0.9)';dom.style.zIndex = '999999';dom.style.border = '2px solid rgb(0, 0, 0)';dom.style.padding = '15px 60px 15px 15px';var closeButton = document.createElement('button');closeButton.innerHTML = '关闭';closeButton.addEventListener('click', function (event) {    dom.remove();});dom.appendChild(closeButton);var playButton = document.createElement('button');playButton.innerHTML = '播放';playButton.addEventListener('click', function (event) {    getAllVideo().forEach(function (video) {        video.play();    });});dom.appendChild(playButton);var v = [1 / 16, 1 / 8, 1 / 4, 1 / 2, 1, 2, 4, 8, 16];var inputRange = new InputRange(v);inputRange.setCallBack(function (value) {    getAllVideo().forEach(function (video) {        video.playbackRate = parseFloat(value);    });});dom.appendChild(inputRange.getDom());document.body.insertBefore(dom, document.body.firstChild);})()">速度控制器</a>   
2. 打开视频播放页面。
3. 在播放页面点击刚刚添加到收藏栏的链接。
4. 拖动滑块来调整播放速度。
5. 点击播放按钮进行播放。
6. 点击关闭按钮可以关闭弹窗。

## 技术说明
1. 该项目通过搜索 video 标签找到播放的视频。这意味着如果视频不是通过 video 标签实现，
   该项目将无法支持。
2. 通过设置 video 的 playbackRate 属性来控制播放速度。
3. 上文中的链接其实是一个伪协议，点击这个链接并不会跳转页面，而是执行其中的 js 脚本。
   通过在其他页面中点击这个链接，使得我们可以在别人的网站中执行自己的脚本，前提是你已经把它添加到收藏栏了。

## 项目文档结构
- speedControl.ts 速度控制程序的核心代码
- js ts 脚本的编译输出文件夹
- buildhtml 将 js 文件夹中的编译出的代码转化成伪协议添加到 html 中
- out 文件夹 buildhtml 文件夹的输出结果

## 其他
- 如何构建项目？
  1. 修改 speedControl.ts 中的代码，使用 tsc 编译到 js。
  2. 双击 build.cmd 构建网页。
  3. 打开 out 中的网页。