前言

話不多說，這篇文章主要講述如何從0到1搭建一款適用於Vue.js的自定義配置視訊播放器。我們平時在PC端網站上觀看視訊時，會看到有很多豐富樣式的視訊播放器，而我們自己寫的video標籤樣式卻是那麼醜。其實像那些網站都是基於原生video標籤進行開發的，只不過還得適當加工一下，才會有我們所看到的漂亮的視訊播放器。
開發

在具體開發之前，我們需要明確我們需要做什麼？

封裝一個可配置的視訊播放器；
適用於Vue.js；
應用於PC端網站；
視訊播放器常用的功能必須要有；
釋出到Npm；

好，明確了以上幾點之後，我們就開始敲程式碼了。
一、搭建一個基礎的UI元件

這裡的UI元件你可以理解成我們搭建一個靜態頁面，就是把視訊播放器簡單地搭建起來，有一個基礎的模型。

<template>
  <div
    class="video-box"
  >
    <video
      class="video-player"
    ></video>
    <div class="bottom-tool">
      <div class="pv-bar">
        <div class="pv-played"></div>
        <div class="pv-dot"></div>
      </div>
      <div class="pv-controls">
        <div class="pc-con-l">
          <div class="play-btn">
            <i class="iconfont icon-bofang"></i>
            <i class="iconfont icon-zanting hide"></i>
          </div>
          <div class="pv-time">
            <span class="pv-currentTime">00:00:00</span>
            <span>/</span>
            <span class="pv-duration">00:00:00</span>
          </div>
        </div>
        <div class="pc-con-r">
          <div class="pv-listen ml">
            <div class="pv-yl">
              <p class="pv-ol"></p>
              <p class="pv-bg"></p>
            </div>
            <div class="pv-iconyl">
              <i class="iconfont icon-yinliang"></i>
              <i class="iconfont icon-jingyin hide"></i>
            </div>
          </div>
          <div class="pv-speed ml">
            <p class="pv-spnum">1x</p>
            <ul class="selectList">
              <li>0.5x</li>
              <li>1x</li>
              <li>1.25x</li>
              <li>1.5x</li>
              <li>2x</li>
            </ul>
          </div>
          <div class="pv-screen ml">
            <i class="iconfont icon-quanping"></i>
            <i class="iconfont icon-huanyuan hide"></i>
          </div>
          <div class="pv-screens ml">
            <i class="iconfont icon-shipinquanping"></i>
            <i class="iconfont icon-tuichuquanping hide"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 

更多內容請見原文，原文轉載自：https://blog.csdn.net/weixin_44519496/article/details/118755670