Safari 9 only draws the first frame of a video on canvas (error)

Question

I try to draw the current <video> frame on the canvas, but Safari 9.0.3 on 10.11 only draws the first frame ... sometimes! It only works after the video is cached, because a hard update causes it to not work again.

.drawImage(video, 0, 0, width, height) as I draw it.

---

This simple snippet works correctly in all browsers, including Safari 9 Yosemite, but not in 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> 

Is there a workaround? Any other way to draw video on canvas?

Answer 1

Using blob cache seems to work even on Safari

Example (in 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 is a dynamically created video tag.