事件
1. 概述
ZWPlayer 播放器提供事件回调机制,允许开发者监听播放器的状态变化和用户交互行为。
2. onmediaevent
类型:
function
说明: 媒体事件回调函数,用于监听播放器媒体状态变化
回调函数原型:
function onmediaevent(event)
参数:
event
: 事件对象,包含事件类型和相关数据
2.1 事件类型 (event.type)
事件类型 | 说明 |
---|---|
play | 播放开始或恢复时触发 |
playing | 正在播放时触发 |
pause | 播放暂停时触发 |
seeking | 跳转操作开始时触发 |
seeked | 跳转操作完成时触发 |
waiting | 正在等待媒体数据时触发 |
ended | 媒体播放结束时触发 |
error | 发生错误时触发 |
2.2 使用示例
function onmediaevent(event) { switch (event.type) { case 'play': console.log('播放开始'); break; case 'pause': console.log('播放暂停'); break; case 'ended': console.log('播放结束'); break; case 'error': console.error('播放错误:'); break; } }
3. onready
类型:
function
说明: 播放器初始化完成事件回调
回调函数原型:
function onready()
触发时机: 播放器创建完成并准备好使用时触发
3.1 使用示例
function onready() { console.log('播放器初始化完成'); // 可以在此处开始操作播放器 }
4. 完整示例
4.1 示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.cn/v3/zwplayer/zwplayer.js"></script> </head> <body> <div id="mse" style="width: 800px; height: 450px; margin: 0 auto;"></div> <script type="text/javascript"> var info = { playerElm: 'mse', url: 'https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4', infoButton: true, optionButton: true, snapshotButton: true, controlbar: true, autoplay: true, onready: function () { console.log("Player onready"); }, onmediaevent: function (event) { console.log(event) switch (event.type) { case 'play': console.log('播放开始'); break; case 'playing': console.log('正在播放'); break; case 'pause': console.log('播放暂停'); break; case 'seeking': console.log('正在 seek'); break; case 'seeked': console.log('seek 结束'); break; case 'waiting': console.log('正在等待'); break; case 'ended': console.log('播放结束'); break; case 'error': console.error('播放错误:'); break; } }, }; new ZWPlayer(info); </script> </body> </html>
4.2 注意事项
onmediaevent
回调函数必须为有效的 JavaScript 函数事件回调函数中的
event
对象包含事件详细信息,建议通过event.type
进行类型判断onready
事件触发后即可安全调用播放器的其他方法和属性
目录导航