1
私はタブレット端末に表示されるhtml5 webappを持っています。このwebappには、再生中のビデオがあります。ユーザは、ビデオ内の異なる領域を選択して、異なるビデオを再生することができる。これは、ビデオを切り替えるためにjsを呼び出すエリアタグで、不可視の画像を重ね合わせることによって行われます。私は、これらのビデオをすばやく読み込んで、おそらくもっとプロフェッショナルに見せるために、ある種のビデオトランジションオーバータップを追加する方法があるかどうか疑問に思っています。ここに私の現在のアプリです：html動画間の移行
<!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>