前言

沉寂了一周了，打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器，为什么会有如此想法？是因为之前看一些学习视频网站时，看到它们做的视频播放器非常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. mysql4与mysql5的区别_MySQL 4.1/5.0/5.1/5.5/5.6各版本的主要区别

    MySQL 4.1/5.0/5.1/5.5/5.6各版本的主要区别 一.5.0 增加了Stored procedures.Views.Cursors.Triggers.XA transactions的 ...

  2. 帝国CMS后台采集关键字的方法

    小伙伴们知道帝国CMS后台的采集功能是不能采集关键字的,那么老墨今天给大家说一个变通方法,让后台能采集关键字!方法如下: 1.系统设置--管理数据表--管理字段--增加字段(字段名:keywords字 ...

  3. STL空间配置器源码分析（四）bitmap_allocator

    一.摘要 bitmap_allocator是STL空间分配器的其中一种,它采用内存池策略,最多存储64条空闲链表(freelist,实际是一块空间连续的内存区,后面也称为超级块),每条空闲链表存储的内 ...

  4. flink调优之RocksDB设置

    一.开启监控 RocksDB是基于LSM Tree实现的,写数据都是先缓存到内存中,所以RocksDB的写请求效率比较高.RocksDB使用内存结合磁盘的方式来存储数据,每次获取数据时,先从内存中bl ...

  5. Java语言学习day11--7月10日

    今日内容介绍1.自定义类型的定义及使用2.自定义类的内存图3.ArrayList集合的基本功能4.随机点名器案例及库存案例代码优化 ###01引用数据类型_类 * A: 数据类型 * a: java中 ...

  6. jsp第七周作业

    1.p78-p79的例4-9 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...

  7. OV5640图像采集（一）VGA显示

    vga控制器模块 1 引言  项目的背景是采集无人车间现场的工件图像并送往控制间pc端处理,最终实现缺陷检测.项目包括图像采集模块,数据传输模块,上位机,缺陷检测算法等四个部分.其中,图像采集模块又分 ...

  8. Photoshop图片处理在线网页使用无需下载绿色

    今天给大家推荐一个ps在线版网页 实测使用效果不错,绿色简介,无需下载,不卡顿一般的电脑配置都可以带起来 因为是在线的所以是精简版的,但是一般ps软件有的工具,功能他都有,比较适合及时性使用 废话不多 ...

  9. 【面试普通人VS高手系列】请说一下你对分布式锁的理解，以及分布式锁的实现

    一个工作了7年的Java程序员,私信我关于分布式锁的问题. 一上来就两个灵魂拷问: Redis锁超时怎么办? Redis主从切换导致锁失效怎么办? 我说,别着急,这些都是小问题. 那么,关于" ...

  10. Linux-centos8实现私有CA和证书申请

    创建CA相关目录,centos8不存在这些目录,需手动建立 [root@centos8-liyj ~]#mkdir -pv /etc/pki/CA/{certs,cr1,newcerts,privat ...