【JS30-Wes Bos】自定义视频播放器 11 javascript前端

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-

项目过程 html部分

video标签标记视频文件
【【JS30-Wes Bos】自定义视频播放器 11】div标签和button标签实现的一些视频控件，类名为.controlers
- .progress进度条，.progress_filled进度条填充颜色
- .player_button播放按钮
- 声音滑块
- 播放速度滑块
- 前进/后退按钮

Js部分

获取标签
编写自定义函数
- 播放按键
  
  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事件

CSS部分

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

项目知识点 data-* 自定义数据属性，可通过所属元素的 HTMLElement 接口访问，确切地说是HTMLElement.dataset ， HTMLElement.dataset["testValue"] 属性访问。
注*：data-后面的命名规则

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