移动端视频上传预览图实现

Question

做一个webapp，用的input type=file选择视频，然后在页面上预览，再上传，在网上有搜到

   var objectURL = URL.createObjectURL(this.files[0]);
    $('.previewVideo').html('<video src="' +
                objectURL +
                '" controls></video>');
    setTimeout(function () {
         var scale = 0.25,
                video = $('video')[0],
                canvas = document.createElement("canvas"),
                canvasFill = canvas.getContext('2d');
            canvas.width = video.videoWidth * scale;
            canvas.height = video.videoHeight * scale;
            canvasFill.drawImage(video, 0, 0, canvas.width, canvas.height);
            var src = canvas.toDataURL("image/jpeg");
            $('.previewImg').html('<img id="imgSmallView" src="' + src + '" alt="预览图" />');
    }, 500);
  
  亲测在pc仿移动端调试是可以实现视频缩略图的
  

但是在手机上就不可以，

有什么解决办法嘛，有在网上看到说是用html2canvas获取截图，不知道可行性怎么样？

Answer 1

我猜是 移动端 视频还没加载完，所以你截不到
监听 video 开始播放的事件，然后再处理截图

video.addEventListener('playing', function(){ /* ... */ });

Answer 2

您好，你这个最后解决了吗？