I have a html5 webapp that is going to be displayed on tablet devices. In this webapp there is a video that is playing. The users are able to select different areas in the video to play a different video. This is done by overlaying an invisible image with area tags that call up js to switch the video. What I am wondering is if there is a way to load these videos quicker and possibly add some sort of video transition overtop to make it look more professional. Here is my current app:
<!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>
