公众号内ios上传视频,触发不了loadedmetadata事件,导致duration时长获取不到

一、现象描述

ios系统通过在浏览器或者H5页面打开上传视频都可以正常触发loadedmetadata事件,但是嵌入公众号里面,事件获取不到导致时长无法监听,从而无法限制上传视频大小,如上传时长大的视频导致速度极慢,影响用户体验。

二、 解决方案

由于ios对audio和video的一系列限制,包括提前load和自动播放等,所以只有当audio的play触发事件,才可以监听到duration,所以我们需要默认触发play事件,播放音频,但是注意的需要及时暂停
在这里插入图片描述
这时候我们再去通过loadedmetadata事件获取时长,我这边是限制15秒的视频,大家可以根据自己业务场景自己限制
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
是的,移动端的一些浏览器可能不支持视频loadedmetadata事件。在这种情况下,您可以使用视频的timeupdate事件获取第一帧图片。 1. 给video元素添加一个id属性,例如: ```html <video id="my-video" width="320" height="240"> <source src="video.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ``` 2. 在JavaScript获取video元素并监听它的timeupdate事件。在这个事件的回调函数中,您可以获取视频的第一帧图片,并将其设置为视频的封面。例如: ```javascript var video = document.getElementById('my-video'); video.addEventListener('timeupdate', function() { if (this.currentTime >= 0.1) { var canvas = document.createElement('canvas'); canvas.width = this.videoWidth; canvas.height = this.videoHeight; canvas.getContext('2d').drawImage(this, 0, 0, canvas.width, canvas.height); var dataUri = canvas.toDataURL(); this.setAttribute('poster', dataUri); this.removeEventListener('timeupdate', arguments.callee); } }); ``` 这段代码中,我们监听video元素的timeupdate事件,并在回调函数中判断视频是否已经播放了0.1秒以上。如果是,则获取视频的第一帧图片,并将其设置为video元素的poster属性值。此外,我们还在回调函数中移除了timeupdate事件监听器,以避免重复获取第一帧图片。 需要注意的是,在移动端一些浏览器中,timeupdate事件触发频率可能较低,因此获取第一帧图片的时间可能会比较长。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值