Make hls playback work without inline JS

This commit is contained in:
Butter Cat 2023-11-16 21:51:11 -05:00
parent 4120558649
commit 7749c754bc
2 changed files with 26 additions and 21 deletions

View file

@ -1,25 +1,30 @@
// @license http://www.gnu.org/licenses/agpl-3.0.html AGPL-3.0
// SPDX-License-Identifier: AGPL-3.0-only
function playVideo(overlay) {
const video = overlay.parentElement.querySelector('video');
const url = video.getAttribute("data-url");
video.setAttribute("controls", "");
overlay.style.display = "none";
const video_overlay = document.getElementsByClassName("video-overlay");
if (Hls.isSupported()) {
var hls = new Hls({autoStartLoad: false});
hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
hls.loadLevel = hls.levels.length - 1;
hls.startLoad();
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('canplay', function() {
video.play();
});
}
for (var i = 0 ; i < video_overlay.length; i++) {
video_overlay[i].addEventListener('click', function () {
const video = this.parentElement.querySelector('video');
const url = video.getAttribute("data-url");
video.setAttribute("controls", "");
this.style.display = "none";
if (Hls.isSupported()) {
var hls = new Hls({autoStartLoad: false});
hls.loadSource(url);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
hls.loadLevel = hls.levels.length - 1;
hls.startLoad();
video.play();
});
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = url;
video.addEventListener('canplay', function() {
video.play();
});
}
});
}
// @license-end

View file

@ -109,7 +109,7 @@ proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode =
source(src=source, `type`="video/mp4")
of m3u8, vmap:
video(poster=thumb, data-url=source, data-autoload="false", muted=prefs.muteVideos)
verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">"
verbatim "<div class=\"video-overlay\">"
tdiv(class="overlay-circle"): span(class="overlay-triangle")
verbatim "</div>"
if container.len > 0: