blocks|key|2982825|text|即使没有进入HTML5或Javascript，许多视频格式都是被设计为向前播放的streaming格式。向后播放需要解码整个流，将每个原始帧存储在磁盘上以避免占用内存，然后向后渲染帧。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2982826|不过，至少有一个人在使用mplayer，所以至少在原则上是可以做到的。|style|CODE|2982827|entityMap|0|LINK|mutability|MUTABLE|url|http://en.wikipedia.org/wiki/Streaming_media^0|14|9|0|0|C|7|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|W|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>Without even going into HTML5 or Javascript, many video formats are <a href="http://en.wikipedia.org/wiki/Streaming_media" rel="noreferrer">streaming</a> formats that are designed to be played forward. Playing it backwards would require decoding the whole stream, storing each raw frame on the disk to avoid clobbering memory, then rendering the frames backwards.</p>

<p>At least one person <a href="http://madcompscientist.blogspot.com/2009/03/sdrawkcab-oediv-gniyalp.html" rel="noreferrer">actually tried that</a> using <code>mplayer</code>, though, so it <em>can</em> be done, at least in principle.</p>


blocks|key|2982835|text|我设法用update方法做到了这一点。每一帧我都将video.currentTime减少到经过的时间，到目前为止，这是我设法得到的最好的结果。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2982836|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I managed to do it in an update method. Every frame I decrease video.currentTime to the time elapsed and so far it is the best result I managed to get.</p>


blocks|key|3196227|text|aMediaElement.playbackRate+=+-1;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3196228|UA可能不支持这一点，尽管将playbackRate设置为负值是有效的。|unstyled|offset|length|style|CODE|3196229|entityMap^0|0|E|C|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@$G|O|H|P|I|J]]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>aMediaElement.playbackRate = -1;
</code></pre>

<p>UAs may not support this, though it is valid to set <code>playbackRate</code> to a negative value.</p>


blocks|key|3196236|text|这段代码只是展示了如何完成，但复制每一帧需要一些时间。这在很大程度上取决于硬件。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3196237|它为它必须播放的每一帧生成一个画布。当它开到100%25时，播放直接开始，向后播放，向前播放...诸若此类。原始视频也会在生成后附加，但由于iframe规则，不会自动播放。|3196238|它可以用于短视频，也可以作为概念的证明。|3196239|更新：我更改了捕获部分的顺序，以便跳过最大持续时间的帧，但捕获0的帧(之前忘记了它)。|offset|length|style|BOLD|3196240|最大持续时间的帧在我尝试的每个视频上都显示为白色画布。|3196241|我还更改了回放，在到达最后一帧时以相反的顺序播放，以进行无休止的回放。因此，您很容易看到，与硬件加速的视频相比，这种回放有点占用CPU。|3196242|​|3196243|fetch('https://i.imgur.com/BPQF5yy.mp4')
++.then(res+=>+res.blob())
++.then(blob+=>+{
++++return+new+Promise((res)+=>+{
++++++const+fr+=+new+FileReader();
++++++fr.onload+=+e+=>+res(fr.result);
++++++fr.readAsDataURL(blob);
++++})
++}).then(async(base64str)+=>+{
++++const+video+=+document.createElement("video");
++++video.src+=+base64str;
++++video.controls+=+true;
++++video.className+=+"w-50";

++++while+(isNaN(video.duration))
++++++await+new+Promise((r)+=>+setTimeout(r,+50));

++++const+FPS+=+25;


++++const+status+=+document.createElement("div"),
++++++length+=+document.createElement("div");
++++length.innerText+=+`Generating+${Math.ceil(video.duration+/+(1+/+FPS))}+frames+for+a+${FPS}+FPS+playback+(Video+Duration+=+${video.duration})`;
++++document.body.appendChild(length);
++++document.body.appendChild(status);

++++const+frames+=+[],
++++++copy+=+()+=>+{
++++++++const+c+=+document.createElement("canvas");
++++++++Object.assign(c,+{
++++++++++width:+video.videoWidth,
++++++++++height:+video.videoHeight,
++++++++++className:+"w-50"
++++++++});
++++++++c.getContext("2d").drawImage(video,+0,+0);
++++++++return+c;
++++++};

++++//+first+seek+outside+of+the+loop+this+image+won't+be+copied
++++video.currentTime+=+video.duration;+
++++//+this+frame+seems+to+be+always+white/transparent
++++
++++while+(video.currentTime)+{
++++++if+(video.currentTime+-+1+/+FPS+<+0)
++++++++video.currentTime+=+0;
++++++else
++++++++video.currentTime+=+video.currentTime+-+1+/+FPS;
++++++await+new+Promise((next)+=>+{
++++++++video.addEventListener('seeked',+()+=>+{
++++++++++frames.push(copy());
++++++++++status.innerText+=+(frames.length+/+(Math.ceil(video.duration+/+(1+/+FPS)))+*+100).toFixed(2)+%2B+'%25';
++++++++++next();
++++++++},+{
++++++++++once:+true
++++++++});
++++++});++++++
++++}


++++/*
+++++*+frames+now+contains+all+canvas+elements+created,
+++++*+I+just+append+the+first+image+and+replace+it+on
+++++*+every+tick+with+the+next+frame.
+++++*+using+last.replaceWith(frames[currentPos])+guarantees+a+smooth+playback.
+++++*/

++++let+i+=+0,+last+=+frames[0];

++++document.body.insertAdjacentHTML('beforeend',+`<div+class="w-50">Captured</div><div+class="w-50">Video</div>`);

++++document.body.appendChild(frames[0]);

++++const+interval+=+setInterval(()+=>+{
++++++if+(frames[%2B%2Bi])+{
++++++++last.replaceWith(frames[i]);
++++++++last+=+frames[i];
++++++}+else+{
++++++++frames.reverse();
++++++++i=0;
++++++}
++++},+1000+/+FPS);

++++document.body.appendChild(video);
++++//+won't+:(
++++video.play();
++});|code-block|syntax|javascript|3196244|/*+Just+for+this+example+*/
.w-50+{
++width:+50%25;
++display:+inline-block;
}

*+{
++margin:+0;
++padding:+0;
++font-family:+Sans-Serif;
++font-size:+12px;
}|3196245|3196246|entityMap^0|0|0|0|0|3|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|14|8|@$H|15|I|16|J|K]]|9|@]|A|$]]|$1|L|3|M|5|6|7|17|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|18|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|19|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1A|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|T|7|1B|8|@]|9|@]|A|$U|V]]|$1|Y|3|Q|5|6|7|1C|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|10|$]]

<p>This snippet just shows, how it could be done, but it takes some time to copy each frame. Which highly depends on the hardware.</p>
<p>It generates a canvas of each frame it has to play. When it's on 100% the playback starts directly and plays backward, forward... and so on. The original Video is also attached after the generation, but won't play automatically due to iframe rules.</p>
<p>It is fine for short videos and as a proof of concept.</p>
<p><strong>Update:</strong>
I changed the order of the capture part so that the frame at max duration is skipped but the one at 0 is captured (forgot it before).</p>
<p>The frame at max duration caused a white canvas on every video i tried.</p>
<p>I also changed the playback to play it in reverse order as soon as the last frame is reached for an endless playback. So you easily see, that this playback is a bit CPU intensive compared to hardware accelerated videos.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>fetch('https://i.imgur.com/BPQF5yy.mp4')
  .then(res =&gt; res.blob())
  .then(blob =&gt; {
    return new Promise((res) =&gt; {
      const fr = new FileReader();
      fr.onload = e =&gt; res(fr.result);
      fr.readAsDataURL(blob);
    })
  }).then(async(base64str) =&gt; {
    const video = document.createElement("video");
    video.src = base64str;
    video.controls = true;
    video.className = "w-50";

    while (isNaN(video.duration))
      await new Promise((r) =&gt; setTimeout(r, 50));

    const FPS = 25;


    const status = document.createElement("div"),
      length = document.createElement("div");
    length.innerText = `Generating ${Math.ceil(video.duration / (1 / FPS))} frames for a ${FPS} FPS playback (Video Duration = ${video.duration})`;
    document.body.appendChild(length);
    document.body.appendChild(status);

    const frames = [],
      copy = () =&gt; {
        const c = document.createElement("canvas");
        Object.assign(c, {
          width: video.videoWidth,
          height: video.videoHeight,
          className: "w-50"
        });
        c.getContext("2d").drawImage(video, 0, 0);
        return c;
      };

    // first seek outside of the loop this image won't be copied
    video.currentTime = video.duration; 
    // this frame seems to be always white/transparent
    
    while (video.currentTime) {
      if (video.currentTime - 1 / FPS &lt; 0)
        video.currentTime = 0;
      else
        video.currentTime = video.currentTime - 1 / FPS;
      await new Promise((next) =&gt; {
        video.addEventListener('seeked', () =&gt; {
          frames.push(copy());
          status.innerText = (frames.length / (Math.ceil(video.duration / (1 / FPS))) * 100).toFixed(2) + '%';
          next();
        }, {
          once: true
        });
      });      
    }


    /*
     * frames now contains all canvas elements created,
     * I just append the first image and replace it on
     * every tick with the next frame.
     * using last.replaceWith(frames[currentPos]) guarantees a smooth playback.
     */

    let i = 0, last = frames[0];

    document.body.insertAdjacentHTML('beforeend', `&lt;div class="w-50"&gt;Captured&lt;/div&gt;&lt;div class="w-50"&gt;Video&lt;/div&gt;`);

    document.body.appendChild(frames[0]);

    const interval = setInterval(() =&gt; {
      if (frames[++i]) {
        last.replaceWith(frames[i]);
        last = frames[i];
      } else {
        frames.reverse();
        i=0;
      }
    }, 1000 / FPS);

    document.body.appendChild(video);
    // won't :(
    video.play();
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/* Just for this example */
.w-50 {
  width: 50%;
  display: inline-block;
}

* {
  margin: 0;
  padding: 0;
  font-family: Sans-Serif;
  font-size: 12px;
}</code></pre>
</div>
</div>
</p>


blocks|key|3196233|text|获取HTMLMediaElement的持续时间，然后通过设置.currentTime设置每秒运行并播放媒体的时间间隔，并将值每秒减1。媒体元素必须完全下载才能工作。我只在30秒的剪辑上测试过，不确定是否更快(小于1秒)。间隔是可能的。请注意，此方法仍然向前播放媒体。尝试提高媒体播放速率，使其感觉更流畅。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3196234|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Get the HTMLMediaElement's duration then set an Interval that would run every second and playing the media by setting the .currentTime and decrease the value every second by 1. The media element must be fully downloaded for this to work. I've only tested this on 30-second clips and unsure if faster (lesser than 1sec.) intervals are possible. Note that this method still plays the media forward. Try increasing media playback rate to make it feel more seamless.</p>


<p>Can HTML5 <code>&lt;video&gt;</code> tag be played in reverse, or do I have to download 2 videos (<em>forward and backward play</em>)?</p>
<p>I'm looking for a solution that avoids a user from downloading 2 videos.</p>


Is it possible to play HTML5 video in reverse?

HTML5

HTML5 <video> tag可以反向播放吗?还是需要下载2个视频(正反向播放)？我正在寻找一个解决方案，避免用户下载2个视频。

问可以反向播放HTML5视频吗？
EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以反向播放HTML5视频吗？EN

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以反向播放HTML5视频吗？
EN