☰

b站帧视频

try to take over the world!

当前为 2019-10-11 提交的版本，查看 最新版本。

// ==UserScript==
// @name         b站帧视频
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.bilibili.com/video/av*
// @run-at document-idle
// ==/UserScript==

(function() {
  "use strict";

var $video = document.getElementsByTagName("video")[0];
var step = 0.1;
var $container = createContainer();
var $forward = createButton("前进");
var $backward = createButton("后退");
var $control = createControl(step);
var $time = createText($video.currentTime);
append($container, document.body);
append($control, $container);
append($backward, $container);
append($forward, $container);
append($time, $container);
$video.addEventListener("seeked", function() {
  console.log("seeked");
  $time.setContent("当前时间：" + $video.currentTime);
});
$control.addEventListener("change", function(ev) {
  step = +ev.target.value;
});
$forward.addEventListener("click", function() {
  console.log("前进:", step);
  $video.currentTime += step; // $time.setContent("当前时间：" +$video.currentTime);
});
$backward.addEventListener("click", function() {
  $video.currentTime -= step; // $time.setContent("当前时间：" +$video.currentTime);
});

function createControl(step) {
  var $input = document.createElement("input");
  $input.setAttribute("type", "number");
  $input.value = step;
  return $input;
}

function createButton(value) {
  var $backward = document.createElement("button");
  $backward.textContent = value;
  return $backward;
}

function createContainer() {
  var $con = document.createElement("div");
  $con.setAttribute("id", "xxx_frameControl");
  $con.style.cssText +=
    "\n    position: absolute;\n    top: 100px;\n    left: 100px;\n  ";
  return $con;
}

function createText(content) {
  var $div = document.createElement("span");
  $div.textContent = content;

  $div.setContent = function(newContent) {
    this.textContent = newContent;
  };

  return $div;
}

function append($dom, $container) {
  $container.append($dom);
}

})();