Video Bis wohin geschaut?
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
<!doctype html>
<html lang="de">
<head>
<title>Starrt Vide an letzter position</title>
<style>
body{
display: flex;
flex-direction: column;
padding: 20px 10%;
align-items: stretch;
}
video,#erster,div{
border:2px solid black;
}
#zeit{
font-weight:900;
}
#start{
display:none;
}
</style>
</head>
<body>
<button id="start"></button>
<p id="erster"></p>
<div>Timer der beim verlassen gespeichert werden muss <span id="zeit">0</span><br>Zb in localstorage,cookie,datenbank usw...</div>
<video id="vid1" controls>
<source src="/media/front.mp4" type="video/webm" />
Your browser does not support the video tag.
</video>
<script>
var info=document.getElementById('zeit');
var ele=document.getElementById('vid1');
var inf=document.getElementById('erster');
var start_ele=document.getElementById('start');
if(localStorage.getItem('abgelaufen')){
start_ele.style.display='block';
start_ele.innerHTML='Video nach '+localStorage.getItem('abgelaufen')+' Sekunden wieder starten';
}else{
inf.innerHTML='Wenn du beim Video Schauen die Seite neu läds wird die Zeit gespeichert.<br>Dann erscheint ein Button der das Video an der alten Position wieder startet'
}
start_ele.addEventListener('click',function(){
ele.currentTime = localStorage.getItem('abgelaufen');
ele.play();
})
ele.addEventListener("timeupdate", function () {
const weg = ele.currentTime.toFixed(0);
info.innerHTML = "Abgelaufen " + weg
localStorage.setItem('abgelaufen',weg)
}, false);
ele.addEventListener("ended", function () {
localStorage.removeItem('abgelaufen');
})
</script>
</body>
</html>