禅道视频在线播放插件

一. 介绍

基于油猴脚本实现，油猴脚本下载地址
缺陷：
1. 使用原声 video 标签，界面不够优雅
2. 有一定几率会出现卡顿现象

二. 实现

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        xx.xx.xx.xx:8000/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    // Your code here...

    // 限定 IP 使用该插件吗，也可以在上面注释的 @match 中填写
    //let IP = window.location.origin
    //if (IP != 'http://xx.xx.xx.xx:8000') return

    let fileList = document.querySelectorAll('.files-list li>a')
    if (!fileList.length) return

    let video = null
    let videoBox = null
    createVideoDom()

    // 添加点击事件
    for (let index = 0; index < fileList.length; index++) {
        const element = fileList[index];
        element.onclick = player
    }

    function createVideoDom() {
        videoBox = document.createElement('div')
        videoBox.style.position = 'fixed'
        videoBox.style.top = '50%'
        videoBox.style.left = '50%'
        videoBox.style.transform = 'translate(-50%, -50%)'
        videoBox.style.height = '100vh'

        let relativeBox = document.createElement('div')
        relativeBox.style.position = 'relative'
        relativeBox.style.width = '100%'
        relativeBox.style.height = '100%'

        video = document.createElement('video')
        video.style.maxHeight = '100%'
        video.src = ''
        video.controls = 'controls'
        video.autoplay = 'autoplay'

        let closeBtn = document.createElement('span')
        closeBtn.style.position = 'absolute'
        closeBtn.style.top = '0px'
        closeBtn.style.right = '0px'
        closeBtn.style.color = 'red'
        closeBtn.style.width = '40px'
        closeBtn.style.fontSize = '30px'
        closeBtn.style.lineHeight = '40px'
        closeBtn.style.textAlign = 'center'
        closeBtn.style.cursor = 'pointer'
        closeBtn.style.background = '#eee'
        closeBtn.innerHTML = 'X'
        closeBtn.onclick = function () {
            videoBox.style.display = 'none'
            video.src = ''
        }

        relativeBox.appendChild(video)
        relativeBox.appendChild(closeBtn)
        videoBox.appendChild(relativeBox)
        document.body.appendChild(videoBox)

        videoBox.style.display = 'none'
    }

    function player(e) {
        let videoUrl = e.target.href
        if (!videoUrl) return

        // 判断是否为视频格式
        let fileName = e.target.innerText
        if (!fileName.match(/\.(mp4|avi|wmv|mkv|MP4|AVI|WMV|MKV)/)) return

        video.src = videoUrl
        videoBox.style.display = 'block'

        // 取消默认下载事件
        return false
    }
})();