use video as page background
// ==UserScript==
// @name video_background
// @name:zh-CN video_background
// @name:zh-TW video_background
// @name:ja video_background
// @namespace video_background
// @supportURL https://github.com/zhuzemin
// @description:zh-CN use video as page background
// @description:zh-TW use video as page background
// @description:ja use video as page background
// @description use video as page background
// @include https://*
// @include http://*
// @exclude *://*.jpg
// @exclude *://*.gif
// @exclude *://*.png
// @exclude *://*.mp4
// @exclude *://*.swf
// @exclude *://*.pdf
// @exclude https://anime1.me
// @version 1.94
// @grant GM_xmlhttpRequest
// @grant GM_registerMenuCommand
// @grant GM_setValue
// @grant GM_getValue
// @run-at document-start
// @author zhuzemin
// @license Mozilla Public License 2.0; http://www.mozilla.org/MPL/2.0/
// @license CC Attribution-ShareAlike 4.0 International; http://creativecommons.org/licenses/by-sa/4.0/
// @connect-src 127.0.0.1
// ==/UserScript==
var config = {
'debug':false
}
var debug = config.debug ? console.log.bind(console) : function () {
};
var host='http://127.0.0.1/';
var bgColor='#D8E0E0';
var rndStart=true;
var videoList;
var dirList;
var urlRoot;
var usedList=[];
var dirCount=0;
var hostname;
var textColorList;
var ytbList;
var ytbEnable;
// prepare UserPrefs
setUserPref(
'urlRoot',
host+'******',
'Set root url',
`Url from HFS.(.mp4 or dir)`,
','
);
setUserPref(
'ytbPlaylistUrl',
'https://www.youtube.com/playlist?list=PLmlTcWwPyp188O1lK2fyYA_WFckZNrb0b',
'Set Youtube Playlist url',
`Youtube Playlist url`,
','
);
/*setUserPref(
'textBGcolorOpacity',
'0.95',
'Set Text BG-Color Opacity',
`Opacity: `,
','
);*/
class ObjectRequest{
constructor(url) {
this.method = 'GET';
this.url = url;
this.data=null,
this.headers = {
'User-agent': 'Mozilla/4.0 (compatible) Greasemonkey',
'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'
//'Accept': 'application/atom+xml,application/xml,text/xml',
//'Referer': window.location.href,
};
this.charset = 'text/plain;charset=utf8';
this.other=null;
}
}
var init = function () {
if (window.self === window.top || window.location.href.includes('https://www.youtube.com/embed/')) {
textBGcolorOpacity = GM_getValue('textBGcolorOpacity');
if (textBGcolorOpacity == undefined || textBGcolorOpacity == '') {
textBGcolorOpacity = 0.95;
}
else{
textBGcolorOpacity=parseFloat(textBGcolorOpacity);
}
ytbEnable = GM_getValue('ytbEnable');
if (ytbEnable != undefined) {
if (ytbEnable == 'true') {
ytbEnable = true;
}
else if (ytbEnable == 'false') {
ytbEnable = false;
}
}
ytbList = GM_getValue('ytbList');
if (ytbList == undefined || ytbList == '') {
ytbList = [];
}
urlRoot = GM_getValue('urlRoot');
if (urlRoot == undefined || urlRoot == '') {
urlRoot = null;
}
videoList = GM_getValue('videoList');
if (videoList == undefined || videoList == '') {
videoList = [];
}
/*dirList = GM_getValue('dirList');
if (dirList == undefined || dirList == '') {
dirList = [];
}
debug(dirList);*/
var blockList = GM_getValue('blockList');
if (blockList == undefined || blockList == '') {
blockList = [];
}
else {
blockList= blockList.filter(function(item, pos) {
return blockList.indexOf(item) == pos;
})
}
debug('blockList: '+blockList);
textColorList = GM_getValue('textColorList');
if (textColorList == undefined || textColorList == '') {
textColorList = [];
}
else {
textColorList= textColorList.filter(function(item, pos) {
return textColorList.indexOf(item) == pos;
})
}
debug('textColorList: '+textColorList);
/*var lastTime=GM_getValue('lastTime')||0;
var present=parseInt(new Date(). getTime()/1000);
debug(present-parseInt(lastTime));
if(present-parseInt(lastTime)>86400){
videoList=[];
dirList=[];
GM_setValue('lastTime',present);
GM_setValue('videoList',JSON.stringify(videoList));
GM_setValue('dirList',JSON.stringify(dirList));
}*/
if (!window.location.href.includes('https://www.youtube.com/embed/')) {
hostname = getLocation(window.location.href).hostname;
CreateButton('Text BG-color', function () {
var index = textColorList.indexOf(hostname);
var divList = document.querySelectorAll('div');
if (index == -1) {
for (var div of divList) {
div.style.backgroundColor = bgColor;
//div.style.opacity=textBGcolorOpacity;
}
textColorList.push(hostname);
}
else {
for (var div of divList) {
div.style.backgroundColor = '';
//div.style.opacity=1;
}
textColorList.splice(index, 1);
}
debug('textColorList: '+textColorList);
GM_setValue('textColorList', textColorList);
}, 36);
CreateButton('Clear file list', function () {
dirList = [];
videoList = [];
ytbList = [];
GM_setValue('videoList', videoList);
GM_setValue('dirList', dirList);
GM_setValue('ytbList', ytbList);
}, 72);
CreateButton('Add/Del Block List', function (e) {
var msg;
var index = blockList.indexOf(hostname);
if (index > -1) {
blockList.splice(index, 1);
msg = 'Del Success';
}
else {
blockList.push(hostname);
msg = 'Add Success';
}
GM_setValue('blockList', blockList);
e.target.innerHTML = msg;
setTimeout(function () {
e.target.innerHTML = 'Add/Del Block List';
}, 1000);
}, 108);
CreateButton('Youtube Enable/Disable', function (e) {
var msg;
if (ytbEnable) {
ytbEnable = false;
msg = 'Youtube Disable';
}
else {
ytbEnable = true;
msg = 'Youtube Enable';
}
GM_setValue('ytbEnable', ytbEnable);
e.target.innerHTML = msg;
setTimeout(function () {
e.target.innerHTML = 'Youtube Enable/Disable';
}, 1000);
}, 144);
if (!blockList.includes(hostname)) {
if (urlRoot != null && !ytbEnable) {
urlRoot = urlRoot.replace(/http:\/\/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}\//, host);
if (/\.mp4$/.test(urlRoot)) {
insertVideo(urlRoot);
}
else {
if (videoList.length == 0) {
//var obj = new ObjectRequest(urlRoot);
var obj = new ObjectRequest(urlRoot + '?tpl=list&folders-filter=\\\\&recursive');
request(obj, HandleHFS);
debug(urlRoot);
}
else {
videoShuffle(insertVideo);
}
}
}
else if (ytbEnable) {
if (ytbList.length == 0) {
var ytbPlaylistUrl = GM_getValue('ytbPlaylistUrl');
if (ytbPlaylistUrl == undefined || ytbPlaylistUrl == '') {
ytbPlaylistUrl = null;
}
if (ytbPlaylistUrl != null) {
ytbPlaylistUrl = ytbPlaylistUrl.match(/https:\/\/www.youtube.com\/playlist\?list=(.*)$/);
if (ytbPlaylistUrl != null) {
ytbPlaylistUrl = ytbPlaylistUrl[1];
ytbPlaylistUrl = 'https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2C+id&playlistId=' + ytbPlaylistUrl + '&key=AIzaSyAbzugt7o1RRhBVDyPyZxZTeriH-3Ogtkg';
debug('ytbPlaylistUrl: ' + ytbPlaylistUrl);
var obj = new ObjectRequest(ytbPlaylistUrl);
request(obj, function (respObj) {
var json = JSON.parse(respObj.responseText);
debug('json: ' + json);
for (var item of json.items) {
var videoId = item.snippet.resourceId.videoId;
var videoUrl = 'https://www.youtube.com/embed/' + videoId + '?controls=0&autoplay=1&mute=1';
ytbList.push(videoUrl);
}
GM_setValue('ytbList', ytbList);
videoList = ytbList;
videoShuffle(insertYtb);
});
}
}
}
else {
videoList = ytbList;
videoShuffle(insertYtb);
}
}
}
}
else if (window.location.href.includes('https://www.youtube.com/embed/')) {
var video = document.querySelector('video.video-stream.html5-main-video');
setTimeout(function () {
var randomNum = Math.floor(Math.random() * (video.duration - 0));
video.currentTime=randomNum;
},5000);
var interval=setInterval(function () {
if(parseInt(video.currentTime)==parseInt(video.duration)){
videoList=ytbList;
videoShuffle(insertYtb);
clearInterval(interval);
}
},15000);
var frame=document.querySelector('#video_bg');
window.addEventListener('message', function (e) {
debug(e.data);
if (e.data == "pause") {
if(frame!=null){
frame.contentWindow.postMessage("pause", "*");
}
else {
video.pause();
}
}
else if (e.data == 'play') {
if(frame!=null){
frame.contentWindow.postMessage("play", "*");
}
else {
video.play();
}
}
});
}
}
}
function CreateButton(text,func,positionBtm){
var btn=document.createElement("button");
btn.type="button";
btn.innerHTML=text;
btn.style=`
position: fixed;
right: 0px;
bottom: `+positionBtm+`px;
z-index: 10000;
opacity:0.1;
`;
if(positionBtm!=0&&positionBtm!=36){
btn.style.display='none';
document.body.firstChild.addEventListener('mouseover',function () {
btn.style.display='block';
});
document.body.firstChild.addEventListener('mouseout',function () {
setTimeout(function () {
btn.style.display='none';
},3000);
});
}
btn.addEventListener('click',func);
btn.addEventListener('mouseout',function () {
btn.style.opacity=0.1;
});
btn.addEventListener('mouseover',function () {
btn.style.opacity=1;
});
document.body.insertBefore(btn,document.body.firstChild);
}
function HandleHFS(responseObj) {
if (responseObj.status == 200) {
var fileList=responseObj.responseText.split('\r\n');
debug(fileList);
for(var file of fileList){
if(/\.mp4$/.test(file)){
videoList.push(file);
GM_setValue('videoList',videoList);
}
}
videoShuffle(insertVideo);
}
}
/*
function HandleHFS(responseObj){
if(responseObj.status==200){
if(dirCount!=0){
dirCount--;
}
debug('dirCount: '+dirCount);
var dom = new DOMParser().parseFromString(responseObj.responseText, "text/html");
var files = dom.querySelector('#files');
var trList=files.querySelectorAll("tr");
for(var tr of trList){
var a=tr.querySelector('a');
debug('a.href: '+a.href);
var url=a.href.replace(/https?:\/\/.*\/([^\/]*((\.mp4)|\/)$)/, function(match, $1, $2, offset, original){ return responseObj.finalUrl+$1;})
debug('url: '+url);
if(/\.mp4$/.test(a.textContent)&&!videoList.includes(url)){
videoList.push(url);
GM_setValue('videoList',JSON.stringify(videoList));
}
else if(a.textContent!='Name'){
var img=a.querySelector('img');
debug(img.src);
if(img.src.includes('/~img_folder')){
if(dirList.length!=0){
debug(dirList)
for(var existUrl of dirList){
if(existUrl.includes(url)){
break;
}
else if(existUrl==dirList[dirList.length-1]){
debug('existUrl: '+existUrl+' & '+'url: '+url);
dirCount++;
var obj=new ObjectRequest(url);
dirList.push(url);
GM_setValue('dirList',JSON.stringify(dirList));
request(obj,HandleHFS);
}
}
}
else {
dirCount++;
dirList.push(url);
GM_setValue('dirList',JSON.stringify(dirList));
var obj=new ObjectRequest(url);
request(obj,HandleHFS);
}
}
}
if (tr==trList[trList.length-1]&&dirCount==0) {
videoShuffle();
if (textColorList.includes(hostname)) {
var divList=document.querySelectorAll('div');
for (var div of divList){
div.style.backgroundColor='#D8E0E0';
}
}
}
}
dirCount--;
}
}
*/
window.addEventListener('DOMContentLoaded', init);
function request(object,func) {
var retries = 3;
GM_xmlhttpRequest({
method: object.method,
url: object.url,
data: object.data,
headers: object.headers,
overrideMimeType: object.charset,
timeout:120000,
//synchronous: true
onload: function (responseDetails) {
//debug(responseDetails);
if (responseDetails.status != 200&&responseDetails.status != 302) {
// retry
if (retries--) { // *** Recurse if we still have retries
setTimeout(request,2000);
return;
}
}
//Dowork
func(responseDetails,object.other);
},
ontimeout: function (responseDetails) {
debug(responseDetails);
//Dowork
func(responseDetails,object.other);
},
ononerror: function (responseDetails) {
debug(responseDetails);
//Dowork
func(responseDetails,object.other);
}
})
}
function setUserPref(varName, defaultVal, menuText, promtText, sep){
GM_registerMenuCommand(menuText, function() {
var val = prompt(promtText, GM_getValue(varName, defaultVal));
if (val === null) { return; } // end execution if clicked CANCEL
// prepare string of variables separated by the separator
if (sep && val){
var pat1 = new RegExp('\\s*' + sep + '+\\s*', 'g'); // trim space/s around separator & trim repeated separator
var pat2 = new RegExp('(?:^' + sep + '+|' + sep + '+$)', 'g'); // trim starting & trailing separator
//val = val.replace(pat1, sep).replace(pat2, '');
}
//val = val.replace(/\s{2,}/g, ' ').trim(); // remove multiple spaces and trim
GM_setValue(varName, val);
// Apply changes (immediately if there are no existing highlights, or upon reload to clear the old ones)
//if(!document.body.querySelector(".THmo")) THmo_doHighlight(document.body);
//else location.reload();
});
}
function videoShuffle(func) {
debug('videoShuffle');
debug('videoList: '+videoList);
for(var used of usedList){
var index = videoList.indexOf(used);
if (index > -1) {
videoList.splice(index, 1);
}
}
var randomNum = Math.floor(Math.random() * (videoList.length - 0));
if(window.location.href.includes('https://www.youtube.com/embed/')){
videoList = ytbList;
}
var url=videoList[randomNum];
/*if(rndStart){
if(ytbEnable&&!window.location.href.includes('https://www.youtube.com/embed/')){
var videoId=url.match(/https:\/\/www.youtube.com\/embed\/(.*)\?controls=0&autoplay=1&mute=1/);
videoId=videoId[1];
var urlVidInfo='https://www.googleapis.com/youtube/v3/videos?part=contentDetails&id='+videoId+'&key=AIzaSyAbzugt7o1RRhBVDyPyZxZTeriH-3Ogtkg';
var obj=new ObjectRequest(urlVidInfo);
request(obj,function (respObj) {
var json=JSON.parse(respObj.responseText);
for(var item of json.items){
if(item.id==videoId){
debug(JSON.stringify(json));
var duration=item.contentDetails.duration;
debug(duration);
var reptms = /^PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?$/;
var hours = 0, minutes = 0, seconds = 0, totalseconds;
if (reptms.test(duration)) {
var matches = reptms.exec(duration);
debug(matches);
if (matches[1]) hours = Number(matches[1]);
if (matches[2]) minutes = Number(matches[2]);
if (matches[3]) seconds = Number(matches[3]);
totalseconds = hours * 3600 + minutes * 60 + seconds;
}
randomNum = Math.floor(Math.random() * (totalseconds - 0));
url='https://www.youtube.com/embed/'+videoId+'?controls=0&autoplay=1&mute=1&start='+randomNum;
debug(url);
func(url);
}
}
})
}
else{
func(url);
}
}*/
func(url);
if (textColorList.includes(hostname)) {
var divList=document.querySelectorAll('div');
for (var div of divList){
div.style.backgroundColor=bgColor;
//div.style.opacity=textBGcolorOpacity;
}
}
}
function insertVideo(url) {
debug('insertVideo');
var video = document.createElement("video");
video.style = 'width:100%';
video.src = url;
video.autoplay = true;
video.muted=true;
var div = document.createElement("div");
div.style = "width:100%; position: fixed; top: 0; left: 0; z-index: -100;";
div.insertBefore(video, null);
debug(url);
document.body.insertBefore(div, null);
window.addEventListener("focus", function () {
video.play();
});
window.addEventListener("blur", function () {
video.pause();
});
video.addEventListener('onended',function () {
document.removeChild(div);
videoShuffle(insertVideo);
});
video.addEventListener('loadeddata', (event) => {
var randomNum = Math.floor(Math.random() * (video.duration - 0));
video.currentTime=randomNum;
});
usedList.push(url);
}
function getLocation(href) {
var l = document.createElement("a");
l.href = href;
return l;
}
function insertYtb(url) {
debug('insertYtb');
if(window.location.href.includes('https://www.youtube.com/embed/')) {
while (document.body.firstChild) {
document.body.removeChild(document.body.firstChild);
}
}
var iframe = document.createElement("iframe");
iframe.id='video_bg';
iframe.style = 'width:100%;height:100%;';
iframe.src = url;
iframe.allow = "accelerometer;";
iframe.frameborder='0';
var div = document.createElement("div");
div.style = "width:100%; height:100%;position: fixed; top: 0; left: 0; z-index: -100;";
div.insertBefore(iframe, null);
debug(url);
document.body.insertBefore(div, null);
window.addEventListener("focus", function () {
iframe.contentWindow.postMessage("play", "*");
});
window.addEventListener("blur", function () {
iframe.contentWindow.postMessage("pause", "*");
});
usedList.push(url);
}
function iframeRef( frameRef ) {
return frameRef.contentWindow
? frameRef.contentWindow.document
: frameRef.contentDocument
}