视频封面图片空白?检查代码,快速解决!
\u003cscript\u003e\n // 获取video元素\n var video \u003d document.getElementById('myVideo');\n \n // 当视频加载完成后,获取第一帧作为封面\n video.addEventListener('loadeddata', function() {\n // 创建一个canvas元素\n var canvas \u003d document.createElement('canvas');\n // 设置canvas的宽高与视频相同\n canvas.width \u003d video.videoWidth;\n canvas.height \u003d video.videoHeight;\n // 将视频的当前帧绘制到canvas上\n canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);\n // 将canvas转换为图片URL并设置为video元素的封面\n video.poster \u003d canvas.toDataURL();\n });\n\u003c/script\u003e代码看起来没有明显错误。但是,请确保在运行这段代码之前,页面上有一个id为"myVideo"的video元素。如果video元素的id不是"myVideo",请将代码中的"myVideo"修改为正确的id。另外,视频加载完成后,将封面设置为canvas转换的图片URL是正确的做法。如果封面仍然是空白,请确保视频已经正确加载并且有有效的第一帧。
原文地址: https://www.cveoy.top/t/topic/pZv6 著作权归作者所有。请勿转载和采集!