Add a simple loop/unloop button to the navbar for Youtube Mobile. Made in about 15 minutes as a teaching tutorial.
当前为
// ==UserScript==
// @name Youtube Mobile Looper
// @namespace http://tampermonkey.net/
// @version 4.20.69
// @description Add a simple loop/unloop button to the navbar for Youtube Mobile. Made in about 15 minutes as a teaching tutorial.
// @author Taylor Wright
// @match https://m.youtube.com/*
// @icon https://www.google.com/s2/favicons?domain=youtube.com
// @grant none
// ==/UserScript==
//I DIDN'T HAVE TIME TO FINISH THIS! I need to make it work from entering from m.youtube.com instead of just watch. Single Page Apps were terrible for the userscript environment.
//append some CSS to the header with the += hack. You can write it like CSS and HTML between ``
document.querySelector('head').innerHTML += `<style>
.loopBtns{
position: fixed;
z-index: 999;
top: 20px;
left: 130px;
font-weight: 900;
color: silver;
}
</style>`
//declare some variables and create some elements
let loopBtn = document.createElement("BUTTON");
let unLoopBtn = document.createElement("BUTTON");
//got rid of the line below and just used the querySelector where ever video was for a fresh grab each time. Allows me to come in through the front page.
//let video = document.querySelector('.html5-main-video');
let appendTo = document.querySelector('body');
let url = location.href;
loopBtn.innerHTML = "Loop";
unLoopBtn.innerHTML = "Unloop";
loopBtn.className = "loopBtns";
unLoopBtn.className = "loopBtns";
//make unloop class hidden, we'll unhide it and hide loop after loop is pressed and visa versa
unLoopBtn.style.display = "none";
appendTo.appendChild(loopBtn);
appendTo.appendChild(unLoopBtn);
//add some event listeners to make the video loop, hide the loop button/unloop button
loopBtn.addEventListener("click", () => {
document.querySelector('.html5-main-video').loop = true;
unLoopBtn.style.display = "block";
loopBtn.style.display = "none";
});
unLoopBtn.addEventListener("click", () => {
document.querySelector('.html5-main-video').loop = false;
unLoopBtn.style.display = "none";
loopBtn.style.display = "block"
});
//last, listen for the URL/window to change and change loop button to it's off state
//I used a primitive method I copy pasted for this part due to problems with mobile.
document.body.addEventListener('click', ()=>{
requestAnimationFrame(()=>{
if(url!==location.href){
document.querySelector('.html5-main-video').loop = false;
unLoopBtn.style.display = "none";
loopBtn.style.display = "block"
url = location.href
}
});
}, true);