video标签播放第一帧

1
2
3
4
5
6
<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><br>重点是:preload值为加载,'#t=0.1', 这个方法h5页面失效,

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
第二种方法,亲测有效,无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 @   everseven  阅读(373)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?
点击右上角即可分享
微信分享提示