Day11 - 自定义视频播放器

熵桥薄雾
• 阅读 1579

Day11 - 自定义视频播放器

(Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班,欢迎抢座)

作者:©liyuechun
简介:JavaScript30Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 11 篇。完整中文版指南及视频教程在 从零到壹全栈部落

项目效果

Day11 - 自定义视频播放器

第十一天是要做一个自定义的视频播放器,在具有基本样式的前提下,实现视频的播放,暂停,进度条拖拽,音量加减,播放速度加减,快进快退的功能。

实现思路

  1. 首先需要分别将变量绑定至页面上的元素

  2. 分别实现播放,暂停,声音加减,播放速度加减,拖拽快进,点击快进等函数

  3. 事件绑定,将页面元素绑定相应触发事件

变量绑定

HTML 元素中,video 标签是我们的视频,而下面的 player__controls 就是我们自己的控制面板

<div class="player">
    <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
    
    <div class="player__controls">
      <div class="progress">
       <div class="progress__filled"></div>
      </div>
      <button class="player__button toggle" title="Toggle Play">►</button>
      <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
      <input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
      <button data-skip="-10" class="player__button">« 10s</button>
      <button data-skip="25" class="player__button">25s »</button>
    </div>
</div>

开始之前我们先把所有需要用到的元素节点先取到:

/* 获取元素  */
const player = document.querySelector('.player');
const video = player.querySelector('.viewer');
const progress = player.querySelector('.progress');
const progressBar = player.querySelector('.progress__filled');
const toggle = player.querySelector('.toggle');
const skipButtons = player.querySelectorAll('[data-skip]');
const ranges = player.querySelectorAll('.player__slider');

事件监听

<!--点击播放-->
video.addEventListener('click',videoplay);
<!--点击或者播放时改变播放和暂停状态的图标-->
// video.addEventListener('click',handleToggle);
video.addEventListener('play',handleToggle);
<!--暂停时改变图标状态-->
video.addEventListener('pause',handleToggle);
<!--时间轴更新-->
video.addEventListener('timeupdate',filledUpdate);

<!--点击播放或者暂停的图标事件的监听-->
toggle.addEventListener('click',videoplay);
toggle.addEventListener('click',handleToggle);

<!--音量和播放速度滑动条事件监听-->
let mouseflag = false;
player__slider.forEach(item => item.addEventListener('click',handlePlayerSlider));
player__slider.forEach(item => item.addEventListener('mousedown',() => mouseflag = true));
player__slider.forEach(item => item.addEventListener('mouseup',() => mouseflag = false));
player__slider.forEach(item => item.addEventListener('mousemove',(e) => mouseflag && handlePlayerSlider(e)));

<!--快进按钮事件监听-->
skip.forEach(item => item.addEventListener('click',handleSkip));


<!--播放事件轴拖拽监听-->
let filledflag = false;
progressBar.addEventListener('click',handlefilled);
progressBar.addEventListener('mousemove',(e) => filledflag && handlefilled(e));
progressBar.addEventListener('mousedown',() => filledflag = true);
progressBar.addEventListener('mouseup',() => filledflag = false);

分别给页面元素建立事件监听,并绑定其实现函数即可。此处有两处需注意:

  1. 有实现进度条的点击拖拽,不能仅绑定mousemove事件,因为这样鼠标在上面滑过就会出发事件,还需判断鼠标是否点下,此处可设立一个布尔类型的flag标志鼠标是否按下,并分别绑定mouseup事件和mousedown事件,设置此flag的值,这样在mousemove事件的回调函数中先判断此flag的值,若为真是才继续触发事件。

  2. mousemove的回调函数本应如下:

{
    if(filledflag){
        handlefilled(e);
    }
}

但这样不够简洁,我们改进此代码如下:

filledflag && handlefilled(e)

使用&&判断左右两变量,只有两个都为真的时候整体表达式才为真,且在判断时从左向右依次判断,若左变量就为假,就不会再去执行右边的表达式。

函数实现

  • 视频播放与暂停转换函数

function videoplay(e){
    const method = video.paused ? 'play' : 'pause';
    video[method]();
}

判断当前视频的播放状态,播放时则变为暂停状态、暂停则变为播放状态;分别调用video.play()video.pause()方法,在此使用video[play]()video[pause]()是因为,使用中括号能够动态的传递变量进去,而使用点运算符不能传参。

  • 播放按钮状态显示函数

function handleToggle(){
    let icon = video.paused ? '►' : '❚ ❚';
    toggle.textContent = icon;
}

如果视频是暂停状态就显示播放键'►',否则显示暂定键'❚❚'

  • 音量大小和播放速度控制函数

function handlePlayerSlider(e){
    video[e.target.name] = e.target.value;
}

在页面HTML中是这样设置的:

<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">

分别给每一个范围设置了一个name属性,代表该范围所表示的内容,同时也是需控制的方法名,因此我们通过设置video[e.target.name] = e.target.value;就可以分别改变视频的音量和播放速度,此处e.target就是这两个input元素,也等同于this

  • 快进快退函数

function handleSkip(e){
    let skiptime = parseFloat(this.dataset.skip);
    video.currentTime += skiptime;
}

页面中快进快退的HTML代码如下:

<button data-skip="-10" class="player__button">« 10s</button>
<button data-skip="25" class="player__button">25s »</button>

分别设置了data-skip属性,这样就可以通过.dataset.skip获取到该属性的值,也即this.dataset.skip,但该值是字符串类型,需要用parseFloat()讲其转换为float数值型,分别将时间加减当前视频的播放事件就可以做到快进快退。

  • 进度条随播放时间而显示的函数

function filledUpdate(){
    let portion = parseFloat(video.currentTime / video.duration) * 100;
    filled.style.flexBasis = `${portion}%`;
}

通过视频当前的播放时间除以视频的总时长*100,就是当前视频播放的百分比,将该值使用模版字符串的方式传给flexBasis样式中即可,在CSS中该样式名为flex-basis,但是谨记在js中需要多单词的CSS属性需要变为驼峰式的命名,第二个单词大写,切不可用连字符连接。

  • 拖拽进度条定点观看的函数

function handlefilled(e){    
    let pice = (e.offsetX / progressBar.offsetWidth) * video.duration;
    video.currentTime = pice;
}

我们需要点击进度条时调整播放进度,那么我们改变进度,或者说宽度就需要得到鼠标点击的位置,这可以通过事件对象的 offsetX 属性来找到,该属性代表鼠标点击位置相对于该元素的水平偏移。得到偏移之后计算出该位置的百分比,那么也就知道了进度的百分比。

源码下载

Github Source Code

社群品牌:从零到壹全栈部落

定位:寻找共好,共同学习,持续输出全栈技术社群

业界荣誉:IT界的逻辑思维

文化:输出是最好的学习方式

官方公众号:全栈部落

社群发起人:春哥(从零到壹创始人,交流微信:liyc1215)

技术交流社区:全栈部落BBS

全栈部落完整系列教程:全栈部落完整电子书学习笔记

关注全栈部落官方公众号,每晚十点接收系列原创技术推送
Day11 - 自定义视频播放器
点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
3年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Docker 部署SpringBoot项目不香吗?
  公众号改版后文章乱序推荐,希望你可以点击上方“Java进阶架构师”,点击右上角,将我们设为★“星标”!这样才不会错过每日进阶架构文章呀。  !(http://dingyue.ws.126.net/2020/0920/b00fbfc7j00qgy5xy002kd200qo00hsg00it00cj.jpg)  2
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(