Question

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

如果在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将会触发。添加警报只允许在尝试使用视频之前加载视频。如果没有警报，您的代码会在视频加载之前运行。媒体事件列表

仅在添加警报时才能从视频中获取图像并添加到画布

1 个答案: