如何用Vue实现一个支持长尾关键词搜索的视频播放器？

本文共计929个文字，预计阅读时间需要4分钟。

当现有video播放器无法满足需求时，需要自行对video进行封装。video事件+loadstart：在视频开始加载时触发，给currentTime赋值（历史播放记录60秒）。durationchange：当信息已加载或改变时，视频时长更新。

当现有video播放器不能满足需求时，需要自己对video进行封装。

video事件

• loadstart: 在视频开始加载时触发，给currentTime赋值(历史播放记录或0)。
• durationchange: 元信息已载入或已改变，视频的长度发生了改变。获取到视频长度(duration，并给currentTime赋值(历史播放记录或0))。
• playing: 在视频开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
• pause: 播放暂停时触发。
• timeupdate: currentTime改变, 更新播放进度。处理播放进度条
• seeked: 指定播放位置
• waiting: 缓冲
• ended: 播放结束, 重置状态
• WeixinJSBridgeReady: 在微信中使用video，需要监听weixinJSBridgeReady事件, 在回调函数里执行play()命令。

直播协议

HLS(HTTP Live Streaming)由Apple提出的直播流协议。IOS和高版本Android都支持HLS。HLS主要由.m3u8和.ts两种播放文件。HLS具有高兼容性，高可扩展性，但会直播延时。