关于javascript:JS30Wes-Bos自定义视频播放器-11

title:【原生 javascript 我的项目】Video player 11
date: 2022-01-18 13:58:54
tags: 原生 javascript 我的项目
categories: 30 个原生 javascript 我的项目

作者：©Iaine 万一
简介：30 Day Challenge 是 Wes Bos 设计的一个 30 天原生 js 编程挑战。我的项目收费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。

本我的项目为第 11 天的“自定义视频播放器”我的项目。Have fun with the website! ♪(^∇^*)

网页成果：https://janice143.github.io/v…

利用 video 标签，以及一些 div 标签，在 js 中设置视频的播放控件，包含 暂停 / 播放 ， 声音调节 ， 视频进度调节 ， 视频播放率 ， 跳过 / 退后。

我的项目重点

video 对象的各种属性、办法和事件
- paused
- play()
- pause()
- currentTime
- volume
- playbackRate
HTML DOM offsetWidth 属性
- 获取元素的宽度，蕴含内边距（padding）和边框（border）:
HTML5 data-* 自定义属性
- this.dataset.
- data-

video标签标记视频文件
div标签和 button 标签实现的一些视频控件，类名为.controlers
- .progress 进度条，.progress_filled 进度条填充色彩
- .player_button 播放按钮
- 声音滑块
- 播放速度滑块
- 后退 / 后退按钮

获取标签

编写自定义函数

播放按键

const method = video.paused ? 'play' : 'pause';
video[method]();

更新播放键的按键

const icon = this.paused ? '►' : '❚ ❚';
toggle.textContent = icon;

后退 / 后退

video.currentTime += parseFloat(this.dataset.skip);

更新滑块的值
```
video[this.name] = this.value;
```

更新进度条（填充色彩）

const percent = (video.currentTime / video.duration) * 100;
progressBar.style.flexBasis = `${percent}%`;

鼠标挪动进度条

const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
video.currentTime = scrubTime;

增加监听事件
- 视频的 click,play,pause,timeupdata 事件
- 播放按钮、后退后退按钮的 click 事件
- 滑块的 change,mousemove 事件
- 进度条的 click,mousemove,mousedown,mouseup 事件

flex 容器的我的项目属性
- flex-basis：我的项目占据的主轴空间（main size）
- flex
属性选择器
- input[type=range]

自定义数据属性，可通过所属元素的 HTMLElement 接口拜访，确切地说是HTMLElement.dataset，HTMLElement.dataset["testValue"] 属性拜访。

注 *：data- 前面的命名规定

该名称不能以 xml 结尾，无论这些字母是大写还是小写；
该名称不能蕴含任何分号；
该名称不能蕴含 A 至 Z 的大写字母
data 前面的命名中有 -，如 data-test-value，可通过 HTMLElement.dataset.testValue (或者是 HTMLElement.dataset["testValue"] ) 来拜访，任何短线符号都会被下个字母的大写代替(驼峰拼写)。

JS30 的第 11 个我的项目圆满完成啦，感激浏览，有问题分割我的邮箱 1803105538@qq.com.

关于javascript:JS30Wes-Bos自定义视频播放器-11

我的项目形容

我的项目过程

html 局部

Js 局部

CSS 局部

我的项目知识点

data-*