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

Posted 2023-02-22

【中文标题】Safari 9 仅在画布上绘制视频的第一帧（错误）

【英文标题】：Safari 9 paints only the first frame of a video on canvas (bug)

【发布时间】：2016-05-05 18:21:59

【问题描述】：

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

.drawImage(video, 0, 0, width, height) 是我画的。

---

这个简单的 sn-p 在所有浏览器中都能正常工作，包括 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>

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

【问题讨论】：

无法在 Mavericks 上重现 safari 9.0.3。 Ps : 除了通过 drawImage()

之外，我不知道任何其他 前端 方法可以在画布上绘制视频

根据我的测试，它只发生在 El Capitan 上。 bfred，你也在使用 El Capitan 吗？

正确，我在 El Capitan，我更新了答案

我正在经历同样的事情。可以在 FF/Chrome 中使用，但不喜欢 Safari。我尝试在开始剪​​辑后引入延迟，但这并不能解决任何问题。你有没有找到解决这个问题的方法？

我的意思是让其他人在您创建的错误的 cmets 中添加他们的声音。

【参考方案1】：

使用 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 是动态创建的视频标签。