跳到主要内容

video

  • src: 指定视频的播放地址

  • poster： 指定视频的封面 url

  • autoplay: 自动播放

  • loop：循环播放

  • controlslist

  • playsinline

  • controls

  • preload="metadata"

html
<video  />

常见的视频格式区别

  • 常见的视频格式有m3u8和mp4、flv

  • mp4适用于本地存储和离线播放，适合各种视频应用场景

  • m3u8是流媒体传输协议，适用于实时直播、点播和网络流媒体传输，特别适合在不同网络环境下进行视频流的适应性调整

  • flv文件可以实时边下载边播放，适用于网络直播、视频分享平台等场景

m3u8对比mp4的优势​

m3u8比mp4快n倍

  • m3u8支持分片加载
    • mp4文件播放在开始加载的时候会读取很大的文件信息，出现的情况就是卡顿很长时间才能播放，而m3u8分片则会瞬间读取整个视频文件信息，马上开始加载第一片ts视频文件播放，不管是开始播放还是拖拽播放的加载速度都比mp4快N倍
  • m3u8分段传输：M3U8 文件通常将视频内容分成多个小片段（通常为几秒钟的短片），这使得播放器可以快速开始播放第一段，而不需要等待整个视频下载完成

video尺寸比例问题

  • 16:9 是一个非常常见的视频宽高比，它被广泛用于电视、电影和许多在线视频平台上
    • 这里的9代表宽度，16代表高度
    • 适合大多数现代视频内容，包括高清电视和宽屏电影。
  • 4:3 这是传统的电视宽高比，也被称为标准屏幕宽高比（SDR）。它比16:9更宽，但高度更低。
    • 适合需要较高垂直空间的内容，如某些教育视频或文档
  • 1:1 这种宽高比通常被称为方形屏幕宽高比
    • 它意味着视频的宽度和高度相等，这在某些社交媒体平台上很常见

设置video保持宽高比​

  • video保持一个特定的宽高比，通常是16:9

offsetWidth: 获取容器的宽度 （包含内边距padding和外边距margin）

  • 增加一个配置aspectRatio，通过该属性配置，设置16:9、4:3等等比例
    • aspectRatio表示宽高比
js
export enum AspectRatioEnum {
  RATIO_16_9 = '16:9',
  RATIO_4_3 = '4:3',
  RATIO_1_1 = '1:1',
}

export const aspectRatioConfig = {
  [AspectRatioEnum.RATIO_16_9]: 9 / 16,
  [AspectRatioEnum.RATIO_4_3]: 3 / 4,
  [AspectRatioEnum.RATIO_1_1]: 1 / 1,
};

 const initPlayer = () => {
    player.value = new Player(playerConfig.value);
      // 播放器创建完成
        player.value.once(Events.COMPLETE, () => {
      if (containerRef.value) {
        // 保持一个特定的宽高比
        if (props.aspectRatio && Reflect.has(aspectRatioConfig, props.aspectRatio)) {
          const width =
            containerRef.value.offsetWidth * aspectRatioConfig[props.aspectRatio] + 'px';
          containerRef.value.style.width = width;
        }
      }
    });
 }

ts文件理解

  • ts文件是视频分片文件，ts文件是流式传输的，通过流媒体播放（HLS）
  • 播放器请求 .m3u8 文件，m3u8文件会列出所有.ts分段地址
  • 播放器按顺序加载 .ts 文件并播放

readyState理解

  • readyState是视频的当前就绪状态
类型描述
Number表示视频元素的就绪状态
  • 0 = HAVE_NOTHING - 没有视频是否准备好的信息
  • 1 = HAVE_METADATA - 视频的元数据已准备就绪
  • 2 = HAVE_CURRENT_DATA - 当前播放位置的数据可用，但没有足够的数据播放下一帧/毫秒
  • 3 = HAVE_FUTURE_DATA - 当前和至少下一帧的数据可用
  • 4 = HAVE_ENOUGH_DATA - 有足够的可用数据可供开始播放

video注意问题

  • 在移动端h5中，浏览器会对播放器video进行劫持接管，导致自定义的video标签不生效，被浏览器内置的播放器给劫持接管了
    • 解决办法：只能联系浏览器厂商加白名单
  • 使用canvas 播放视频
    • 使用canvas 遇到的坑：video 必须加 x5-video-player-type="h5" 属性，否则，在移动端就会卡死不能播放视频，个人认为是因为视频被接管的原因导致
  • 视频的宽高比，通常是16:9
  • 移动端，如果滑动保留上个视频的进度 但是swiper超过50个就卡
    • 可以只渲染三个swiperitem， 只渲染一个video
  • 浏览器对视频的解码是异步的，当视频完成解码解析后，就会触发seeked事件，在seeked事件中保证获取到正确的视频数据如画面帧

loadedmetadata事件 和 seeked事件

  • loadedmetadata 和 seeked 是前端在视频抽帧、封面生成、进度跳转控制等场景中最关键的两个事件

loadedmetadata​

  • 视频的元信息（metadata）已加载完成

    • 视频宽高（videoWidth / videoHeight）

    • 时长（duration）

    • 编码信息（videoTracks / audioTracks）

  • 此时浏览器还没有解码出具体的视频帧。

seeked 事件​

  • 浏览器已完成跳转到指定 currentTime，并成功解码并渲染出该时刻的帧
  • 视频画面已经更新到你设置的时间点，画面数据可用，可以 draw 到 canvas
  • 因此在seeked事件，可以保证获取视频的画面帧