Question

我在其中一个幻灯片中使用了一个带有canvas标签的DevExpress组件（ASPxImageSlider），如下所示：

var video = $("#video")[0];               // video element itself is at index 0 
var vw;
var vh;

var canvas = $('#canvas')[0];             // canvas element itself is at index 0
var context = canvas.getContext("2d");    // getContext on canvas element itself

// setup canvas when metadata is available
video.addEventListener("loadedmetadata", function () {
    vw = this.videoWidth || this.width;   // these are on video element itself
    vh = this.videoHeight || this.height;
    canvas.width = vw
    canvas.height = vh;
}, false);

// call it straight, use global (or parent) variables
video.addEventListener("play", draw, false);

function draw() {
    if (video.paused || video.ended) {
        return;
    }

    context.drawImage(video, 0, 0);

    requestAnimationFrame(draw);  // loop anim. using rAF
}

  <canvas id="canvas" style="border: 2px solid blue; width: 100%; height:100%;">
        <video id="video" autoplay="autoplay" loop="loop" class="video" preload="metadata" poster="">
            <source src="images/video.mp4" type="video/mp4" />
        </video>
    </canvas>

现在，canvas标签自己按预期显示视频，但是一旦我将它放入滑块，就会出现以下错误：“JavaScript运行时错误：无法获取未定义或空引用的属性'getContext'”。我向他们的支持团队报告了这一点，他们说由于canvas位于几个命名容器中，因此它具有复杂的ID。他们建议的解决方案是指定画布'ClientIDMode属性，并通过标准JavaScript getElementById（）方法获取当前控件。有没有人知道我将如何做到这一点（看到它不是他们的组件是问题）？任何建议都会很棒。

如何指定画布'ClientIDMode属性？

0 个答案: