Question

我有一个将在平板电脑设备上显示的html5 webapp。在这个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>

Answer 1

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

在html视频之间进行转换

1 个答案: