在视频HTML5中获取帧更改 [英] Get frame change in video HTML5
问题描述
我需要检测HTML 5中视频的所有帧更改，我尝试了下面的代码，但我无法获得所有更改，只有每秒可以获得8或9次更新。
< body>
< canvas id =Canvaswidth =800height =450style =position：absolute; left：5; top：5> Can Can Load Canvas< / canvas>
< video id =videoPlaymuted controls>
< source src =assets / soccer.webmtype =video / webm>
< source src =assets / soccer.mp4type =video / mp4>
您的浏览器不支持视频标记。
< / video>
< / body>
< script type =text / javascript>
videoPlay.addEventListener（'timeupdate'，function（）{
putOverlay（）;
}）;
函数putOverlay（）{
console.log（videoPlay.currentTime）;
console.log（另一帧）;
}
< / script>
< / html>
我也尝试了下面的代码，但是使用定时器时，帧和由定时器给定的值，随着时间的推移..
< body>
< canvas id =LeCanvaswidth =800height =450style =position：absolute; left：5; top：5>无法加载画布< / canvas>
<！ - 视频 - >
< video id =videoPlaycontrols>
< source src =assets / soccer.webmtype =video / webm>
< source src =assets / soccer.mp4type =video / mp4>
您的浏览器不支持视频标记。
< / video>
< / body>
<！ - 播放视频 - >
< script>
//播放该死的视频
var videoPlay = $（'＃videoPlay'）[0];
videoPlay.play（1）;
< / script>
<！ - Canvas Animation - >
< script>
//动画
函数animate（）{
console.log（frame change）;
}
setInterval（animate，1000 / 29.97）;
< / script>
对我的问题有任何建议吗？
对不起，我的英语
关注
Alex
在上面的评论中指出， timeupdate 每15-250毫秒只触发一次，实际上它似乎接近250毫秒。看起来好像 timeupdate 旨在提供足够的准确度来每秒显示 currentTime 。所以你最好的选择是运行一个按你想要的速度运行的计时器，并且在每次迭代时都要查询 currentTime 。
而不是使用 setInterval 甚至 setTimeout ，您应该使用 requestAnimationFrame 。这将每16ms（60fps）大约运行，但它将与视频卡刷新率同步。如果您使用 setTimeout ，您可能会在某些设备上看到闪烁或屏幕撕裂，尤其是移动设备。它还允许浏览器在标签不可见时节省帧频以节省CPU周期（并因此节省电池使用量）。
它也比<$ c更好$ c> setInterval 因为，如果由于某种原因你的渲染代码花费的时间超过你所分配的30或16ms， setInterval 可能会堆积电话并导致计时问题，但 requestAnimationFrame 会跳过帧让你回到正轨。
假设你已经使用过如上所示，代码将如下所示：
var video = document.getElementById（'videoPlay'），
lastTime = -1;
function draw（）{
var time = video.currentTime;
if（time！== lastTime）{
console.log（'time：'+ time）;
// todo：在这里做渲染
lastTime = time;
}
//等待约16ms并再次运行
requestAnimationFrame（draw）;
}
draw（）;
上面的代码有时间检查，以确保您不会在同一帧中绘制两次一排。你并不需要它，但它会为你节省几个CPU周期。但是当画一个视频到画布时，这个框架比currentTime报道的要迟几毫秒。所以如果你暂停视频然后跳过，你几乎肯定会落后一帧。通常，如果当前时间自我上次抽签后没有改变，但视频暂停，我会继续绘制每个周期半秒左右。或者你可以花时间检查一下。
I need detect all frames changes of a video in HTML 5, i tried the follow code, but i can't get all changes, only i can get eight or nine updates per second..
<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>
I tried the following code too, but with a timer there is a loss of synchronization between the frame and the value given by the timer, over time..
<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>
Any suggestions for my problem?
Sorry my english
regards Alex
As noted in the comments above, timeupdate only fires every 15-250ms, and in practice it appears to be closer to 250ms. It seems as though timeupdate was designed to provide enough accuracy to display the currentTime every second. So your best option is to run a timer that runs at the rate you want and query currentTime on every iteration.
But rather than use setInterval or even setTimeout, you should be using requestAnimationFrame. This will run approximately every 16ms (60fps), but it will be synchronized with the video card refresh rate. If you use setTimeout, you may see flicker or screen tearing on certain devices, especially mobile ones. It also allows the browser to throttle your frame rate when the tab is not visible to save on CPU cycles (and therefore battery usage).
It's also better than setInterval because, if for some reason your render code takes longer than the 30 or 16ms you've allotted, setInterval may pile up calls and cause timing problems, but requestAnimationFrame will skip frames to get you back on track.
Assuming you've used the polyfill as above, the code would look something like this:
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();
The above code has a check on time to make sure you don't draw the same frame twice in a row. You don't really need that, but it will save you a few CPU cycles. But when drawing a video to canvas, the frame is a couple of milliseconds behind what's reported by currentTime. So if you pause the video and then skip around, you will almost definitely be one frame behind. Usually, if the currentTime hasn't changed since my last draw but the video is paused, I'll keep drawing every cycle for another half second or so. Or you could just take the time check out.
这篇关于在视频HTML5中获取帧更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
