前言

沉寂了一周了，打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器，为什么会有如此想法？是因为之前看一些学习视频网站时，看到它们做的视频播放器非常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. CesiumJS 2022^ 原理[2] 渲染架构之三维物体 - 创建并执行指令

    目录 回顾 预备知识:指令 预备知识:通道 1. 生成并执行指令 1.1. Primitive 生成指令 1.2. Context 对象负责执行 WebGL 底层代码 2. 多段视锥体技术 3. 指令 ...

  2. python爬虫---字体反爬

    目标地址:http://glidedsky.com/level/web/crawler-font-puzzle-1 打开google调试工具检查发现网页上和源码之中的数字不一样, 已经确认该题目为 字 ...

  3. JQuery学习基础

    ## 今日内容     1. JQuery 基础:         1. 概念         2. 快速入门         3. JQuery对象和JS对象区别与转换         4. 选择器 ...

  4. 001_iBase4J学习之环境搭建

    目录 序言 正文 第一关.拉取项目 第二关.导入数据库 第三关.修改 JDBC 配置文件 第四关.环境搭建,修改 nginx 设置 第五关.添加地址白名单 尾声 序言 大家好,我是白墨! 本次的目标是 ...

  5. client 系列

    定义 : client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息.通过client系列的相关属性可以动态的得到该元素的边框大小.元素大小等.

  6. python基础练习题（题目 字母识词）

    day22 --------------------------------------------------------------- 实例031:字母识词 题目 请输入星期几的第一个字母来判断一 ...

  7. 给swap分区扩容

    一.先添加一块硬盘,如果硬盘空间还有没有被分区的也可以使用,再创建一个分区(分区可以是主分区或者扩展的逻辑分区) fdisk  /dev/sdb n        代表创建分区 p        代表 ...

  8. C#使用进程调用bash，不断往bash内插入命令并执行

    呃呃呃,遇到了一个非常恶心得问题,现在就是,有几十万条数据需要当作参数调用python脚本 一次一次输入命令过去缓慢,经过了多层考虑决定使用进程来解决(不知道线程怎么开启bash得) 原理非常简单,类 ...

  9. .NET桌面程序应用WebView2组件集成网页开发4 WebView2的线程模型

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件基于组件对象模型(COM),必须在单线程单元(STA)线程上运行. 线程安全 WebView2必须在使用消息泵的UI线程上创 ...

  10. vmware ubuntu 忘记密码

    1.进入recovery模式 修改root密码 1.启动ubuntu系统,一开始在有进度条的时候按下shift键,出现GRUB选择菜单,选择Advanced options for Ubuntu 按回 ...