Question

我正在尝试在画布上绘制{strong>当前帧 <{1}}，但 10月11日的Safari 9.0.3仅绘制第一帧 ...有时候！它似乎仅在视频缓存后才起作用，因为硬刷新导致它无法再次工作。

<video>就是我画画的方式。

这个简单的代码段可以在所有浏览器中正常运行，包括Safari 9 Yosemite，但不适用于Safari 9 El Capitan

.drawImage(video, 0, 0, width, height)

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);
});

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

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

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

1 个答案: