在视频HTML5中获取帧更改

Question

在视频HTML5中获取帧更改

Ale*_*iro 4 javascript html5 html5-video

我需要检测HTML 5中视频的所有帧更改,我尝试了以下代码,但我无法获得所有更改,只有我每秒可以获得8或9次更新..

<body>
    <canvas id="Canvas" width="800" height="450" style="position:absolute; left:5; top:5">Can't Load Canvas</canvas>
    <video id="videoPlay" muted controls>
        <source src="assets/soccer.webm" type="video/webm">
            <source src="assets/soccer.mp4" type="video/mp4">
            Your browser does not support the video tag.
    </video>
</body>
<script type="text/javascript">
            videoPlay.addEventListener('timeupdate', function (){
                putOverlay();
            });
            function putOverlay(){                  
                console.log(videoPlay.currentTime);
                console.log("another frame");
            }
    </script>
</html>

Run Code Online (Sandbox Code Playgroud)

我也尝试了以下代码,但是随着时间的推移,使用定时器会导致帧与定时器给出的值之间失去同步.

<body>
        <canvas id="LeCanvas" width="800" height="450" style="position:absolute; left:5; top:5">Can't Load Canvas</canvas>
        <!-- Video -->
        <video id="videoPlay"  controls>
            <source src="assets/soccer.webm" type="video/webm">
            <source src="assets/soccer.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </body>
    <!-- Play Video-->  
    <script>
        //Play Damn Video
        var videoPlay = $('#videoPlay')[0];
        videoPlay.play(1);
    </script>
    <!-- Canvas Animation  -->
    <script>
        //Animation
        function animate() {
            console.log("frame change");
        }       
        setInterval(animate, 1000/29.97); 
    </script>

Run Code Online (Sandbox Code Playgroud)

对我的问题有什么建议吗？

对不起我的英文

亚历克斯

Answer 1

bri*_*rls 17

如上面的评论所述,timeupdate每15-250毫秒只发射一次,实际上它似乎接近250毫秒.似乎timeupdate旨在提供足够的精确度来显示currentTime每一秒.所以你最好的选择是运行一个以你想要的速度运行的计时器,并currentTime在每次迭代时查询.

但是,您应该使用requestAnimationFrame,而不是使用setInterval甚至setTimeout使用.这将大约每16毫秒(60fps)运行,但它将与视频卡刷新率同步.如果使用,您可能会在某些设备上看到闪烁或屏幕撕裂,尤其是移动设备.它还允许浏览器在选项卡不可见时节省帧速率,以节省CPU周期(因此节省电池使用量).setTimeout

它也比setInterval因为,如果由于某种原因你的渲染代码花费的时间超过你所分配的30或16ms,setInterval可能会堆积呼叫并导致时间问题,但requestAnimationFrame会跳过帧以使你回到正轨.

假设您已经使用了上面的polyfill,代码看起来像这样:

var video = document.getElementById('videoPlay'),
    lastTime = -1;
function draw() {
    var time = video.currentTime;
    if (time !== lastTime) {
        console.log('time: ' + time);
        //todo: do your rendering here
        lastTime = time;
    }

    //wait approximately 16ms and run again
    requestAnimationFrame(draw);
}

draw();

Run Code Online (Sandbox Code Playgroud)

上面的代码检查时间,以确保您不会连续两次绘制相同的帧.你真的不需要它,但它会节省你几个CPU周期.但是当将视频绘制到画布时,该帧比currentTime报告的帧落后几毫秒.因此,如果您暂停视频然后跳过,您几乎肯定会落后一帧.通常情况下,如果currentTime在我上一次抽奖后没有改变,但是视频暂停了,我会继续画每个周期半秒钟左右.或者你可以花点时间退房.

归档时间：	12 年，11 月前
查看次数：	9829 次
最近记录：	9 年，6 月前