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局部

  1. video标签标记视频文件

  2. 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"] ) 来拜访，任何短线符号都会被下个字母的大写代替(驼峰拼写)。
JS30的第11个我的项目圆满完成啦，感激浏览，有问题分割我的邮箱1803105538@qq.com.