javascript - 仅当添加警报时，从视频获取图像并添加到 Canvas 才有效

Question

我正在尝试为每个视频将图像设置到 Canvas 上。我循环遍历 FileID 数组，然后尝试从相应的视频中获取图像并将其添加到 Canvas 上。

如果在 drawImage 函数之前添加警报，则以下代码有效。

循环:

   jQuery.each(arUniqueVideos, function (index, value) {
            SetThumbnail(value);
        });

功能:

   function SetThumbnail(value) {
            var canvas = jQuery("#img" + value);      
            var video = jQuery("#vid" + value);
            var img = new Image();
            img = video[0];
            var canv = canvas[0];
            //alert('test'); //works only if this alert is added
                canv.getContext("2d").drawImage(img, 0, 0, 100, 100);
        }

我尝试像这样绘制图像，但仍然不起作用:

  img.onload = function() {
                canv.getContext("2d").drawImage(img, 0, 0, 100, 100);
            }

Answer 1

您需要监听加载事件。当视频可以播放时，oncanplay 将触发。添加警报只是允许视频在您尝试使用之前加载。如果没有警报，您的代码将在视频加载之前运行。

A list of media events