在 html 视频之间转换答案

【问题标题】：Transistioning between html videos在 html 视频之间转换
【发布时间】：2016-08-05 20:37:08
【问题描述】：

我有一个要在平板设备上显示的 html5 网络应用程序。在这个 webapp 中有一个正在播放的视频。用户可以选择视频中的不同区域来播放不同的视频。这是通过使用区域标签覆盖一个不可见的图像来完成的，该标签调用 js 来切换视频。我想知道是否有一种方法可以更快地加载这些视频，并可能在顶部添加某种视频过渡以使其看起来更专业。这是我当前的应用程序：

<!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>

【问题讨论】：

标签： javascript html video

【解决方案1】：

您也可以尝试this solution。基于谷歌Media Source API。

【讨论】：