反向播放html5视频，在屏幕上加载

play html5 video in reverse, on screen load

本文关键字：屏幕 加载 视频 播放 html5      更新时间：2023-09-26

我正在开发一个功能，在屏幕加载时，视频应该开始反向播放。（从最后一帧到第一帧）。它实际上可以是在屏幕上加载，甚至是在点击按钮时。

此刻，我已经实现了直到（在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>

现在，我想知道是否有机会直接反向播放我的视频，即在没有任何正向持续时间的情况下，视频应该开始反向播放。

您需要等待视频加载，然后您可以用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>
相关文章：