白嫖党分享网页一键调用MPV使用视频预览地址播放视频的简单代码

[KnIfER]

一、视频预览

video_preview
这个好像没有API？ 和 http://:5244/p/ 的url一样吗？ /d/ 因该是 webdav，还是？/p/ 又是什么？

预览 播放速度很快（启动快，seek也快），画质糊, 适合整理时使用，或用来听歌。

二、调用外部播放器

外部播放器可以有书签，旋转，放大，音频增强等高级播放器功能。

虽说网页端也有用户脚本可以部分实现。

我用的是 libmpv。（ 见 “ 调起本地服务 ” ）

三、网页端

重点介绍如何修改网页端，不编译alist。两种方式：

1. 代理服务 。 参考 alist-encrypt。
2. Tampermonkey 用户脚本。

这里使用第二种方法，仅在本机浏览器中使用。

需修改扩展“猫抓”，让用户脚本可以读取嗅探结果。

“猫抓” background.js

// 后台消息处理
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    console.log('onMessage!!!', message);
    if (message == 'get-sniffed-url' || message.type == 'get-sniffed-url') {
        var tabId;
        chrome.windows.getCurrent(function(wnd){
            chrome.tabs.getSelected(wnd.id, function(tab){
                tabId = tab.id;
                var id="tabid"+tabId;
                var list = mediaurls[id], ret;
                if(list) {
                    if(message.detail && message.detail.list) {
                        ret = list;
                    } else {
                        for(var i=0;ret=list[i++];) {
                            if(ret.url && 
                                (ret.url.includes('.m3u8')
                                    || ret.url.includes('index'))) {
                                break;
                            }
                        }
                        ret ||= list[0];
                    }
                    if(message.detail.purge) {
                        console.log('purge!!!');
                        list.length = 0;
                    }
				}
                if(!ret) ret = "nores";
                console.log('ret=', ret);
                sendResponse(ret);
            });
        });
        return true;
    }
});

Content.js

	window.addEventListener("extract_dog", function(e){
		console.log("extract_dog!!!", e, e.detail);
		var detail = e.detail;
		chrome.runtime.sendMessage({type:"get-sniffed-url", detail:detail}, function(data) { 
			console.log("extract_dog=", data);
			if(detail.cb) {
				//e.detail.cb(data);
				var backEvt = new CustomEvent(detail.cb, {detail : data});
				window.dispatchEvent(backEvt, function(data) { });;
			}
			//else sendResponse(data);
		});
	});

用户脚本.user.js

// ==UserScript==
// @name         云盘视频
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include        http://127.0.0.1:5244/*
// @grant        unsafeWindow
// @grant       GM_xmlhttpRequest
// @require        file:///D:\Code\FigureOut\chrome\extesions\TamperMonkey\云盘视频.user.js
// ==/UserScript==


var lastVid='x';
var debug = console.log, de=debug;
var win = window.unsafeWindow || window, doc=document, d=doc
, bank=win._xxj_bank;
if(!bank) {
    bank = win._xxj_bank = {};
} else {
    lastVid = bank.unreg();
}
bank.unreg = uninstall;

var unregs = [];
function uninstall() {
    for(var i=0;i<unregs.length;i++) {
        unregs[i]();
    }
    return lastVid;
}


win.US_addStyle ||= function(text, id, h, t){
    var el = 0;
    if(id) el = win[id]
    if(!el) {
        el = document.createElement(t||'STYLE');
        if(id) el.id = id;
        (h||document.head).append(el);
    }
    else if(h && h!=el.parentNode) {
        h.append(el);
    }
    if(t) el.innerText = text;
    else el.textContent = text;
    return el;
};
function stop(e) {
	try{
		e.stopPropagation();
		e.preventDefault();
	} catch(e) {debug(e)}
}
function gt(c, d) {
	return (d||document).getElementsByTagName(c)[0];
}
function gc(c, d) {
	return (d||document).getElementsByClassName(c)[0];
}   
function gcs(c, d) {
	return (d||document).getElementsByClassName(c);
}


function addEvent(a, b, c, d) {
    if(!d) d = win;
    d.addEventListener(a, b, c);
    unregs.push(function(){ d.removeEventListener(a, b, c)} );
}
addEvent('keydown', function(e){
    debug('keydown', e.key, e.altKey,win._editing(),e.keycode);
    var hasMod = e.ctrlKey || e.shiftKey;
    if(hasMod) return;
    if(e.key=='Enter') {
        gc('art-control-fullscreen').click()
    }
}, 1);
                


var bVidCtrl = true;
US_addStyle(`
.art-video-player .art-bottom {
    visibility:unset!important;
    opacity:1!important;
}
`, 'vid-ctrl');

// 鼠标在底 进度条可见
addEvent('mousemove', function(e){
    // debug('mousemove', e.key, e.altKey,win._editing(),e.keycode);
    var vid = gt('VIDEO');
    if(vid) {
        var b = vid.getBoundingClientRect();
        // debug(e.clientY, b)
        var v = e.clientY >= b.bottom - 80;
        if(v!=bVidCtrl) {
            bVidCtrl = v;
            if(v) US_addStyle(`
            .art-video-player .art-bottom {
                visibility:unset!important;
                opacity:1!important;
            }
            `, 'vid-ctrl');
            else US_addStyle(`
            .art-video-player .art-bottom {
                visibility:hidden!important;
                opacity:0!important;
            }
            `, 'vid-ctrl');
        }
    }
}, 1);


win.OnPreview = (e)=>{
    e = e.detail;
    // de('OnPreview', e)
    for(var i=0,res;res=e[i++];) {
        if(res && res.name.includes("m3u8")) {
            de('找到了', res)
            // 直接播放 res.url 。这里调起本地服务。可以替换成其他播放器？
            var videoName = gcs('nav-link')[gcs('nav-link').length-1].innerText;
            de('videoName::', videoName, encodeURIComponent(videoName))
            var args = encodeURIComponent("\""+res.url + "VODNAM" +  (videoName) + "NAMVOD" +"\"");
            var serviceUrl  = "http://localhost:5555/service?service=WODPlayer&args="+args
            de('serviceUrl::', serviceUrl)
            GM_xmlhttpRequest({
                method: "GET",
                url: serviceUrl,
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded; charset=utf-8"
                }
            });
            break;
        }
    }
};
addEvent('OnPreview', (e)=>{
    OnPreview(e)
});

// 右键在外部播放器打开
addEvent('contextmenu', function(e){
    var t = e.target;
    if(t.tagName=='VIDEO') {
        stop(e);
        var sniffEvt = new CustomEvent('extract_dog', {detail : {cb:'OnPreview', list:true}});
        window.dispatchEvent(sniffEvt, function(data) {});
    }
}, 1);