| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset='utf-8'>
- <meta http-equiv='X-UA-Compatible' content='IE=edge'>
- <title>OBS Twitch Points Alerts</title>
- <meta name='viewport' content='width=device-width, initial-scale=1'>
- <!-- <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
- <script src='main.js'></script> -->
- <style>
- * {
- color: white;
- }
- video {
- background-color: rgba(0, 0, 0, 0);
- height: 100vh;
- z-index: -100;
- }
- h2 {
- position: absolute;
- top: 5em;
- left: 5em;
- z-index: 100;
- }
- </style>
- </head>
- <body>
- <video>
- <script>
- let video = document.querySelector("video");
- video.volume = 0.2;
- // setTimeout(()=>{
- // video.play()
- // }, 1500)
- video.addEventListener("ended", ()=>{
- video.src = "";
- })
- </script>
- <h2 id="ran">
- Random text
- </h2>
- <script>
- let el = document.querySelector("h2#ran");
- let randomnumber = Math.random() * 1000000;
- randomnumber = randomnumber.toString();
- el.textContent = "Random Number: " + randomnumber;
- </script>
- <script>
- function parseCommand(cmdObject){
- switch(cmdObject.cmd){
- case "reload":
- location.reload();
- break;
- case "stop":
- video.pause();
- break;
- case "start":
- video.play();
- break;
- case "vol":
- if(cmdObject.volume)
- video.volume = Number.parseFloat(cmdObject.volume)
- break;
- case "src":
- if(cmdObject.src){
- video.src=cmdObject.src
- }
- break;
- }
- }
- let ws = new WebSocket("ws://localhost:8045");
- ws.onmessage = (msg)=>{
- let data = msg.data;
- let commandArray = JSON.parse(msg.data)
- if(commandArray instanceof Array){
- for(let it of commandArray){
- parseCommand(it);
- }
- }
- };
- </script>
- <script>
- setInterval(()=>{
- if(!ws || ws.readyState != 1){
- location.reload();
- }
- }, 5000);
- </script>
- </body>
- </html>
|