Question

从我的http://127.0.0.1 http服务器运行很好，并且“不”指定源标签中的mimi类型在上传到vistapanel.net主机时工作一次。有关相关代码的快照。

<video id="vid" width="64" height="48" style="display:none">
      <source src="images/queryzoom.webmvp8.webm" />
      <source src="images/queryzoom.theora.ogv" />
</video>
<video id="vid2" width="64" height="48" style="display:none">
      <source src="images/save.webmvp8.webm" />
      <source src="images/save.theora.ogv" />
</video>
<canvas id="processCanvas" width="640" height="480" style="width:1px;height:1px" style="display:none">
</canvas>

...

function newFrame() {
    frame++;    
    if (frame > 1000) {
        frame = 0;
        svideo.currentTime = 0;
        jvideo.currentTime = 0;
    }

...

if (frame == 200) {
    jvideo.play();
}

...

if (frame > 200 && frame < 320) {
    process.drawImage(jvideo, 0,0,640,480);
    var TheImage = process.getImageData(0, 0, 640, 480);
    var jpgdata = TheImage.data;
    for (var i = 0, n = jpgdata.length; i < n; i += 4) {
    if (jpgdata[i] < 80 && jpgdata[i+1] < 80 && jpgdata[i+2] > 128) {
        jpgdata[i+3] = 0; 
    }
    }
    process.putImageData(TheImage, 0, 0);
    gold = document.getElementById('processCanvas');
    ctx.fillRect(width-400,0,400,200);
    fwidth=300;
    ctx.drawImage(gold, width-180-(fwidth/2),0,fwidth,200);
}

...

if (frame == 810) {
    svideo.play();

}

...

if (frame > 800 && frame <1000) {
    process.drawImage(svideo, 0,0,640,480);
    if (frame <840) {
        ctx.fillRect(width-400,0,(frame-800)*10,200);
        var TheImage = process.getImageData(0, 0, 640, 480);
        var jpgdata = TheImage.data;
        for (var i = 0, n = jpgdata.length; i < n; i += 4) {
        if (jpgdata[i] < 80 && jpgdata[i+1] < 80 && jpgdata[i+2] > 128) {
            jpgdata[i+3] = 0; 
        }
        }
        process.putImageData(TheImage, 0, 0);
        gold = document.getElementById('processCanvas');
        progress = (frame-800)/40;
        ctx.drawImage(gold, 0, 0, (640 * progress), 480, (width - 360), 0, (150 * progress), 100);                      
    } else {
        var TheImage = process.getImageData(0, 0, 640, 480);
        var jpgdata = TheImage.data;
        for (var i = 0, n = jpgdata.length; i < n; i += 4) {
        if (jpgdata[i] < 80 && jpgdata[i+1] < 80 && jpgdata[i+2] > 128) {
            jpgdata[i+3] = 0; 
        }
        }
        process.putImageData(TheImage, 0, 0);
        gold = document.getElementById('processCanvas');
        ctx.fillRect(width-400,0,400,200);
        fwidth=300;
        ctx.drawImage(gold, width-360,0,fwidth/2,100);
    }
}

...

}

...

var frame=0;

var jvideo = document.getElementById("vid");
var svideo = document.getElementById("vid2");


var canvas = document.getElementById('processCanvas');
var process = canvas.getContext('2d');

newFrame();

这是第一次出场但未能在第二次传球时出场。我正在考虑需要重新加载并且缺少主机上的支持以通过范围读取文件的问题。所以将改变视频标签中的src，而不是通过将currentTime设置为零来尝试重放 - 注意当currentTime未设置为视频播放时（）也不会在开始时启动它。

希望有人已经解决/解决过这个问题？

测试版为http://sdfreelance.vistapanel.net/beta.html

Answer 1

重新加载视频的教科书解决方案是使用

if (frame > 1000) {
    frame = 0;
    svideo.load();
    jvideo.load();
}

适用于Firefox但不适用于Chrome。应该注意的是，改变视频的当前时间应该有效，但是由于主机问题（为html5视频设置apache是一个完全不同的问题），视频继续处于播放模式，永远不会进入video.ended = true;因此没有范围信息，也没有范围值为零的例外。

Firefox似乎正在使用视频缓存而Chrome不是。

不是我想要的答案，但是 -

可以做的是使用php应用程序发送视频以构建正确的http标头，视频循环不需要视频重复重启。

Answer 2

在此主机上使用firefox 4.01。

html5视频无法在某些主机上播放

2 个答案: