在屏幕加载时倒放播放HTML5视频

Question

在屏幕加载时倒放播放HTML5视频

3

我正在处理一个功能，即在我的屏幕加载时，应该开始播放一个反向视频（从最后一帧到第一帧）。它可以在屏幕加载时或者在按钮单击时触发。

目前为止，在StackOverflow的帮助和支持下，我已经实现了播放我的视频，并在一段时间后以相反的方式播放。以下是我使用的代码-

<!DOCTYPE HTML>
<html>
<head>
<style>
video{
    height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {

var video = document.getElementById('video');
var intervalRewind;
$(video).on('play',function(){
    //video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$(video).on('pause',function(){
    video.playbackRate = 1.0;
    clearInterval(intervalRewind);
});
$("#speed").click(function() { // button function for 3x fast speed forward
    video.playbackRate = 8.0;
});
$("#negative").click(function() { // button function for rewind
   intervalRewind = setInterval(function(){
       video.playbackRate = 1.0;
       if(video.currentTime == 0){
           clearInterval(intervalRewind);
           video.pause();
       }
       else{
           video.currentTime += -.1;
       }
                },30);
});
});
</script>

</head>
<body>



<video id="video" controls>
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
    <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
        <button id="speed">Fast Forward</button>
        <button id="negative">Rewind</button>
</body>
</html>

现在，我想知道是否有机会直接倒放我的视频，即不向前播放任何持续时间，视频应该开始倒放。

- Lohith Korupolu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MrGoofus · Accepted Answer

在获取视频长度之前，您需要等待视频加载完成，然后可以使用video.duration来获取其长度，然后将视频当前时间设置为此值（跳转到视频结尾）；

接下来，您可以使用负数函数从最后一帧向前播放视频。

  video.addEventListener('loadeddata', function() {
     video.currentTime = video.duration;
     $('#negative').click();
  }, false);

以下是关于视频播放的有趣问题，网址为http://jsfiddle.net/UkMV2/5/，该问题来源于使用HTML5视频元素倒放视频。

以下示例是您的略微修改版本，可在页面和视频加载事件发生时实现“倒放”播放。

<!DOCTYPE HTML>
<html>
<head>
<style>
video{
    height: 200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>

  <video id="video" controls>
      <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
      <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.webm" type="video/webm">
      <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
  </video>
  <button id="speed">Fast Forward</button>
  <button id="negative">Rewind</button>


  <script>
  $(function() {

  var video = document.getElementById('video');
  var intervalRewind;


  $(video).on('play',function(){
      //video.playbackRate = 1.0;
      clearInterval(intervalRewind);
  });
  $(video).on('pause',function(){
      video.playbackRate = 1.0;
      clearInterval(intervalRewind);
  });
  $("#speed").click(function() { // button function for 3x fast speed forward
      video.playbackRate = 8.0;
  });
  $("#negative").click(function() { // button function for rewind
     intervalRewind = setInterval(function(){
         video.playbackRate = 1.0;
         if(video.currentTime == 0){
             clearInterval(intervalRewind);
             video.pause();
         }
         else{
             video.currentTime += -.1;
         }
                  },30);
  });

  video.addEventListener('loadeddata', function() {
     video.currentTime = video.duration;
     $('#negative').click();
  }, false);



  });
  </script>

</body>
</html>