你是否有一个梦想？用JavaScript[vue.js、react.js......]开发一款自定义配置视频播放器

前言

沉寂了一周了，打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器，为什么会有如此想法？是因为之前看一些学习视频网站时，看到它们做的视频播放器非常Nice！于是，就打算抽空开发一款属于自己的视频播放器。话不多说，一起来实战吧！项目展示

（这只是一张图片哦~）

这张图就是我们的成品，还等什么？赶紧来实战吧！实战

我会把完整源码放在github上，欢迎来star，地址在文末。

首先，我们会使用最原生的JavaScript来实现，老大哥肯定要打头阵啊！一、JavaScript

代码语言：javascript

复制

iconfont.css：阿里字体图标文件，你可以在上面找到很多漂亮的图标。
index.css：项目样式文件。
index.js：项目逻辑文件。
123

代码语言：javascript

复制

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VamVideo(原生js版)</title>
    <link rel="stylesheet" href="./css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <div class="video-box">
      <video class="video-player" preload="auto" poster="./img/bg.png">
        <source
          src="https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4"
        />
        <source />
      </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>
        </div>
      </div>
    </div>
    <script src="./js/index.js"></script>
  </body>
</html>

更多内容请见原文，原文转载自:https://blog.csdn.net/weixin_44519496/article/details/118755760