QQ浏览器video标签不显示第一帧解决

因为在QQ和微信上打开网址链接都是用QQ浏览器打开的，但QQ浏览器做了很多限制还存在一些问题，导致一些功能不能正常使用，就像下面这个video标签一样显示不出来第一帧

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ly4FbIa5-1599532123748)(/img/bVbMzo6)]

一、尝试前端解决

视屏加载完成，获取第一帧作为poster海报

当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。

<video controls width="270" src="./images/movie.mp4"></video><script type="text/javascript">$('video').each(function() {this.addEventListener('canplaythrough', function() {setTimeout(function() {var canvas = document.createElement('canvas');canvas.width = this.videoWidth;canvas.height = this.videoHeight;canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height);this.setAttribute('poster', canvas.toDataURL("image/png"));// $('body').append(`<img src="${canvas.toDataURL("image/png")}" />`);}.bind(this), 1000);}.bind(this));});
</script>

可惜的是QQ浏览器对canvas的toDataURL方法支持不够好，直接输出data:,就没了

二、后端解决（推荐）

后端可以劫持到上传的视频，然后对视屏进行截取，不过这又要增加后端的工作量了，还好现在都使用了云存储（OSS），
以阿里云为示例，截取上传视屏

阿里云视频截帧API文档：https://help.aliyun.com/document_detail/64555.html?spm=a2c4g.11174283.6.1745.6f3e7da20srJTp

语法：

<原视频URL>?x-oss-process=video/snapshot,t_7000,f_jpg,w_800,h_600,m_fast

需要注意的是这里的截取宽高指定0就行了，自动计算视屏宽高为截取图片的宽高

欢迎关注：http://fenxianglu.cn/

QQ浏览器video标签不显示第一帧解决相关推荐

微信小程序：video标签默认显示视频的第一帧作为封面
微信小程序:video标签默认显示视频的第一帧作为封面 <video src="video_url"controls="{{false}}"initial ...
显示计算机窗口地址栏,电脑QQ浏览器中在地址栏显示最常访问功能怎么开启
电脑QQ浏览器中在地址栏显示最常访问功能怎么开启腾讯视频/爱奇艺/优酷/外卖充值4折起 QQ浏览器是我们现在经常在电脑上使用的浏览器软件之一,为了方便我们的访问我们可以开启浏览器中的在地址栏显示最 ...
微信内置浏览器video标签自动全屏播放以及层级过高问题
转载自:微信内置浏览器video标签自动全屏播放以及层级过高问题 - 程序员大本营今天事用html5的<video>标签做微信内置浏览器视频播放页面时,需要在视频层级上显示类似弹幕的对话 ...
QQ浏览器怎样在首页显示优先推荐的网站
QQ浏览器怎样在首页显示优先推荐的网站?QQ浏览器显示优先推荐的网站的方法 1,在手机桌面上找到QQ浏览器的图标,点击打开. QQ浏览器怎样在首页显示优先推荐的网站?QQ浏览器显示优先推荐的网站的方法 ...
在浏览器的标签页显示网站标志图标
一.在浏览器的标签页显示网站标志图标我们通常希望将浏览器里的Tab选项卡的图标换成自己网站的logo图片,这样看起来更真实和有信任感,可以在<head></head>中添加l ...
h5 video 手机显示第一帧_解决h5嵌入app后video标签poster不能显示视频第一帧（表现为空白）...
这里我们先来描述一下问题,页面中使用了video标签,按照video标签的官方介绍下图介绍: 没有设置poster的情况下在浏览器中我们可以看到视频的第一帧,页面效果如下图左图所示:但是嵌入App后, ...
QQ浏览器劫持html5的视频video标签的问题（怎么解决？）
无解,暂无解决办法,哪位朋友知道告之一下,感激 QQ浏览器真的不讲一点规则,强制劫持视频video标签,这已经很 XX 了吧?还在视频结束时加载他们自己的广告,这... 就无语了. 相信开发html5 ...
android的qq浏览器video播放视频结束后显示qq推荐视频
1.微信浏览器.qq内置浏览器比较笨的方法是监听播放结束后,重新开始播放,再暂停,这样会出现突然闪一下推荐小视频的画面. 2.QQ浏览器监听播放结束后,播放<audio>音频 < ...
微信浏览器video标签没有封面_微信h5页面video标签用法总结
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:在微信浏览器内播放时,视频会自动全屏如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置 ...

QQ浏览器video标签不显示第一帧解决

一、尝试前端解决

二、后端解决（推荐）

QQ浏览器video标签不显示第一帧解决相关推荐

最新文章

热门文章