javascript - 从垂直滚动点开始视频，然后反向播放

Question

我正在尝试用 html5 视频实现一些目标，但在其他地方找不到答案。是否可以？非常感谢任何帮助。

这是 html:

<video autoplay="autoplay" poster="http://dummyimage.com/320x240/ffffff/fff">
    <source src="videos/ship.mp4" type="video/mp4" />
</video>

我想要: - 页面加载时，显示在第一帧暂停的视频(使用海报？) - 在垂直滚动 X 像素时，播放一次视频(或者，将其插入到 X 滚动的页面上？) - 然后，当我向后滚动超出 X 像素值时，再次反向播放视频一次(这是否有效 aMediaElement.playbackRate = -1; ？)

Answer 1

遗憾的是最简单的解决方案playbackRate = -1似乎还没有在任何地方实现。

你可以用下面的一些代码来伪造它来跳转 currentTime以您需要的任何速度返回，但从玩起来来看，它看起来不太顺利。

我的建议是 - 如果可行的话 - 如果目标是能够向后播放视频，则实际编码视频的反向版本，然后交换源或切换可见 <video>标签

哦，像往常一样...您计划在网络上流式传输的任何视频请确保进行优化并获得 moov原子位于正确的位置(参见 sample ffmpeg )

<script>
var intervalRewind = 0;
var v = document.getElementById("v")

function rewind() {
    intervalRewind = setInterval(
        function(){
            v.playbackRate = 1.0;
            if(v.currentTime == 0){
                clearInterval(intervalRewind);
                v.pause();
            } else {
                v.currentTime += -.1;
            }
        },30);
}            
</script>

...

<video id="v" onclick="clearInterval(intervalRewind)" width="320" height="240" controls="controls">
    <source type="video/mp4" src="video-fs.mp4" />
</video>

<button onclick="rewind()">Rewind</button>