解释HTML5视频事件
#javascript #typescript #流媒体 #html5video

构建HTML5 Web视频播放器时,它倾向于需要用户界面,服务跟踪质量,用户交互跟踪以及有时是广告跟踪。为了实现这一目标,需要解释HTML5 Media Event标准。

构建了多个网络视频播放器,并在进行了多个事件解释器的迭代之后,感觉并不正确。事物没有保留DRY

重复打击时,做一些事情通常是一个好主意。

创建媒体事件过滤器

输入@eyevinn/media-event-filter,一种以某种方式解释HTML5媒体事件的过滤器。

此过滤器旨在提供一个可以在播放器引擎和本机浏览器播放之间使用的单一真实来源。

使用一个或多个播放器引擎,例如Shaka PlayerHLS.jsdash.js,该过滤器将输出标准化的事件序列。它这样做的情况不依赖于播放器引擎输出的事件,为视频播放状态更新提供了一个单个播放器的真实来源。

示例实现

import {
  getMediaEventFilter,
  FilteredMediaEvent,
} from "@eyevinn/media-event-filter";

const videoElement = document.createElement("video");

const mediaEventFilter = getMediaEventFilter({
  videoElement,
  callback: (event: FilteredMediaEvent) => {
    switch (event) {
      case FilteredMediaEvent.LOADED:
        // handle loaded
        break;
      case FilteredMediaEvent.BUFFERING:
        // handle buffering
        break;
      case FilteredMediaEvent.BUFFERED:
      // handle buffered
      // ...
      default:
        break;
    }
  },
});

// Create a player, using your engine of choice
const player = createPlayer(videoElement);

// Load a manifest and play
player.load(url).then(player.play);

// Call when done
mediaEventFilter.teardown();

生产准备

虽然最近制作过滤器开源,但已进行了多年的战斗测试。在数百万次播放会话中,使用过滤器验证了多个第三方跟踪系统。

事件序列

序列遵循Eyevinn Player Analytics Specification,该序列直接映射到许多流行的跟踪服务提供商SDK。

示例事件序列比较,使用<video autoplay>与shaka播放器在Firefox中,不包括timeupdate

本地 过滤 评论
ratechange Shaka将播放率设置为0,以控制缓冲
进度
durationChange
调整大小
加载
ratechange
进度
LoadedData
canplay
Play
canplaythrough 加载 视频准备开始播放
视频正在播放,由于自动播放而缺少播放事件
进度
...
进度
暂停 暂停 手动暂停
进度
寻求 寻求 暂停时寻求
ratechange Shaka将播放率设置为0,以控制缓冲
Play Play 在寻求期间请求的播放
等待
进度
进度
进度
寻求
canplay
canplaythrough 视频元素认为它可以开始播放,但是播放率为0
进度
ratechange 寻求 Shaka将播放率返回正常
视频在上一个暂停之后再次播放
进度
进度
暂停 暂停
进度
Play Play
进度
进度
寻求 寻求 在玩时寻找
等待
ratechange
进度
进度
寻求
canplay
进度
canplaythrough
进度
ratechange 寻求 搜索完成,视频滚动
进度
进度
进度
进度
ratechange 缓冲 空心,Shaka将Plodackrate设置为0
进度
进度
进度
canplaythrough 视频元素认为它可以开始播放,但是播放率为0
进度
ratechange 缓冲 Shaka将播放率返回正常
进度
...
进度
寻求 寻求
等待
ratechange
进度
...
进度
寻求
canplay
canplaythrough
进度
ratechange 寻求
进度
进度
进度
durationChange
进度
寻求 寻求 在缓冲区内寻求,没有ratechange
等待
寻求 寻求 寻求完成
canplay
canplaythrough
暂停 暂停
结束 结束 流到达的流
倒空

npm中下载它。

github的贡献者