谷歌浏览器无法显示上传视频的预览图

本文探讨了在不同浏览器上使用canvas绘制视频预览图的问题,尤其是在谷歌浏览器上的失败案例。作者通过调整视频播放时机,成功解决了绘制第一帧的问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

要实现的功能

一个和上传图片极其相似的功能,只不过换成了上传视频,选择完文件后也要有预览图。

问题

本来以为没什么问题的,因为网上有许多关于视频预览图的文章,核心就是使用canvasdrawImage功能来绘制视频,这样默认就是绘制第一帧。
但我总是绘制失败,经过不断的测试,我发现视频根本就绘制不到canvas上,官方文档说可以绘制。后来我换了浏览器,发现360浏览器和QQ浏览器都可以,我又试了一下手机,发现安卓微信浏览器失败,这样我就不知道怎么解决了,js怕是没什么能改的了,网上也没搜到有人出现这个问题。

总结

最后,由于谷歌浏览器不行,我们放弃了给视频预览图,决定使用通用的占位图代替。

补充

经过又一番的折腾,我发现问题可能是绘制的时候视频并没有播放,因为drawImage绘制的是第一帧,如果还没播放,那怎么会有第一帧呢?反正我感觉是这个原因。因为我把绘制放在了视频播放后进行(即监听play事件),这下就一点问题都没有了。
如果想要解决这个问题,可能需要在页面中添加一个隐藏的video标签,并且想办法让视频自动播放后再绘制预览图。具体实现等我有空后再折腾一下。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值