Hallo Dag,
na denn... (das Ergebnis siehst Du im unten beigefügten video)
Das Prinzip ist ja schon oben skizziert. Den html5-playercode (html, css, js) habe ich im wesentlichen von Ayooluwa Isaiah übernommen, der auf
https://freshman.tech/custom-html5-video/ eine super Einführung dazu geschrieben hat.
Alle seine unten genannten Dateien findet man auf github unter
https://github.com/Freshman-tech/custom-html5-video.git
In seine index.js habe ich in die function updateTimeElapsed() etwas code eingefügt (ab // Bis zum Video-Ende ....):
// updateTimeElapsed indicates how far through the video
// the current playback is by updating the timeElapsed element
function updateTimeElapsed() {
const time = formatTime(Math.round(video.currentTime));
timeElapsed.innerText = `${time.minutes}:${time.seconds}`;
timeElapsed.setAttribute('datetime', `${time.minutes}m ${time.seconds}s`);
// Bis zum Video-Ende Button "Als erledigt kennzeichnen" ausgeblendet lassen
const videoDuration = Math.round(video.duration);
var x = document.getElementsByClassName("btn btn-outline-secondary");
if (duration.innerText > timeElapsed.innerText) {
x[0].style.display = "none";
}
else {
x[0].style.display = "block";
}
}und das js file in einem geeigneten Ordner in der moodle instanz abgelegt.
Im Kurs habe ich eine Aktivität 'unilabel' angelegt und im 'einfaches Textfeld' nun den code innerhalb des body-Tags aus Ayooluwa Isaiah's index.html eingefügt - natürlich unten im code noch den Pfad zur index.js angepasst.
Zum Schuß noch das video-vorspulen blockieren: dazu den css-code aus Ayooluwa Isaiah's style.css bei .seek anpassen und seinen gesamten html5-videoplaer css-code in Moodle bei [Website-Administration / Darstellung / Designs / Boost Einstellungen / erweiterte Einstellungen] in Raw SCSS einfügen:
.seek {
/* seek - Kopf soll unsichbar sein, damit skipping unmöglich ist */
display: none;
position: absolute;
top: 0;
width: 100%;
cursor: pointer;
margin: 0;
}
Wie gesagt - etwas hemdsärmelig. Würde mich interessieren, ob Du oder andere mit richtig Ahnung mir verborgene Kinken sehen, durch die sich das System demnächst abschiesst...
Falls dem nicht so ist, wäre es natürlich chic, das ganze in ein plugin zu verpacken, so dass man ohne viel editieren die video-links setzen könnte - aber leider habe keine Ahnung, wie man sowas machen würde...
VG, Robert
