目的

学习如何完整的开发一个视频组件

功能

开发一个支持以下功能的视频组件

  1. 自定义视频control组件
    • 支持pc端和移动端，开发两套组件
  2. 支持键盘操作**
    • 空格 => 暂停和播放
    • 左右键 => 快进和回退
    • 上下键 => 调节音量 ß
  3. **支持弹幕相关操作****ßß
    • 弹幕开关 ß 展示弹幕的面板
  4. 支持全屏
    • 网页全屏
    • 屏幕全屏
    • 双击进入/退出全屏
  5. 音量调节
  6. 倍速调节
  7. 调节视频进度
    • 拖动进度条滑块进行调节
    • 点击进度条进行调节
    • 鼠标 hover 进度条显示当前位置的时间
  8. 支持直播功能

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<template>
  <video-player
    :src="'https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/aaea48415285890816071408130/ckc0XDawqmgA.mp4'"
    :loop="false"
    :width="'800px'"
    :height="'500px'"
    @play="onPlay"
    @pause="onPause"
    @ended="onFinish"
  ></video-player>
</template>

<script>
  // 引入VideoPlayer组件
  import VideoPlayer from "vue-video-player-mx";
  // 重要：引入video组件的css
  import "vue-video-player-mx/dist/index.css";

  export default {
    components: {
      VideoPlayer,
    },

    methods: {
      onPlay(info) {
        console.log("视频开始播放了...", info.currentTime);
      },

      onPause(info) {
        console.log("视频暂停播放了...", info.currentTime);
      },

      onFinish() {
        console.log("视频播放完毕了...");
      },
    },
  };
</script>

实现

Props

属性名 描述 默认值 类型 是否必填
src 视频资源地址 '' string true
poster 视频封面图 '' string false
muted 是否静音 false boolean false
loop 是否循环播放 true boolean false
autoPlay 是否自动播放 false boolean false
preload 是否预加载视频资源 auto string false
controls 是否显示 controls 组件 true boolean false
width 视频组件宽度 700px string false
height 视频组件高度 500px string false
supportMobile 是否适配移动端 true boolean false
controlsOptions control 组件的选项 {enableFullscreen: true, enableWebFullscreen: true, enableShotScreen: false, enableSpeedSetting: true, playSpeedOptions: [2, 1.5, 1, 0.5]} object false
customizeStyle 自定义视频滚动条和 controls 的背景色 {} object false

Events

事件名 描述 示例
play 视频由暂停状态变成播放状态时触发 (currentTime) => {}
pause 视频由播放状态变成暂停状态时触发 (currentTime) => {}
ended 视频播放结束时触发 () => {}
playing 由于缺少数据导致暂停播放，再次播放时执行。就是卡了一下，继续播放 () => {}
waiting 由于缺少数据导致暂停播放时执行，就是卡了 () => {}
timeUpdate video 标签的 currentTime 更新时触发
loadeddata 视频第一帧资源加载完成时执行 () => {}
loadedmetadata 视频元数据加载完后后执行，元数据包括时长、尺寸（仅视频）以及文本轨道 (duration, size) => {}
seeked 当视频进度发生跳转后触发 (currentTime) => {}
seeking 视频进度发生跳转时触发 (currentTime) => {}
enterFullscreen 进入全屏时触发 () => {}
cancelFullscreen 退出全屏时触发 () => {}
enterWebFullscreen 进入网页全屏时触发 () => {}
cancelWebFullscreen 退出网页全屏时触发 () => {}
rateChange 播放倍速变化时触发，speed参数表示变化后的倍速 (rate) => {}
volumeChange 音量变化时触发，volume参数表示变化后的音量 (volume) => {}
progressChange 播放进度发生变化时触发 ({duration, currentTime, percent}) => {}
downloadResource 下载视频资源时触发，资源是一段一段的下载的 () => {}

controls 组件

播放状态

弹幕功能

全屏功能

网页全屏

屏幕全屏

直播功能

跳转至上次播放位置

学到的知识

webpack

参考

  • 不能直接通过 play 方法播放视频，必须通过触发某些事件（用户与 dom 进行交互）才可以执行（防止进入页面直接自动播放，autoplay 属性除外）

  • 视频标签的 timeupdate 事件，当视频正在播放时就会触发

  • video 原生的全屏 API

    每个浏览器实现全屏的函数名不同，需要做兼容处理

    • fullscreenEnabled：浏览器是否支持全屏操作
    • fullscreenElement：当前是否存在全屏中的元素，没有返回 null 或者 undefined
    • requestFullscreen：请求进入全屏，这个过程可能会失败
    • exitFullscreen：取消全屏
    • onFullscreenchange：全屏状态发生变化出发
    • onFullscreenError：进入全屏失败的事件

  • video 事件

    • durationchange：总时长发生变化
    • ended：播放结束
    • timeupdate：currentTime 变化
    • progress：视频下载进度发生变化（缓存）
    • volumechange
    • ratechange

  • video 属性

    • currentTime：当前视频播放时间，可以赋值来改变视频的进度
    • duration：视频总时长
    • buffered：缓存的进度
    • playbackRate：播放速率，可读写

  • 鼠标事件

    • onmouseover：监听鼠标进入 dom
    • onmousemove：监听鼠标在 dom 中移动
    • onmouseleave：鼠标离开 dom

  • webpack

    • 给 devServer 添加 host 参数，可以允许外网访问，否则默认只能本地访问

  • css 样式

    • animation 的 forwards 属性

  • vue 的 props 的 type

    • HTMLVideoElement

  • 实现类似滑动滚轮的效果（重要）

    • 在移动端可以使用 touch 事件实现
      • touchstart
      • touchmove
      • touchend

  • 在 PC 端可以使用 mouse 事件实现

    • mousedown
    • mousemove
    • mouseup

  • 以上两种方法的原理相同

  • 事件对象 event

    • clientX
    • offsetX
    • pageX
    • layerX

  • 实现网页全屏（重要）

    • 原理很简单，给指定元素添加一下 class 即可

      1
      2
      3
      4
      5
      6
      7
      8
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 99999;

    • 让元素相对于窗口定位，并且称满整个窗口

    Mouse 事件

    mouseenter

    mouseleave

    mouseover

    mouseout

    mousedown

    mouseup

    mousemove

TODO:

  1. 完成 slider 拖动、点击跳转的功能(已完成)
  2. 完成播放器的样式优化(完成 70％)
  3. 实现网页全屏的功能(已完成)
  4. 实现位于屏幕显示播放状态的 icon(已完成)
  5. 实现音量调节功能(已完成)
  6. 优化音量进度条的显示效果(使用投机方法，暂时解决)
  7. 控制条的显示与隐藏使用动画效果(已完成)
  8. hover slider 时显示的 toast(已完成)
  9. slider 支持移动端
  10. 倍速的几种样式和功能(已完成)
  11. 实现进度、音量、倍速等的本地存储
  12. 添加 loading 效果
  13. 添加一些 video 标签加载完毕的钩子函数
  14. 音量调节有 bug,图标的切换等