logo图片

事件

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 注意事项

  1. onmediaevent 回调函数必须为有效的 JavaScript 函数

  2. 事件回调函数中的 event 对象包含事件详细信息，建议通过 event.type 进行类型判断

  3. onready 事件触发后即可安全调用播放器的其他方法和属性

 

目录导航