Safari 9仅绘制画布上视频的第一帧(bug)

Question

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

.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>

有没有解决方法？还有其他在画布上绘制视频的方法吗？

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