前言

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

（这只是一张图片哦~）

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

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

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

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

<!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

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

  1. 从0到1搭建一款Vue可配置视频播放器组件（Npm已发布）

    前言 话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器.我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那 ...

  2. vue.js react.js angular.js三者比较

    react和vue有许多相似之处,他们都有:1.使用虚拟DOM2.提供了响应式(reactive)和组件化(composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管 ...

  3. 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes

    转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...

  4. 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let

    转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...

  5. [在线+源码]vue全家桶+Typescript开发一款习惯养成APP

    # vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. [源码地址](https://github.com/xiaomuzhu/vue ...

  6. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  7. javascript+HTMl5游戏下载，开发一个都能月薪上万！舅服你

    HTML5时代已经到来许久了,你是否已经掌握了那么一点呢?今天小编给大家讲讲h5的折叠多设备.跨平台特性, 即用HTML5制作游戏.相比flash,HTML5更加灵活方便,随着浏览器技术的不断升级,H ...

  8. 一个基于ES5的vue小demo

    由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...

  9. 快速构建一个使用axios的vue应用程序（转）

    英文原文:https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ 译文:https://segmentfault.com/ ...

随机推荐

  1. WePY开发环境的安装和小程序生成WePY项目

    相对于微信开发者工具而言,WePY的安装和生成项目稍显复杂.特记录下安装顺序: 1.安装Node.js 在Node官网(https://nodejs.org/)下载Node.js的安装包,此处我下载的 ...

  2. linux权限问题，chmod命令

    Linux系统中,每个用户的角色和权限划分的很细致也很严格,每个文件(目录)都设有访问许可权限,利用这种机制来决定某个用户通过某种方式对文件(目录)进行读.写.执行等操作. 操作文件或目录的用户,有3 ...

  3. Git原理学习记录

    Git原理学习记录 1.git init git-test ​ git init 实际上就是在特定的目录下创建对应的目录和文件 2.object $ echo "V1" > ...

  4. POP3协议（电子邮件邮局协议）中UIDL和TOP命令在实际使用中的作用

    POP3是电子邮件协议中用于接收邮件的协议,相较于发送邮件的SMTP协议,POP3的命令要多一些.主要的命令有LIST.STAT.RETR.DELE.UIDL.TOP.QUIT,以及用于登录邮箱的US ...

  5. 腾讯云服务器ssh登录老是自动断开链接的解决办法

    vim /etc/ssh/sshd_config 找到下面两行 #ClientAliveInterval 0 #ClientAliveCountMax 3 去掉注释,改成 ClientAliveInt ...

  6. 使用 VS Code 撰写 Markdown 文档

    众所周知, VS Code 是微软和社区一起开发的一款很优秀的高级代码编辑器.它不仅可以写出一手好代码,还能写出一篇好文章.利用 Markdown 就可以写出一篇排版美观的技术文章了. 而 Markd ...

  7. 从小白到侠客的 Windows 快捷键宝典

    "天下 武功,唯快不破."你是否羡慕过那些电脑键盘侠客,他们操作起电脑行云流水,任务完成的又快又准.这到底是怎么做到的呢?我们是否也能向他们一样达到把键盘操作熟记于心呢?那就跟着笔 ...

  8. 通俗易懂的ArcGis开发快速入门

    前言 本文主要介绍ArcGis的ArcEngine开发,学习时,我们需要放下心里障碍,那就是Gis开发只是普通的软件开发,并不需要专业的GIS知识,就是非常普通的,调用相关的C++开发的COM组件. ...

  9. 【机翻】RTnet – 灵活的硬实时网络框架

    目录 RTnet – 灵活的硬实时网络框架 0 摘要 1 介绍 2 基础服务 2.1 数据包管理 2.2 UDP/IP 实现 2.3 Driver Layer 2.4 应用程序接口 2.5 捕获扩展 ...

  10. XCTF练习题---MISC---What-is-this

    XCTF练习题---MISC---What-is-this flag:AZADI TOWER 解题步骤: 1.观察题目,下载附件 2.下载后发现是个压缩包,文件内容不清楚,试试改为压缩包看看效果,发现 ...