Question

我正在制作自定义视频播放，以展示产品功能的CAD动画。我想有一个查看窗口，有三个按钮来显示不同的产品功能。视频动画显示产品的正面和中心，然后使用爆炸或缩放效果来显示功能。

棘手的部分是我希望视频播放所选的功能，即功能1.然后，当选择功能2时，我希望视频首先播放另一个视频（功能1倒带），显示产品返回其原始状态，然后继续播放下一个选定的功能视频（即功能2）。我认为下面的设置可能是正确的，但我正在努力从javascript开始。

总之，这是我想要的播放功能：

选择功能1按钮功能1视频播放

选择功能2按钮功能1回放视频播放功能2视频播放

选择功能3按钮功能2回放视频播放功能3视频播放

理想情况下，选择功能的顺序无关紧要，上述行为将相同（选定功能，视频播放，下一个选定功能，倒带视频播放，下一个功能视频播放等）< / p>

<!DOCTYPE html>
<html>
<body>

<!--Here is the setup of video assets-->
<div style="text-align:center">
  <button onclick="playFeature1()">Feature1</button>
  <button onclick="playFeature2()">Feature2</button>
  <button onclick="playFeature3()">Feature3</button>

  <br><br>
  <video id="feature1" width="420">
    <source src="feature1.mp4" type="video/mp4">
    <source src="feature1.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

 <video id="feature1Rewind" width="420">
    <source src="feature1Rewind.mp4" type="video/mp4">
    <source src="feature1Rewind.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

  <video id="feature2" width="420">
    <source src="feature2.mp4" type="video/mp4">
    <source src="feature2.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

 <video id="feature2Rewind" width="420">
    <source src="feature2-Rewind.mp4" type="video/mp4">
    <source src="feature2-Rewind.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

  <video id="feature3" width="420">
    <source src="feature3.mp4" type="video/mp4">
    <source src="feature3.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>

 <video id="feature3Rewind" width="420">
    <source src="feature3-Rewind.mp4" type="video/mp4">
    <source src="feature3-Rewind.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
 </video>

</div>

<script>
//here is where I don't know how to approach the playback functionality.

var myVideo = document.getElementById("feature1");

function playFeature1() {

}

</script>

</body>
</html>

自定义HTML 5视频播放

0 个答案: