Devtools detect is open
Hallo liebe User Gemeinde,
ich habe eine Frage. Kann ich mit JavaScript / jQuery o.ä. auslesen, ob jemand ein von mir eingebettetes Video (per Videoelement) bis zum Schluss geschaut hat? Wenn ja, wie? Hat jemand eine Idee / einen Ansatz für mich?
Vielen lieben Dank.
Der hier verwendete Code
<style>
* {
padding: 0;
margin: 0;
}
.main h1 {
font-size: 60px;
font-weight: 100;
}
#devtools-state {
margin: 50px 0 36px 0;
font-size: 100px;
font-weight: 200;
}
#devtools-orientation {
margin-bottom: 40px;
font-size: 28px;
height: 28px;
font-weight: 100;
}
.instruction {
font-weight: 200;
color: #666;
}
#raus {
background: rgba(2,2,2,0.8);
width: 100%;
position: fixed;
display: none;
top: 0;
height: 100vh;
color: red;
overflow: hidden;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
align-items: center;
justify-content: space-around;
}
#raus h1{
line-height: 50px;
font-size:300%;
}
</style>
<body>
<div class="container">
<section class="main span12 text-center">
<h1>Is DevTools open?</h1>
<h2 id="devtools-state"></h2>
<h3 id="devtools-orientation"></h3>
<div class="instruction">Try it out by opening DevTools</div>
</section>
</div>
<div id="raus">
<h1>DevTools nutzung verboten<br>You go to Google.<br>Bye,Bye in <span id="sek"></span> Sekunden...</h1>
</div>
<script>
const devtools = {
isOpen: false,
orientation: undefined,
};
const threshold = 160;
const emitEvent = (isOpen, orientation) => {
globalThis.dispatchEvent(new globalThis.CustomEvent('devtoolschange', {
detail: {
isOpen,
orientation,
},
}));
};
const main = ({emitEvents = true} = {}) => {
const widthThreshold = globalThis.outerWidth - globalThis.innerWidth > threshold;
const heightThreshold = globalThis.outerHeight - globalThis.innerHeight > threshold;
const orientation = widthThreshold ? 'vertical' : 'horizontal';
if (
!(heightThreshold && widthThreshold)
&& ((globalThis.Firebug && globalThis.Firebug.chrome && globalThis.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)
) {
if ((!devtools.isOpen || devtools.orientation !== orientation) && emitEvents) {
emitEvent(true, orientation);
}
devtools.isOpen = true;
devtools.orientation = orientation;
} else {
if (devtools.isOpen && emitEvents) {
emitEvent(false, undefined);
}
devtools.isOpen = false;
devtools.orientation = undefined;
}
};
main({emitEvents: false});
setInterval(main, 500);
var weg=document.getElementById('raus');
var seku=document.getElementById('sek');
const stateElement = document.querySelector('#devtools-state');
const orientationElement = document.querySelector('#devtools-orientation');
stateElement.textContent = devtools.isOpen ? 'yes' : 'no';
orientationElement.textContent = devtools.orientation ? devtools.orientation : '';
undweg(stateElement.textContent)
window.addEventListener('devtoolschange', event => {
stateElement.textContent = event.detail.isOpen ? 'yes' : 'no';
undweg(stateElement.textContent)
orientationElement.textContent = event.detail.orientation ? event.detail.orientation : '';
});
function undweg(w){
if(w=='yes'){
weg.style.display='flex';
// var timer=setInterval('debugger;', 500);
function tim(h){
console.log(h)
if(h>0){
setTimeout(function(){
h--;
seku.innerHTML=h;
tim(h);
},1000)
}else{
weg.innerHTML='<h1>SCHÜÜÜÜÜÜÜÜÜÜÜÜÜÜÜÜÜÜÜSS</h1>';
window.location.href='https://www.google.com/search?q=haha';
}
}
tim(5);
}else{
weg.style.display='none';
}
}
</script>
</body>