Day11 - 自定义视频播放器

SKYZACK 发布于2019-08-20 18:26 / 1704人阅读

摘要：自定义视频播放器微信公众号开发企业级产品全栈开发速成周末班首期班号正式开班，欢迎抢座作者简介是推出的一个天挑战。

Day11 - 自定义视频播放器

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

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

项目效果

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

实现思路

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

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

事件绑定，将页面元素绑定相应触发事件

变量绑定

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

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

/* 获取元素  */
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);

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

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

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中是这样设置的：

分别给每一个范围设置了一个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代码如下:

分别设置了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

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

关注全栈部落官方公众号，每晚十点接收系列原创技术推送

混合云云服务器 h5视频播放器可自定义样式双11承接页自定义全屏 webrtc自定义视频数据 webrtc自定义视频流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84496.html

Day11 - 自定义视频播放器

摘要：自定义视频播放器微信公众号开发企业级产品全栈开发速成周末班首期班号正式开班，欢迎抢座作者简介是推出的一个天挑战。 Day11 - 自定义视频播放器 (Node+Vue+微信公众号开发)企业级产品全栈开发速成周末班首期班(10.28号正式开班，欢迎抢座) 作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视...

ChanceWong 2019-08-05 11:45 评论0 收藏0
Day19 - 摄像、拍照，滤镜中文指南

摘要：摄像拍照，滤镜中文指南本文出自春哥个人博客作者黎跃春追时间的人简介是推出的一个天挑战。完整中文版指南及视频教程在从零到壹全栈部落。这个新的对象表示指定的对象或对象。 Day19 - 摄像、拍照，滤镜中文指南本文出自：春哥个人博客作者：©黎跃春-追时间的人简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文...

chaos_G 2019-08-21 11:49 评论0 收藏0
完整视频播放器封装库

摘要：可以支持多种视频播放类型，比如，原生封装视频播放器，还有基于封装的播放器。并且还支持删除视频播放位置状态。拓展功能产品需求类似优酷，爱奇艺视频播放器部分逻辑。目录介绍 1.关于此视频封装库介绍 1.1 能够满足那些业务需求 1.2 对比同类型的库有哪些优势 2.关于使用方法说明 2.1 关于gradle引用说明 2.2 添加布局 2.3 最简单的视频播放器参数设定 2.4 注意的问...

feng409 2019-06-21 16:18 评论0 收藏0
完整视频播放器封装库

摘要：可以支持多种视频播放类型，比如，原生封装视频播放器，还有基于封装的播放器。并且还支持删除视频播放位置状态。拓展功能产品需求类似优酷，爱奇艺视频播放器部分逻辑。目录介绍 1.关于此视频封装库介绍 1.1 能够满足那些业务需求 1.2 对比同类型的库有哪些优势 2.关于使用方法说明 2.1 关于gradle引用说明 2.2 添加布局 2.3 最简单的视频播放器参数设定 2.4 注意的问...

mingde 2019-07-16 16:05 评论0 收藏0
day1 - JavaScript Drum Kit 中文指南

摘要：中文指南作者简介是推出的一个天挑战。页面基础布局标签定义键盘文本说到技术概念上的特殊样式时，就要提到标签。主要代码主要属性有以下几个中有一个样式为，在本案例中，就是，是以中的为参照物，就是。 Day01 - JavaScript Drum Kit 中文指南作者：©liyuechun 简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 ...

HackerShell 2019-08-20 18:05 评论0 收藏0