前言

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括橋東網(wǎng)站建設(shè)、橋東網(wǎng)站制作、橋東網(wǎng)頁制作以及橋東網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，橋東網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到橋東省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

前段時(shí)間基于vue寫了一個(gè)自定義的video播放器組件,踩了一些小坑, 這里做一下復(fù)盤分享出來,避免日后重復(fù)踩坑...

設(shè)計(jì)階段

這里就直接放幾張完成后的播放狀態(tài)圖吧,界面布局基本就是flex+vw適配一把梭,也比較容易.

需要實(shí)現(xiàn)的幾個(gè)功能基本都標(biāo)注出來了; 除了還有一個(gè)視頻加載失敗的...下面就這屆上代碼了;剛開始構(gòu)思的時(shí)候考慮了一下功能的實(shí)現(xiàn)方式: 一是用原生的DOM操作,獲取video元素后,用addEventListener來監(jiān)聽; 二是用vue的方式綁定事件監(jiān)聽; 最后圖方便采用了兩者結(jié)合的方式,但是總感覺有點(diǎn)亂, 打算后期再做一下代碼格式優(yōu)化.

video組件實(shí)現(xiàn)過程

組件模板部分

主要是播放器的幾種播放狀態(tài)的邏輯理清楚就好了, 即: 播放中,緩存中,暫停,加載失敗這幾種情況,下面按功能分別說一下

<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端層級(jí)問題, 彈出層被覆蓋 -->
  <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>
     <!-- 設(shè)置手動(dòng)移動(dòng)的進(jìn)度條 -->
     <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>
  <!-- 錯(cuò)誤彈窗 -->
  <div class="error" v-show="state.isError">
   <p class="lose">視頻加載失敗</p>
   <p class="retry" @click="retry">點(diǎn)擊重試</p>
  </div>
 </div>
</template>

本文標(biāo)題：vue實(shí)現(xiàn)自定義H5視頻播放器的方法步驟-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.rwnh.cn/article6/dcigog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷型網(wǎng)站建設(shè)、軟件開發(fā)、微信小程序、網(wǎng)站內(nèi)鏈、定制網(wǎng)站、動(dòng)態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)