Question

是否有其他人在Lion上的Safari中使用带有画布的视频时遇到问题？

我的代码在Snow Leopard的Chrome 12和Safari 5.1中运行良好。我在Lion上的Safari 5.1（后来构建＃）和Lion上的Chrome 12上测试了相同的代码。在Chrome中运行良好，在Safari中不起作用。

以下是代码：

var video = document.getElementById("video");
var canvas1 = document.getElementById("c1");
var canvas2 = document.getElementById("c2");
var context1 = canvas1.getContext("2d");
var context2 = canvas2.getContext("2d");

context1.drawImage(video, 0, 0, canvas1.width, canvas1.height);
var frame = context1.getImageData(0, 0, canvas1.width, canvas1.height);
context2.putImageData(frame, 0, 0);

我在Safari中听到了音频，但看不到视频。在Chrome中，我看到视频并听到音频（同一文件）。

Answer 1

在执行引用视频元素的canvasContext.drawImage（）调用时，我遇到与Safari 5.1 / Lion（10.7.1）类似的问题。每晚也会在Webkit上发生。用图像元素调用drawImage（）似乎没有受到影响。

相比之下，在Chrome 14和Firefox 7中，我得到了一致的60FPS，而Safari 5.1真的很难超过10FPS，即便如此。音频似乎没有问题播放。

我在这里的两台独立机器上得到了类似的结果：分别是2010 MBP和iMac。狮子座上都有。

我们在Safari 5.0.3 / Snow Leopard 10.6.6上拥有的另一个2011 MBP没有出现问题，并以稳定的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>

我在Safari的开发库中找到的其他画布+视频示例似乎异常缓慢。 http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html

Answer 2

我正在开发的应用中看到类似的问题。

使用Robin Pyon的示例代码，我在Lion 10.7.3下的Safari中获得了大约7FPS。更糟糕的是，实际的画布图像每隔几秒就会更新一次。看来画布只是抓取视频中最近的关键帧。

但是，如果您从视频文件中删除扩展程序并相应地更新代码

video.src = 'video/sintel';

帧捕获以60FPS运行。我甚至有一部以60FPS运行的720p电影。奇异。

我很想解决这个问题。删除文件扩展名是一个好的解决办法，但有副作用，这是不可取的。特别是它会影响您在视频中快速搜索的能力。

Safari / Lion中HTML5画布上下文drawImage或getImageData的问题？

2 个答案: