这是一款由河南科技大学学生团队制作的网课学习辅助软件，主要功能包括自定义播放速度、本地视频导入播放以及字幕文件支持。用户可以选择不同格式的字幕文件，并调整播放速率，软件还提供了简单的界面定制选项，如字体颜色、背景颜色等。该软件适用于B站和网易公开课等平台，增强了在线学习体验。
将以下代码复制到记事本中，将文件后缀名改为html，然后打开即可使用，为一款网课学习辅助软件。
由河南科技大学学生团队制作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lean's Video Player</title>
<style>
.wrap {
/* width: 1000px; */
width: auto;
margin: 0 auto;
position: relative;
}
#left {
width: 700px;
height: 700px;
/* background: #ccffff; */
position: absolute;
top: 0;
left: 0;
}
#right {
width: 300px;
height: 700px;
/* background: #ffcccc; */
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrap">
<aside id="left">
<!-- <center> -->
<video id="video_zimu" width="140%" height="100%" autobuffer controls type="video/mp4"></video>
<p>选择播放速率：<select id="selRate">
<option value="0.25">0.25</option>
<option value="0.5">0.5</option>
<option value="1" selected>1.0</option>
<option value="1.25">1.25</option>
<option value="1.5">1.5</option>
<option value="1.75">1.75</option>
<option value="2">2.0</option>
</select></p>
<p>视频选择： <input type="file" id="file" accept="video/*" onchange="getvl(this)" /></p>
<p><button id="btnPlay">播放/暂停</button></p>
<!-- </center> -->
</aside>
<section id="right">
<div id="zimu2">
</div>
<div id="zimu">
</div>
<div id="zimu3">
</div>
</section>
</div>
<script type="text/javascript">
//播放速度
var eleSelect = document.getElementById('selRate');
//播放按钮
var eleButton = document.getElementById('btnPlay');
// 视频播放元素
var video = document.getElementById('video_zimu');
// 改变播放速率
eleSelect.addEventListener('change', function () {
video.playbackRate = this.value;
});
// 点击播放按钮
eleButton.addEventListener('click', function () {
if (video.paused)
video.play();
else
video.pause();
});
//获取视频文件
function getvl(obj) {
var url = null;
var fileObj = document.getElementById("file").files[0];
if (window.createObjcectURL != undefined) {
url = window.createOjcectURL(fileObj);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(fileObj);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(fileObj);
}
//alert("视频文件加载成功");
video.src = url;
}
// ==UserScript==
// @name 网课字幕
// @namespace http://tampermonkey.net/
// @version 1.0
// @homepage https://www.baidu.com/
// @description 暂支持B站和网易公开课
// @author hello world
// @match fanyi.baidu.com
// @match *://*.bilibili*
// @include http*://www.bilibili.com/video/*
// @include http*://www.bilibili.com/bangumi/play/ss*
// @include http*://www.bilibili.com/bangumi/play/ep*
// @include http*://www.bilibili.com/watchlater/
// @include http*://www.bilibili.com/medialist/play/ml*
// @include http*://www.bilibili.com/blackboard/html5player.html*
// @include http*://www.bilibili.com/cheese/*
// @include http*://open.163.com/*
// @include http*://pan.baidu.com/play/*
// @include *VideoPlayer.html*
// @icon https://www.google.com/s2/favicons?domain=csdn.net
// @grant none
// @antifeature 暂支持B站和网易公开课
// ==/UserScript==
var fcolor="#e6880b"//字体颜色的十六进制
var scolor="#000000"//选中颜色的十六进制
var bcolor="#bafffcdb"//背景颜色的十六进制
var vbig="0"//大 0 中 1 小 2
var musicUl;
var i;
var time1=new Date();
var flag1 = 1;
var k2;
var data2;
window.onload = function () {
//dofinish();
setTimeout(dofinish, 0);
// let h=document.getElementById("music");
// musicPlay(h);
// return;
// setTimeout(dofinish,5000);
// musicPlay(h);
}
function decodeFromSRT(input) {
let g = {
srtReg: /(?:(\d+):)?(\d{1,2}):(\d{1,2})[,\.](\d{1,3})\s*(?:-->|,)\s*(?:(\d+):)?(\d{1,2}):(\d{1,2})[,\.](\d{1,3})\r?\n([.\s\S]+)/
};
if (!input) return;
const data = [];
let split = input.split('\n\n');
if (split.length == 1) split = input.split('\r\n\r\n');
split.forEach(item => {
const match = item.match(g.srtReg);
if (!match) {
//console.log('跳过非正文行',item);
return;
}
data.push({
time: (match[1] * 60 * 60 || 0) + match[2] * 60 + (+match[3]) + (match[4] / 1000),
lrc: match[9].trim().replace(/{\\.+?}/g, '').replace(/\\N/gi, '\n').replace(/\\h/g, ' ')
});
});
return { body: data };
};
function decodeFromLRC(input) {
if (!input) return;
const data = [];
input.split('\n').forEach(line => {
let match = line.match(/((\[\d+:\d+\.?\d*\])+)(.*)/);
if (!match) {
if (match = line.match(/\[offset:(\d+)\]/i)) {
this.offset.value = +match[1] / 1000;
}
//console.log('跳过非正文行',line);
return;
}
const times = match[1].match(/\d+:\d+\.?\d*/g);
times.forEach(time => {
const t = time.split(':');
data.push({
time: t[0] * 60 + (+t[1]),
content: match[3].trim().replace('\r', '')
});
});
});
return {
body: data.sort((a, b) => a.time - b.time).map((item, index) => (
item.content != '' && {
time: item.time,
// to:index==data.length-1?item.time+20:data[index+1].time,
lrc: item.content
}
)).filter(item => item)
};
}
function decodeFromASS(input) {
if (!input) return;
const data = [];
let split = input.split('\n');
split.forEach(line => {
const match = line.match(this.assReg);
if (!match) {
//console.log('跳过非正文行',line);
return;
}
data.push({
time: match[1] * 60 * 60 + match[2] * 60 + (+match[3]),
// to:match[4]*60*60 + match[5]*60 + (+match[6]),
lrc: match[7].trim().replace(/{\\.+?}/g, '').replace(/\\N/gi, '\n').replace(/\\h/g, ' ')
});
});
return { body: data };
}
function decodeFile(text, type) {
// let data2;
// const type = k2.file.name.split('.').pop().toLowerCase();
// console.log(this.reader.result);
switch (type) {
case 'lrc': data2 = decodeFromLRC(text); break;
case 'ass': case 'ssa': data2 = decodeFromASS(text); break;
case 'srt': case 'sbv': case 'vtt': data2 = decodeFromSRT(text); break;
case 'bcc': data2 = JSON.parse(text); break;
default: break;
}
lrc = data2;
}
function setCookie(name,value)
{
var Days = 1000;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}
var a,b,h1_1,h1_2,h1_3,h2_1,h2_2,h2_3,d_top;
var font_color1;
var firstkkk = 1;
var els2;
var kinds;
var videoid;
function dofinish() {
let encodings = ['UTF-8', 'GB18030', 'BIG5', 'UNICODE', 'JIS', 'EUC-KR'];
els2 = document.getElementsByClassName("r-con")[0];//b 站
kinds=0;
if(els2==undefined){
els2=document.getElementsByClassName("video-list")[0];//网易空开课
kinds=1;
videoid=document.getElementById("vjs_video_3_html5_api");
}
if(els2==undefined){
els2=document.getElementsByClassName("CDaavKb")[0];//百度网盘
kinds=1;
videoid=document.getElementById("html5player_html5_api");
}
if(els2==undefined){
els2=document.getElementById("zimu");//diy_html
kinds=1;
videoid=document.getElementById("video_zimu");
}
//let els3 = document.getElementsByClassName("up-info report-wrap-module report-scroll-module")[0];
var y1=document.createElement("div");
//document.body.insertBefore(y1,document.body.firstElementChild);
els2.insertBefore(y1,els2.firstElementChild);
templeft = "10px";
temptop = "10px";
y1.style.marginLeft=templeft;
y1.style.marginTop=temptop;
let y2=document.createElement("a");
y1.appendChild(y2);
y1.id="12345";
els2=y1;
var dialog=y1;
var dialogleft = parseInt(dialog.style.marginLeft);
var dialogtop = parseInt(dialog.style.marginTop);
var ismousedown = false;
var dialogleft, dialogtop;
var downX, downY;
dialogleft = parseInt(dialog.style.marginLeft);
dialogtop = parseInt(dialog.style.marginTop);
dialog.onmousedown = function (e) {
ismousedown = true;
downX = e.clientX;
downY = e.clientY;
}
document.onmousemove = function (e) {
if (ismousedown) {
dialog.style.marginTop = e.clientY - downY + dialogtop + "px";
dialog.style.marginLeft = e.clientX - downX + dialogleft + "px";
}
}
/*松开鼠标时要重新计算当前窗口的位置*/
document.onmouseup = function () {
dialogleft = parseInt(dialog.style.marginLeft);
dialogtop = parseInt(dialog.style.marginTop);
ismousedown = false;
}
let els3=els2.firstElementChild;
var d1 = document.createElement("div");
d1.id = "music";
d1.style = "margin: 0 auto;width: 400px;height: 750px";
els2.insertBefore(d1, els3);
// var k = document.getElementById("viewbox_report")
k2 = document.createElement("input");
els2.insertBefore(k2, d1);
var m1 = document.createElement("select");
els2.insertBefore(m1, k2);
// m1.id="be_slected"
//m1.append("<option value="+"aaa"+">"+abb+"</option>");
var y1 = document.createElement("option");
m1.appendChild(y1);
y1.text = y1.value = encodings[0];
y1 = document.createElement("option");
m1.appendChild(y1);
y1.text = y1.value = encodings[1];
y1 = document.createElement("option");
m1.appendChild(y1);
y1.text = y1.value = encodings[2];
y1 = document.createElement("option");
m1.appendChild(y1);
y1.text = y1.value = encodings[3];
y1 = document.createElement("option");
m1.appendChild(y1);
y1.text = y1.value = encodings[4];
var m2 = document.createElement("select");
els2.insertBefore(m2, m1);
var y0 = document.createElement("option");
m2.appendChild(y0);
y0.text ="大";
y0.value = 0;
var y1 = document.createElement("option");
m2.appendChild(y1);
y1.text ="大";
y1.value = 0;
y1 = document.createElement("option");
m2.appendChild(y1);
y1.text ="中";
y1.value = 1;
y1 = document.createElement("option");
m2.appendChild(y1);
y1.text ="小";
y1.value = 2;
var d6=document.createElement("input");
els2.insertBefore(d6, m1);
d6.placeholder="背景颜色的十六进制";
var d7=document.createElement("input");
els2.insertBefore(d7, d6);
d7.placeholder="选中颜色的十六进制";
var d8=document.createElement("input");
els2.insertBefore(d8, d7);
d8.placeholder="字体颜色的十六进制";
d6.value=getCookie("d6");
if(d6.value=="")d6.value=fcolor;
d7.value=getCookie("d7");
if(d7.value=="")d7.value=scolor;
d8.value=getCookie("d8");
if(d8.value=="")d8.value=bcolor;
let g1=getCookie("m2");
if(g1=="")g1=vbig;
if(g1==1){
y0.text ="中";
y0.value = 1;
}
else if(g1==2){
y0.text ="小";
y0.value = 2;
}
k2.type = "file";
k2.accept = ".lrc,.ass,.ssa,.srt,.bcc,.sbv,.vtt";
k2.style.width = "370px";
k2.style.marginBottom = "5px";
// k2.style.cursor("move");
// k2.style.userSelect ("none");
// k2.style.lineHeight("1");
//k2.innerHTML = "选择字幕";
var type3;
k2.onchange = function (e) {
var reader = new FileReader();
reader.onload = function (e) {
let text = reader.result;
decodeFile(text, type3);
musicPlay(d1);
mouse1();
}
// console.log(k2.files[0]);
type3 = k2.files[0].name.split('.').pop().toLowerCase();
k2.style.display = "none";
var encoding = encodings[m1.selectedIndex];
console.log(encoding);
m1.style.display = "none";
var fangan=[
{
background_width:"400px",
background_height:"750px",
no_slected_font_size:"16px",
slected_font_size:"19px",
music_border:"7px"
},
{
background_width:"330px",
background_height:"750px",
no_slected_font_size:"15px",
slected_font_size:"17px",
music_border:"4px"
},
{
background_width:"280px",
background_height:"750px",
no_slected_font_size:"13px",
slected_font_size:"16px",
music_border:"0px"
}
]
let fangan_idx=m2.selectedIndex-1;
if(fangan_idx==undefined||fangan_idx==-1)fangan_idx=0;
d1.style.width=fangan[fangan_idx].background_width;
d1.style.height=fangan[fangan_idx].background_height;
font_color1=d8.value;
let s2=`.play{
background-color:`+d7.value+`;
border-radius:5%;
font-size: `+fangan[fangan_idx].slected_font_size+`;
}
#music{
border:`+fangan[fangan_idx].music_border+` solid;
border-radius: 7%;
background-color:`+d6.value+`;
font-size:`+fangan[fangan_idx].no_slected_font_size+`;
}`;
var style = document.createElement('style');
style.innerHTML = s2;
var head = document.head || document.getElementsByTagName('head')[0];
head.appendChild(style);
if(fangan_idx==0){
// let a = 750;//歌词容器到高，随便改,但最好和你自己写到那个div一样高；
// let b = 55;//li的高度，无特殊要求；
a=750;
b=55;
d_top=233;
// let h1 = h2_3;
// if (lrc_li.lrc.length <= h1_1) h1 = h2_1;
// else if (lrc_li.lrc.length <= h1_2) h1 = h2_2;
h1_1=18;//字数
h2_1=30;//高度
h1_2=38;
h2_2=58;
h2_3=80;
}
else if(fangan_idx==1){
// let a = 750;//歌词容器到高，随便改,但最好和你自己写到那个div一样高；
// let b = 55;//li的高度，无特殊要求；
a=750;
b=55;
d_top=233;
// let h1 = h2_3;
// if (lrc_li.lrc.length <= h1_1) h1 = h2_1;
// else if (lrc_li.lrc.length <= h1_2) h1 = h2_2;
h1_1=18;//字数
h2_1=25;//高度
h1_2=37;
h2_2=45;
h2_3=70;
}
else{//小
// let a = 750;//歌词容器到高，随便改,但最好和你自己写到那个div一样高；
// let b = 55;//li的高度，无特殊要求；
a=750;
b=55;
d_top=233;
h1_1=17;//字数
h2_1=24;//高度
h1_2=32;
h2_2=45;
h2_3=67;
}
setCookie("d6",d6.value);
setCookie("d7",d7.value);
setCookie("d8",d8.value);
setCookie("m2",fangan_idx);
d6.style.visibility="collapse";
d7.style.visibility="collapse";
d8.style.visibility="collapse";
m2.style.visibility="collapse";
reader.readAsText(k2.files[0], encoding);
}
}
var lrc;
function musicPlay(ele3) {
console.log("函数。。。");
// let music=window.player;
let musicArea = document.createElement('div');
// let music = document.createElement('audio');
musicUl = document.createElement('ul');
// let a = 750;//歌词容器到高，随便改,但最好和你自己写到那个div一样高；
// let b = 55;//li的高度，无特殊要求；
// let c = 'road.mp3'//歌曲目录，只能放一个哈！
ele3.appendChild(musicArea);
//.appendChild(music);
musicArea.appendChild(musicUl);
musicStyle();
//我让ajax打败了，所以歌词直接放变量了。(╯﹏╰)恶补中；
//烦人的报错，让我把ajax先扔去喂鱼，等下再吃。
function musicStyle() {//控件css样式；
els2.style.height = a + 'px';
//document.getElementsByClassName("r-con")[0].style.height = a + 'px';
// music.autoplay = true;
// music.src = c;
// music.controls = true;
// music.loop = true;
// music.style.outline = 'none';
// music.style.width = '100%';
musicArea.style.width = '100%';
musicArea.style.height = '100%';
musicArea.style.overflow = 'hidden';
// musicArea.style.outline ='3px solid'
musicUl.style.listStyle = 'none';
musicUl.style.width = '100%';
musicUl.style.padding = '0';
}
// //把歌词变成[{time,lrc},{time,lrc}...]的样子，不然没法用的
// function split() {//把lrc歌词分割成数组，
// let split_1 = lrc.split('\n');
// let length = split_1.length;
// for (let i = 0; i < length; i++) {
// let lrcArr = split_1[i];
// split_1[i] = change(lrcArr);
// function change(str) {
// let lrc = str.split(']');
// let timer = lrc[0].replace('[', '');
// let str_music = lrc[1];
// let time_split = timer.split(':');
// let s = +time_split[1];
// let min = +time_split[0];
// return {
// time: min * 60 + s,
// lrc: str_music//分割好到歌词和时间
// }
// }
// }
// return split_1
// }
let lrcArr = lrc.body;//至此歌词处理完了。
console.log(lrcArr);
var topheight = createLi();
function createLi() {//根据歌词数组创建li
let len = lrcArr.length;
var ch = 0;
var topheight2 = [0];
for (let i = 0; i < len; i++) {
let lrc_li = lrcArr[i];
let li = document.createElement('li');
li.innerText = lrc_li.lrc;
let h1 = h2_3;
if (lrc_li.lrc.length <= h1_1) h1 = h2_1;
else if (lrc_li.lrc.length <= h1_2) h1 = h2_2;
if (i) topheight2[topheight2.length] = ch;
ch += h1;
li.style.height = h1 + 'px'
li.style.textAlign = 'center'
li.style.width = '100%'
li.style.padding = '0';
li.style.color = font_color1;
li.style.transition = '0.3s'
// li.style.fontSize='17px';
li.className = "diy";
if(kinds==0) li.onclick = () => { flag1 = 0;current_click(i); };
else if(kinds==1)li.onclick = () => {flag1 = 0; current_click(i); };
// if(kinds==0) li.onclick = () => { window.player.seek(lrc_li.time); time1=new Date();flag1 = 1; current(); };
// else if(kinds==1)li.onclick = () => { videoid.currentTime=lrc_li.time; time1=new Date();flag1 = 1; current(); };
// if(kinds==0) li.ondblclick = () => { window.player.seek(lrc_li.time); time1=new Date();flag1 = 1; current(); };
// else if(kinds==1)li.ondblclick = () => { videoid.currentTime=lrc_li.time; time1=new Date();flag1 = 1; current(); };
// li.οndblclick=()
musicUl.appendChild(li);
}
musicUl.style.marginTop = 0 + 'px';
return topheight2;
}
function setCurrentLi() {
let time;
try {
if(kinds==0) time = window.player.getCurrentTime();
else if(kinds==1)time=videoid.currentTime;
}
catch (err) {
return -1;
}
// console.log(time)
for (i = 0; i < lrcArr.length; i++) {
let play = lrcArr[i];
// Math.abs(time - play.time)<=0.00001
if(Math.abs(time - play.time)<=0.00001)return i;
if (time<play.time) {
return i-1;
}
} return i - 1;
}
function current() {//设置top，让其滚动
let li = setCurrentLi();
let divHeight = a;
let liHeight = b;
//let top = liHeight * li - divHeight / 2 + liHeight / 2 + 3 * liHeight;
let top = topheight[li] - d_top;
if (top < 0) {
top = 0;
}
musicUl.style.marginTop = -top + 'px';
// console.log('top'+top);
let playLi = musicUl.querySelector('.play')
if (playLi) {
playLi.className = '';
}
if (li >= 0) {
musicUl.children[li].className = 'play';
}
}
function current2() {//设置top，让其滚动
// let li = setCurrentLi();
// let divHeight = a;
// let liHeight = b;
// //let top = liHeight * li - divHeight / 2 + liHeight / 2 + 3 * liHeight;
// let top = topheight[li] - d_top;
// if (top < 0) {
// top = 0;
// }
// musicUl.style.marginTop = -top + 'px';
// console.log('top'+top);
let playLi = musicUl.querySelector('.play')
if (playLi) {
playLi.className = '';
}
if (li >= 0) {
musicUl.children[li].className = 'play';
}
}
// window.player.ontimeupdate = current;
var flag_li=-10;
function current_click(li) {//设置top，让其滚动
if(flag_li==li){
if(kinds==0){ window.player.seek(lrcArr[li].time); time1=new Date();
// flag1 = 1;
//current2();
}
else if(kinds==1) { videoid.currentTime=lrcArr[li].time; time1=new Date();
//flag1 = 1;
// current2();
}
}
else {
flag_li=li;
// // let li = setCurrentLi();
// let divHeight = a;
// let liHeight = b;
// //let top = liHeight * li - divHeight / 2 + liHeight / 2 + 3 * liHeight;
// let top = topheight[li] - d_top;
// if (top < 0) {
// top = 0;
// }
// musicUl.style.marginTop = -top + 'px';
// console.log('top'+top);
let playLi = musicUl.querySelector('.play')
if (playLi) {
playLi.className = '';
}
if (li >= 0) {
musicUl.children[li].className = 'play';
}
}
}
// window.player.ontimeupdate = current;
var lastid = window.location.href;
fockit();
function fockit() {
if (window.location.href != lastid) location.reload();
setTimeout(() => {
time1=new Date();
if(flag1==1) current();
fockit();
}, 100);
}
document.onkeydown = function(){
flag1=1;
var keyCode = event.keyCode;
//console.log(keyCode);
if(keyCode==16||keyCode==83){//down
let kk= setCurrentLi();
videoid.currentTime=lrcArr[kk+1].time;
}else if(keyCode==13||keyCode==87){//up
let kk= setCurrentLi();
if(kk)videoid.currentTime=lrcArr[kk-1].time;
}
}
}
//Razbit出品，转载请注明出处；
function mouse1() {
var oDiv = musicUl;
console.log(oDiv.style.marginTop);
function onMouseWheel(ev) {/*当鼠标滚轮事件发生时，执行一些操作*/
time1=new Date();
flag1=0;
ev = ev || window.event;
var down = true; // 定义一个标志，当滚轮向下滚时，执行一些操作
down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
if (down) {
oDiv.style.marginTop = parseInt(oDiv.style.marginTop) - 30 + 'px';
} else {
oDiv.style.marginTop = parseInt(oDiv.style.marginTop) + 30 + 'px';
}
if (ev.preventDefault) {/*FF 和 Chrome*/
ev.preventDefault();// 阻止默认事件
}
//flag1=!0;
return false;
}
addEvent(oDiv, 'mousewheel', onMouseWheel);
addEvent(oDiv, 'DOMMouseScroll', onMouseWheel);
}
function addEvent(obj, xEvent, fn) {
if (obj.attachEvent) {
obj.attachEvent('on' + xEvent, fn);
} else {
obj.addEventListener(xEvent, fn, false);
}
}
</script>
</body>
</html>
3815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
