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>

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

1 个答案: