Javascript 具有透明度的HTML5动画_Javascript_Html_Html5 Video_Transparency_Mp4

Javascript 具有透明度的HTML5动画

javascript html

Javascript 具有透明度的HTML5动画,javascript,html,html5-video,transparency,mp4,Javascript,Html,Html5 Video,Transparency,Mp4,我遵循了（）的方法，甚至浏览了页面的源代码。我甚至使用了页面上显示的相同视频文件。但是，出于某种奇怪的原因，它对我不起作用。。。（它根本没有出现）我得到了这个错误： getpreventdefault() is deprecated. use defaultprevented instead videoblock.xml 这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

我遵循了（）的方法，甚至浏览了页面的源代码。我甚至使用了页面上显示的相同视频文件。但是，出于某种奇怪的原因，它对我不起作用。。。（它根本没有出现）我得到了这个错误：

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>

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

将DOCTYPE更改为just
使用教程页面上使用的谷歌jquery 1.7.2
将元更改为仅
复制粘贴用于页面动画的精确代码（而不是在教程中）
使用与页面上使用的完全相同的尺寸和视频文件

请注意，当我删除style=“display:none”时，视频确实会正常显示和播放

这是我第一次请求帮助，非常令人沮丧，如果我的信息不足，我很抱歉。如果需要进一步解释，请让我知道

谢谢^ ^

您可以检查浏览器的开发人员控制台中的javascript错误吗？在浏览器中按F12键访问它们。语法错误：函数语句需要名称load\u anim.js:1 getPreventDefault（）の使用は推奨されません。代わりに防止违约を使用してください。 videoblock.xml:92“不建议使用getPreventDefault（）。相反，请使用defaultPrevented”是我最好的翻译。我为我的困惑道歉。另外，感谢您指出F12的功能。我完全忘记了这一点。为了避免“函数语句需要名称”错误，我尝试删除函数（）{}。但是在这种情况下，我得到了错误“TypeError:outputCanvas为null”

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);
    }

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