前言

沉寂了一周了，打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器，为什么会有如此想法？是因为之前看一些学习视频网站时，看到它们做的视频播放器非常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. 三、DOS命令

    常用的DOS命令 #盘符切换 D: #查看当前目录下的所有文件 dir #切换目录 cd+空格+/d+空格+路径 #返回上一级 cd+空格+.. #清理屏幕 cls #退出终端 exit #查看电脑 ...

  2. VScode链接服务器并配置公钥-SSH Keys

    VScode链接服务器并配置公钥-SSH Keys 一直在用Xshell做SSH连接服务器与虚拟机,但是中文乱码的问题一直找不到解决方案,干脆使用编辑器自带的插件,集成之后用起来也方便 1.概述 做法 ...

  3. Java第十五周作业

    Cola公司的雇员分为以下若干类:(知识点:多态) [必做题]• 4.1 ColaEmployee :这是所有员工总的父类,属性:员工的姓名,员工的生日月份.方法:getSalary(int mont ...

  4. Ranchar中PostgreSQL容器异常 53100: could not resize shared memory segment ... bytes: No space left on device

    问题: 客户查报表时描述查询一天的报表能出来,查询一个月的报表不能出来 分析原因: 从下图的异常中分析是PostgreSQL 的共享内存过小,容器默认的/dev/shm大小为64M 解决方案:调整ra ...

  5. jstl操作session

    1.jstl操作session(添加.删除session中的值)

  6. Mybatis执行多条SQL

    1:在数据库连接配置文件处,增加如下参数即可:allowMultiQueries=true spring: datasource: url: jdbc:mysql://IP:PORT/数据库名?其他参 ...

  7. vue - Vue脚手架/消息订阅与发布

    今天的内容有意思了,朋友们继续对我们之前的案例完善,是这样的我们之前是不是靠props来完成父给子,子给父之间传数据,其实父给子最好的方法就是props但是自给父就不是了,并且今天学下来,不仅如此,组 ...

  8. 现代 CSS 解决方案：CSS 数学函数

    在 CSS 中,其实存在各种各样的函数.具体分为: Transform functions Math functions Filter functions Color functions Image ...

  9. 面试简历书写、Flask框架介绍与快速使用、Flask演示登录页面、用户信息页面案例

    今日内容概要 面试简历编写 Flask框架介绍与安装 内容详细 1.面试简历编写 # 千万不要几个小时把简历凑出来 几天到一周 # 有没有面试机会,取决于简历写得怎么样 简历写好是第一步 # 投简历的 ...

  10. 234. Palindrome Linked List - LeetCode

    Question 234. Palindrome Linked List Solution 题目大意:给一个链表,判断是该链表中的元素组成的串是否回文 思路:遍历链表添加到一个list中,再遍历lis ...