构建HTML5 Web视频播放器时,它倾向于需要用户界面,服务跟踪质量,用户交互跟踪以及有时是广告跟踪。为了实现这一目标,需要解释HTML5 Media Event标准。
构建了多个网络视频播放器,并在进行了多个事件解释器的迭代之后,感觉并不正确。事物没有保留DRY。
重复打击时,做一些事情通常是一个好主意。
创建媒体事件过滤器
输入@eyevinn/media-event-filter,一种以某种方式解释HTML5媒体事件的过滤器。
此过滤器旨在提供一个可以在播放器引擎和本机浏览器播放之间使用的单一真实来源。
使用一个或多个播放器引擎,例如Shaka Player,HLS.js或dash.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的贡献者