vue实现自定义H5视频播放器的方法步骤-创新互联

前言

创新互联服务项目包括桥东网站建设、桥东网站制作、桥东网页制作以及桥东网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，桥东网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到桥东省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

前段时间基于vue写了一个自定义的video播放器组件,踩了一些小坑, 这里做一下复盘分享出来,避免日后重复踩坑...

设计阶段

这里就直接放几张完成后的播放状态图吧,界面布局基本就是flex+vw适配一把梭,也比较容易.

需要实现的几个功能基本都标注出来了; 除了还有一个视频加载失败的...下面就这届上代码了;刚开始构思的时候考虑了一下功能的实现方式: 一是用原生的DOM操作,获取video元素后,用addEventListener来监听; 二是用vue的方式绑定事件监听; 最后图方便采用了两者结合的方式,但是总感觉有点乱, 打算后期再做一下代码格式优化.

video组件实现过程

组件模板部分

主要是播放器的几种播放状态的逻辑理清楚就好了, 即: 播放中,缓存中,暂停,加载失败这几种情况,下面按功能分别说一下

<template>
 <div class="video-player">
  <!-- 播放器界面; 兼容ios controls-->
  <video
   ref="video"
   v-if="showVideo"
   webkit-playsinline="true"
   playsinline="true"
   x-webkit-airplay="true"
   x5-video-player-type="h6"
   x5-video-player-fullscreen="true"
   x5-video-orientation="portraint"
   
   preload="auto"
   muted="true"
   poster="/upload/otherpic13/a9yPQozt0g.jpg"
   :src="src"
   @waiting="handleWaiting"
   @canplaythrough="state.isLoading = false"
   @playing="state.isLoading = false, state.controlBtnShow = false, state.playing=true"
   @stalled="state.isLoading = true"
   @error="handleError"
  >您的浏览器不支持HTML5</video>
  <!-- 兼容Android端层级问题, 弹出层被覆盖 -->
  <img
   v-show="!showVideo || state.isEnd"
   class="poster"
   src="/upload/otherpic13/a9yPQozt0g.jpg"
   alt
  >
  <!-- 控制窗口 -->
  <div
   class="control"
   v-show="!state.isError"
   ref="control"
   @touchstart="touchEnterVideo"
   @touchend="touchLeaveVideo"
  >
   <!-- 播放 || 暂停 || 加载中-->
   <div class="play" @touchstart.stop="clickPlayBtn" v-show="state.controlBtnShow">
    <img
     v-show="!state.playing && !state.isLoading"
     src="../../assets/video/content_btn_play.svg"
    >
    <img
     v-show="state.playing && !state.isLoading"
     src="../../assets/video/content_btn_pause.svg"
    >
    <div class="loader" v-show="state.isLoading">
     <div class="loader-inner ball-clip-rotate">
      <div></div>
     </div>
    </div>
   </div>
   <!-- 控制条 -->
   <div class="control-bar" :>
    <span class="time">{{video.displayTime}}</span>
    <span class="progress" ref="progress">
     <img
      class="progress-btn ignore"
      :
      src="../../assets/video/content_ic_tutu.svg"
     >
     <span class="progress-loaded" :></span>
     <!-- 设置手动移动的进度条 -->
     <span
      class="progress-move"
      @touchmove.stop.prevent="moveIng($event)"
      @touchstart.stop="moveStart($event)"
      @touchend.stop="moveEnd($event)"
     ></span>
    </span>

    <span class="total-time">{{video.totalTime}}</span>
    <span class="full-screen" @click="fullScreen">
     <img src="../../assets/video/content_ic_increase.svg" alt>
    </span>
   </div>
  </div>
  <!-- 错误弹窗 -->
  <div class="error" v-show="state.isError">
   <p class="lose">视频加载失败</p>
   <p class="retry" @click="retry">点击重试</p>
  </div>
 </div>
</template>

本文标题：vue实现自定义H5视频播放器的方法步骤-创新互联
网页地址：https://www.cdcxhl.com/article6/dcigog.html

成都网站建设公司_创新互联，为您提供营销型网站建设、软件开发、微信小程序、网站内链、定制网站、动态网站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联