Question

我做到了：

<body>      
  <div style="width:1170px; height:361px; border:1px solid #ccc; text-align:center;">
    <video id="video1" width="580" onclick="newDoc()" onmouseover="this.play()" onmouseout="this.pause()">          
      <source src="http://luxelumi.com/video/gio.mp4" type="video/mp4">          
      <source src="https://www.youtube.com/watch?v=NwICMK6VJoY" type="video/ogg">
      Your browser does not support HTML5 video. 
    </video>
  </iframe>      
  <video id="video2" width="580" onclick="newDoc2()" onmouseover="this.play()" onmouseout="this.pause()">        
    <source src="http://luxelumi.com/video/luxelumi.mp4" type="video/mp4">        
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video. 
  </video>      
</div>    
<script>
  var myVideo = document.getElementById("video1");

  function playPause() {
      if (myVideo.paused) myVideo.play();
      else myVideo.pause();
  }

  function newDoc() {
      window.location.assign("http://www.google.it")
  }
  var myVideo = document.getElementById("video2");

  function playPause() {
      if (myVideo.paused) myVideo.play();
      else myVideo.pause();
  }

  function newDoc2() {
      window.location.assign("http://luxelumi.com/luxelumi.html")
  }
</script>
</body>

效果很好。
但我希望2个函数newDoc()，newDoc2()在视频的同一div中打开2个URL，如框架，如何实现？

感谢

Answer 1

使用iframe元素加载一个页面，例如div。

Answer 2

我知道如何使用iframe。但是如何在这里使用它？

示例：有2个视频（videoA-videoB）和1个div（DivA）和2个页面必须在同一个容器中打开（pageA，PageB）

onclick VideoA打开pageA并留在divA
onclick VideoB打开pageB并留在divA

同一个div中的两个帧动作

2 个答案: