1
Ich habe eine HTML5 Webapp, die auf Tablet-Geräten angezeigt wird. In dieser Webapp gibt es ein Video, das gerade abgespielt wird. Die Benutzer können verschiedene Bereiche im Video auswählen, um ein anderes Video abzuspielen. Dies geschieht durch Überlagern eines unsichtbaren Bildes mit Bereichs-Tags, die js aufrufen, um das Video zu wechseln. Was ich frage mich ist, wenn es eine Möglichkeit gibt, diese Videos schneller zu laden und möglicherweise eine Art Videoübergangsüberhang hinzuzufügen, um es professioneller aussehen zu lassen. Hier ist meine aktuelle App:Transitioning zwischen HTML-Videos
<!doctype html />
<html>
<body>
<div id="wrapper">
<video id="video" width="320" height="240" autoplay>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div style="position: absolute; left: 8px; top: 8px; z-index: 1;">
<img src="" width="320" height="240" usemap="#grid">
<map name="grid">
<area shape="rect" coords="0,0,160,240" href="javascript:loadLeftVideo()" alt="Left">
<area shape="rect" coords="161,0,320,240" href="javascript:loadRightVideo()" alt="Right">
</map>
</div>
</div>
<script>
function loadLeftVideo() {
document.querySelector("#video > source").src = "left.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
function loadRightVideo() {
document.querySelector("#video > source").src = "right.mp4"
var video = document.getElementById('video');
video.load();
video.play();
}
</script>
</body>
</html>