Question

我已关注this tutorial（http://www.sciencelifeny.com/transparency/transparency.html），甚至浏览了网页的源代码。我甚至使用了页面上出现的相同视频文件。但是，由于一些奇怪的原因它对我不起作用......（它根本没有出现）我得到了这个错误：

getpreventdefault() is deprecated. use defaultprevented instead videoblock.xml

这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="./jquery/jquery-1.11.1.min.js"></script>
<script src="./scripts/load.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>
<body>

    <div id="loada">

        <div id="canvas_output"> 
        <video id="video" style="display:none" autoplay>
            <source src="./img/loading.mp4" type='video/mp4; codecs="avc1.42E01E"' />
        </video>
        <canvas width="200" height="400" id="buffer"></canvas>
        <canvas width="200" height="200" id="output"></canvas>
        </div>

    </div>

<script src="./scripts/load_anim.js"></script>
</body>
</html>

load_anim.js脚本包含用于将动画渲染到画布上的代码：

var outputCanvas = document.getElementById('output'),
output = outputCanvas.getContext('2d'),
bufferCanvas = document.getElementById('buffer'),
buffer = bufferCanvas.getContext('2d'),
video = document.getElementById('video'),
width = outputCanvas.width,
height = outputCanvas.height,interval;

function processFrame() {
    buffer.drawImage(video, 0, 0);

        // this can be done without alphaData, except in Firefox which doesn't like it when image is bigger than the canvas
    var image = buffer.getImageData(0, 0, width, height),
    imageData = image.data,
    alphaData = buffer.getImageData(0, height, width, height).data;

    for (var i = 3, len = imageData.length; i < len; i = i + 4) {
    imageData[i] = alphaData[i-1];
    }

    output.putImageData(image, 0, 0, 0, 0, width, height);
    }

load.js仅用于在加载页面时隐藏内容。但是我暂时重命名了div的id，这样就不会受到影响，但这里包含了它：

$(document).ready(function(){
    $('#load').delay(2000).fadeOut().hide(0);
});

我已经尝试了许多改变，希望能让它发挥作用，例如：

将DOCTYPE更改为<!DOCTYPE html>
使用教程页面上使用的Google的jquery 1.7.2。
将元数据更改为<meta charset=utf-8>
复制粘贴用于页面动画的确切代码（而不是在教程中）
使用与页面上使用的完全相同的尺寸和视频文件

请注意，当我删除style =“display：none”时，视频会出现并正常播放。

这非常令人沮丧，我第一次寻求帮助，所以如果我的信息不足，我很抱歉。如果需要进一步解释，请告诉我。

谢谢^^

具有透明度的HTML5动画

0 个答案: