У меня возникают похожие проблемы с Safari 5.1 / Lion (10.7.1), когда я выполняю вызов canvasContext.drawImage (), ссылающийся на элементы видео. Также случается на Webkit по ночам. Вызов drawImage () с элементами изображения, похоже, не затронут.
Для сравнения, как в Chrome 14, так и в Firefox 7 я получаю стабильные 60FPS, в то время как Safari 5.1 действительно пытается преодолеть 10FPS, если даже это. Звук воспроизводится без проблем.
Здесь я получаю похожие результаты на двух разных машинах: 2010 MBP и iMac соответственно. Оба на льве.
Еще один MBP 2011 года, который у нас есть, на Safari 5.0.3 / Snow Leopard 10.6.6, не демонстрирует проблемы и воспроизводит видео со скоростью 60FPS.
http://dl.dropbox.com/u/15924676/sketch_67/index.html
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background: #000;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="js/libs/jquery-1.6.4.min.js"></script>
<script src="js/mylibs/Stats.js"></script>
<script>
var canvas, canvasContext, stats, video;
$(document).ready(function() {
// create stats
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
document.body.appendChild(stats.domElement);
// create canvas
canvas = document.createElement( 'canvas' );
canvas.width = 480;
canvas.height = 204;
canvasContext = canvas.getContext('2d');
document.body.appendChild(canvas);
// create video
var video = document.createElement( 'video' );
video.autoplay = true;
video.src = 'video/sintel.mp4';
setInterval( function () {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
// draw video image to canvas context
canvasContext.drawImage( video, 0, 0, 480, 204 );
}
// update stats display
stats.update();
}, 1000 / 60 );
});
</script>
</body>
</html>
Другие примеры canvas + видео, которые я нашел в библиотеке разработчиков Safari, также выглядят необычно медленно. http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html