+ looping, auto-hide control bar
parent
0079fbaf70
commit
43bb730503
|
|
@ -1,7 +1,14 @@
|
|||
window.addEventListener('DOMContentLoaded', (event) => {
|
||||
const autoplayInput = document.querySelector('#autoplayInput');
|
||||
const videoStreamInput = document.querySelector('#videoStreamInput');
|
||||
const audioStreamInput = document.querySelector('#audioStreamInput');
|
||||
const loopInput = document.querySelector("#loopInput");
|
||||
const controlbar = document.querySelector(".html5-video-controls")
|
||||
const video = document.getElementById('player_video');
|
||||
const audio = document.getElementById('player_audio');
|
||||
|
||||
loopInput.checked = false;
|
||||
|
||||
formats = JSON.parse(document.getElementById('yt_formats').innerText)
|
||||
.filter((fmt) => isFormatSupported(fmt) === true)
|
||||
.sort((a, b) => {
|
||||
|
|
@ -42,7 +49,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
selectStreams(videoFormat, audioFormat)
|
||||
}
|
||||
|
||||
|
||||
if (localStorage.getItem("volume") != null) {
|
||||
setVolume(localStorage.getItem("volume"));
|
||||
}
|
||||
|
|
@ -57,10 +63,12 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
if (video.ended) {
|
||||
video.currentTime = 0;
|
||||
audio.currentTime = 0;
|
||||
}
|
||||
video.play();
|
||||
if (audio.src) {
|
||||
audio.play();
|
||||
playbackWait();
|
||||
} else {
|
||||
video.play();
|
||||
if (audio.src) {
|
||||
audio.play();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
classList.remove('ytp-button-pause');
|
||||
|
|
@ -70,6 +78,11 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
audio.currentTime = video.currentTime; // sync audio to video on pause
|
||||
audio.pause();
|
||||
}
|
||||
if (video.currentTime == video.duration && loopInput.checked == true) {
|
||||
video.currentTime = 0;
|
||||
audio.currentTime = 0;
|
||||
playbackWait();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -166,10 +179,6 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
menu.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
let autoplayInput = document.querySelector('#autoplayInput');
|
||||
let videoStreamInput = document.querySelector('#videoStreamInput');
|
||||
let audioStreamInput = document.querySelector('#audioStreamInput');
|
||||
|
||||
function applyStreams() {
|
||||
localStorage.setItem("videoStream", videoStreamInput.value);
|
||||
|
|
@ -218,6 +227,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
}
|
||||
}
|
||||
|
||||
let mouseMoveTimeout;
|
||||
|
||||
function handleMouse(type, e) {
|
||||
controlbar.style="transform: translateY(0px);";
|
||||
clearTimeout(mouseMoveTimeout);
|
||||
if(type != "controls") {
|
||||
mouseMoveTimeout = setTimeout(() => {
|
||||
controlbar.style="transform: translateY(40px);";
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
function handleProtected(e) {
|
||||
console.log(e)
|
||||
if(e.originalTarget.error.code == 4 && ! e.originalTarget.currentSrc.startsWith("https://"+window.location.hostname)) {
|
||||
|
|
@ -301,6 +322,7 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
});
|
||||
video.addEventListener('timeupdate', () => updateTime());
|
||||
video.addEventListener('ended', () => toggleVideo(false)); // just to change the classes
|
||||
video.addEventListener('ended', () => console.log("event fired")); // just to change the classes
|
||||
document.querySelector('.ytp-progress-list').addEventListener('click', (e) => scrub(e));
|
||||
// document.querySelector('.ytp-play-progress').addEventListener('click', (e) => scrub(e));
|
||||
document.querySelector('.ytp-volume-slider').addEventListener('click', (e) => volume(e));
|
||||
|
|
@ -308,6 +330,8 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
document.querySelector('video').addEventListener('error', (e) => handleProtected(e));
|
||||
document.querySelector('audio').addEventListener('error', (e) => handleProtected(e));
|
||||
document.querySelector('body').addEventListener('keydown', (e) => handleKeyboard(e));
|
||||
document.querySelector('.html5-video-container').addEventListener('mousemove', (e) => handleMouse("frame", e));
|
||||
controlbar.addEventListener('mousemove', (e) => handleMouse("controls", e));
|
||||
|
||||
if(localStorage.getItem("autoplay") == "true") {
|
||||
toggleVideo(true);
|
||||
|
|
@ -315,6 +339,10 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
|||
playbackWait();
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
controlbar.style="transform: translateY(40px);";
|
||||
}, 2000);
|
||||
|
||||
// formats
|
||||
console.log("w dzisiejszym menu")
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@ echo '
|
|||
position: relative;
|
||||
margin-left: auto;
|
||||
}
|
||||
.html5-video-container {
|
||||
height: 100%;
|
||||
}
|
||||
.html5-video-controls {
|
||||
transition: ease-in .15s;
|
||||
}
|
||||
</style>
|
||||
<div class="html5-video-player el-detailpage ps-null hide-info-bar autohide-controls-aspect autohide-controls-fullscreen autominimize-progress-bar-non-aspect ytp-block-autohide" tabindex="-1" id="movie_player" data-version="//web.archive.org/web/20150202234539/https://s.ytimg.com/yts/jsbin/html5player-en_US-vflvmwLwg/html5player.js">
|
||||
<div class="html5-video-container"><video style="left: 0px; top: 0px; transform: none;" id="player_video" class="video-stream html5-main-video"></video><audio style="display: none;" id="player_audio"></audio><div class="html5-video-content" style="width: 854px; height: 480px; left: 0px; top: 0px;"><div class="video-annotations iv-module"><div class="video-legacy-annotations html5-stop-propagation"></div><div class="video-custom-annotations"></div></div><div class="countdowntimer hid iv-module" style="display: none;"><svg width="60" height="60"><g><circle class="countdowntimer-background-circle" cx="30" cy="30" r="15"></circle><path class="countdowntimer-diminishing-pieslice" d="M30,30 z"></path><circle class="countdowntimer-middle-dot" cx="30" cy="30" r="4"></circle></g></svg></div></div><div class="html5-storyboard-framepreview" style="display: none;" aria-hidden="true"><img class="html5-storyboard-framepreview-img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="width: 640px; height: 480px; margin: 0px 107px; background-image: url("https://web.archive.org/web/20150202234539/https://i.ytimg.com/sb/jNQXAC9IVRw/storyboard3_L1/MNaN.jpg?sigh=KbvvlYAVTSdMbm3rry-JvPVWNrg"); background-position: 0px 0px; background-size: 6400px 4800px;"></div><canvas width="60" height="60" style="display: none; transform: scale(0.5);" class="html5-video-loader html5-center-overlay ytp-scalable-icon-grow" aria-hidden="true"></canvas><div class="ytp-thumbnail html5-stop-propagation"><div class="ytp-large-play-button html5-center-overlay ytp-scalable-icon-shrink"><svg><path fill-rule="evenodd" clip-rule="evenodd" fill="#1F1F1F" class="ytp-large-play-button-svg" d="M84.15,26.4v6.35c0,2.833-0.15,5.967-0.45,9.4c-0.133,1.7-0.267,3.117-0.4,4.25l-0.15,0.95c-0.167,0.767-0.367,1.517-0.6,2.25c-0.667,2.367-1.533,4.083-2.6,5.15c-1.367,1.4-2.967,2.383-4.8,2.95c-0.633,0.2-1.316,0.333-2.05,0.4c-0.767,0.1-1.3,0.167-1.6,0.2c-4.9,0.367-11.283,0.617-19.15,0.75c-2.434,0.034-4.883,0.067-7.35,0.1h-2.95C38.417,59.117,34.5,59.067,30.3,59c-8.433-0.167-14.05-0.383-16.85-0.65c-0.067-0.033-0.667-0.117-1.8-0.25c-0.9-0.133-1.683-0.283-2.35-0.45c-2.066-0.533-3.783-1.5-5.15-2.9c-1.033-1.067-1.9-2.783-2.6-5.15C1.317,48.867,1.133,48.117,1,47.35L0.8,46.4c-0.133-1.133-0.267-2.55-0.4-4.25C0.133,38.717,0,35.583,0,32.75V26.4c0-2.833,0.133-5.95,0.4-9.35l0.4-4.25c0.167-0.966,0.417-2.05,0.75-3.25c0.7-2.333,1.567-4.033,2.6-5.1c1.367-1.434,2.967-2.434,4.8-3c0.633-0.167,1.333-0.3,2.1-0.4c0.4-0.066,0.917-0.133,1.55-0.2c4.9-0.333,11.283-0.567,19.15-0.7C35.65,0.05,39.083,0,42.05,0L45,0.05c2.467,0,4.933,0.034,7.4,0.1c7.833,0.133,14.2,0.367,19.1,0.7c0.3,0.033,0.833,0.1,1.6,0.2c0.733,0.1,1.417,0.233,2.05,0.4c1.833,0.566,3.434,1.566,4.8,3c1.066,1.066,1.933,2.767,2.6,5.1c0.367,1.2,0.617,2.284,0.75,3.25l0.4,4.25C84,20.45,84.15,23.567,84.15,26.4z M33.3,41.4L56,29.6L33.3,17.75V41.4z"></path><polygon fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="33.3,41.4 33.3,17.75 56,29.6"></polygon></svg></div></div><div class="html5-bezel html5-center-overlay" aria-hidden="true" style="display: none;"><div></div></div></div><div class="html5-video-info-panel"><span class="html5-video-info-panel-close" role="button" title="close">[x]</span><div class="html5-video-info-panel-content"><table class="html5-video-info-table"><tr><th>Video ID:</th><td></td></tr><tr><th>Dimensions:</th><td></td></tr><tr><th>Resolution:</th><td></td></tr><tr><th>Volume:</th><td></td></tr><tr><th>Stream Type:</th><td></td></tr><tr><th>CPN:</th><td></td></tr><tr><th>Mime Type:</th><td></td></tr><tr><th>DASH:</th><td></td></tr><tr><th>Protected:</th><td></td></tr><tr><th>Bandwidth:</th><td><span><span><span></span></span></span><span></span></td></tr></table><table class="html5-video-info-table html5-video-element-info-table"><tr><th>Decoded Frames</th><th>Dropped Frames</th><th>Parsed Frames</th><th>Presented Frames</th></tr><tr><td></td><td></td><td></td><td></td></tr><tr><th>Video Bytes Decoded</th><th>Audio Bytes Decoded</th><th>Painted Frames</th><th>Paint Delay</th></tr><tr><td></td><td></td><td></td><td></td></tr></table></div></div><div class="html5-video-controls">
|
||||
|
|
@ -28,6 +34,8 @@ echo '
|
|||
<select id="audioStreamInput" name="audio"></select><br>
|
||||
<input type="checkbox" name="autoplay" id="autoplayInput" value="Autoplay">
|
||||
<label for="autoplay">Autoplay?</label><br>
|
||||
<input type="checkbox" name="loop" id="loopInput" value="Loop">
|
||||
<label for="loop">Loop?</label><br>
|
||||
<button id="applyStreams">Apply</button><button id="resetStreams">Reset</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue