video标签播放第一帧

 <video width="100%" height="100%"  muted x5-video-player-type="h5" controls controlsList='nodownload  noplaybackrate' disablePictureInPicture preload="metadata"
                  webkit-playsinline playsinline  x5-video-orientation="portraint">
            <source :src="i.fileUrl + '#t=0.1'"  :type="'video/' + i.fileType">
            <!-- 视频加载失败,格式不支持,请截图反馈给技术中心 -->
            您的浏览器不支持 video 标签。
          </video>
重点是:preload值为加载,'#t=0.1', 这个方法h5页面失效,

  

第二种方法,亲测有效,无js
 <div class="video-wrapper" v-for="(i, iIndex) in detailInfo.mediaFileBos" :key="iIndex" >
          <video style="object-fit: fill;" width="100%" height="100%"
          muted controls playsinline webkit-playsinline
          x5-video-player-type="h5"
          controlsList='nodownload'
           oncontextmenu = "return false"
          disablePictureInPicture preload="metadata"
          :poster='i.fileUrl+"?x-oss-process=video/snapshot,t_2"'
          x5-video-orientation="portraint">
            <source :src="i.fileUrl + '#t1'"  :type="'video/' + i.fileType">
            <!-- 视频加载失败,格式不支持,请截图反馈给技术中心 -->
            您的浏览器不支持 video 标签。
          </video>
        </div>
参考链接:
https://help.aliyun.com/document_detail/64555.html?spm=a2c4e.11153940.0.0.c1034696M91eGA
http://t.zoukankan.com/belongs-to-qinghua-p-12545558.html

  

 

 

 

 

 
 
posted @ 2022-09-20 17:25  everseven  阅读(443)  评论(0)    收藏  举报