用 Bilibili 播放电脑上的视频

允许您使用 B 站查看本地视频

As of 2018-12-30. See the latest version.

// ==UserScript==
// @name         用 Bilibili 播放电脑上的视频
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  允许您使用 B 站查看本地视频
// @author       you
// @match        https://www.bilibili.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    let isBangumi = window.location.href.includes('bangumi');

    let pluginHtml = '<div class="uploadPlugin"><button id=switcher class="switcher">本地</button><div id=uploaderWrapper class="uploader-wrapper fold"><div class="uploader"><input id=inputer class="inputer" type="file"/><div class="cover">选择文件</div></div></div></div>'
    let pluginStyle = '.uploadPlugin * {margin: 0;padding: 0;box-sizing: border-box;}.uploadPlugin {display: flex;position: fixed;top: 28vh;z-index: 10;}.uploadPlugin .switcher {z-index: 11;border: none;outline: none;width: 30px;height: 40px;padding: 0 5px;background: skyblue;color: white;text-align: center;line-height: 1.2;font-size: 12px;cursor: pointer;}.uploadPlugin .switcher:hover {background: #00b4e5;}.uploadPlugin .uploader-wrapper {transform: translateX(0);transition: all .3s;}.uploadPlugin .uploader-wrapper.fold {transform: translateX(-100px);}.uploadPlugin .uploader {position: relative;width: 70px;height: 40px;}.uploadPlugin .inputer {opacity: 0;position: absolute;width: 100%;height: 100%;}.uploadPlugin .cover {position: absolute;width: 100%;height: 100%;background: #eee;color: black;text-align: center;line-height: 40px;font-size: 12px;pointer-events: none;}'

    let div = document.createElement('div')
    div.innerHTML = pluginHtml
    document.body.appendChild(div.children[0])

    let style = document.createElement('style')
    style.innerHTML = pluginStyle
    document.head.appendChild(style)

    $(switcher).on('click', switchState)
    $(inputer).on('click', clearMedia).on('change', setMedia)

    function switchState() {
        $(uploaderWrapper).toggleClass('fold')
    }

    function clearMedia(e) {
        e.target.value = null
    }

    function setMedia(e) {
        let files = e.currentTarget.files
        if (!files.length) return

        $(uploaderWrapper).addClass('fold')
        playMedia(files[0])
    }

    function playMedia(file) {
        $('video').attr('src', window.URL.createObjectURL(file))

        if(isBangumi) {  // 修复番剧区的进度条和首次上传黑屏的 bug
            fixProgress()
            setTimeout(() => $('video').attr('src', window.URL.createObjectURL(file)) && player.play(), 1000)
        } else {
            player.play()
        }
    }

    function fixProgress() {
        $('.bilibili-player-video-progress').on('click', e=>{
            let percent = parseFloat($('.bpui-slider-handle')[0].style.left) / 100
            let video = $('video')[0]
            video.currentTime = percent * video.duration
        })
    }
})();