H5播放视频的坑以及oncanplay和onloadedmetadata的重要性

问题:同样的组件在移动端怎样都无法播放视频,音频、图片、pdf等都可以正常加载,加载的页面状态一直是禁止播放:

 

贴一波源码

如果要加载的资源是video,首先会触发handleIChangeVideo这个方法,用于调整样式,用于放在通用组件的合适范围里面

function handleIChangeVideo(url: string) {
      linkState.status = StatueEnum.LOADING;
      const video = document.createElement('video');
      video.src = url;
      video.oncanplay = (e: Event) => {
         contentRatio.value = video.videoWidth / video.videoHeight;
         if (linkState.currentUrl !== url) {
           const ele: any[] = e.composedPath();
           linkState.linkScale = Number(props.linkScale) || 0.8;
           ele && emit('img-load', {
               index: linkState.currentIndex,
               dom: ele[0],
               url
             });
         }
         linkState.currentUrl = url;
         linkState.status = StatueEnum.DONE;
       };
      
    }

然后会触发渲染函数,返回对应的dom,将dom插入到它父组件中,整个弹窗是动态创建的组件

case ResourceType.Video:
          return (
            <div
              style={unref(getImageStyle)}
              class={[
                `${prefixCls}-image`,
                linkState.status === StatueEnum.DONE ? '' : 'hidden'
              ]}
              ref={imgElRef}
              onMousedown={handleAddMoveListener}
            >
              <video autoplay controls src={linkState.currentUrl} />
            </div>
          );

排查流程:

1. google一圈以为是移动端禁止自动播放导致,然后我将autoplay去掉了也无法解决

2. 将源码发给chatgpt帮我分析错误,强调了不同浏览器的安全策略、资源不支持加载等,可是我的资源是常规mp4,并且测试了多个平台没有一个能用

3. 尝试在handleIChangeVideo方法中,注释掉oncanplay方法,直接将linkState.currentUrl赋值,再看的时候视频内容就显示出来了,并且可以点击进行播放。找到出问题的代码了就好解决了,于是我去搜oncanplay方法的触发时机,看看能不能替换为其它的方法来达到我的样式。

将oncanplay替换为onloadedmetadata,再次尝试就好了。

onloadedmetadata:获取视频meta信息完毕,这个时候播放器已经获取到了视频时长和视频资源的文件大小。

oncanplay:在用户可以开始播放视频/音频(audio/video)时触发

原因:

在IOS中不会自动加载音视频,所以oncanplay事件不会自动执行;而在 pc 端和 android 端,系统会自动加载音视频,所以oncanplay会自动被执行

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值