Safari 9 只在画布上绘制视频的第一帧(错误）

Safari 9 paints only the first frame of a video on canvas (bug)

本文关键字：错误 一帧 视频 绘制 Safari      更新时间：2023-09-26

我正在尝试在画布上绘制<video>的当前帧，但 9.0.3 上的 10.11 Safari 只绘制第一帧......有时！它似乎仅在缓存视频后才能工作，因为硬刷新会导致它无法再次工作。

.drawImage(video, 0, 0, width, height)这就是我画它的方式。

这个简单的代码片段在所有浏览器中都能正常工作，包括Safari 9 Yosemite，但在Safari 9 El Capitan中则不然

。

var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
canvas.addEventListener('click', function () {
  canvas
  .getContext('2d')
  .drawImage(video, 0, 0, canvas.width, canvas.height);
});
<p>Play the video and then click on the canvas to paint</p>
<canvas width='240' height='135' style="border: solid;"></canvas>
<video width='240' height='135' controls loop src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"></video>

有什么解决方法吗？还有其他方法可以在画布上绘制视频吗？

使用 blob 缓存似乎即使在 Safari 上也能工作

示例（在 CoffeeScript 中）：

prepareLocalCache: ->
    @vidtemp = document.createElement('video')
    @vidtemp.preload = 'auto'
    @xhr = new window.XMLHttpRequest
    @xhr.open 'GET', 'video link here.mp4', true
    @xhr.responseType = 'blob'
    @xhr.onload = (e) =>
      if e.currentTarget.status == 200
        myBlob = e.currentTarget.response
        @vidcache = window.URL.createObjectURL(myBlob)
        @vidtemp.src = @vidcache
    @xhr.send()
...
...
context = canvas.getContext '2d'
context.drawImage @vidtemp, 0, 0, canvas.width, canvas.height

@vidtemp是动态创建的视频标签。

相关文章：