event

1. Overview

ZWPlayer provides an event callback mechanism, allowing developers to listen to player state changes and user interaction behaviors.

2. onmediaevent

Type: function
Description: Media event callback function, used to listen to player media state changes
Callback Function Prototype: function onmediaevent(event)
Parameters:

event: Event object, containing event type and related data

2.1 Event Types (event.type)

Event Type	Description
`play`	Triggered when playback starts or resumes
`playing`	Triggered when playback is in progress
`pause`	Triggered when playback is paused
`seeking`	Triggered when seek operation starts
`seeked`	Triggered when seek operation completes
`waiting`	Triggered when waiting for media data
`ended`	Triggered when media playback ends
`error`	Triggered when an error occurs

2.2 Usage Example

function onmediaevent(event) {
    switch (event.type) {
        case 'play':
            console.log('Playback started');
            break;
        case 'pause':
            console.log('Playback paused');
            break;
        case 'ended':
            console.log('Playback ended');
            break;
        case 'error':
            console.error('Playback error:');
            break;
    }
}

3. onready

Type: function
Description: Player initialization completion event callback
Callback Function Prototype: function onready()
Trigger Timing: Triggered when player creation is complete and ready for use

3.1 Usage Example

function onready() {
    console.log('Player initialization complete');
    // You can start operating the player here
}

4. Complete Example

4.1 Sample Code

<!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('Playback started');
                    break;
                case 'playing':
                    console.log('Playing');
                    break;
                case 'pause':
                    console.log('Playback paused');
                    break;
                case 'seeking':
                    console.log('Seeking');
                    break;
                case 'seeked':
                    console.log('Seek completed');
                    break;
                case 'waiting':
                    console.log('Waiting');
                    break;
                case 'ended':
                    console.log('Playback ended');
                    break;
                case 'error':
                    console.error('Playback error:');
                    break;
            }

        },
    };
    new ZWPlayer(info);
</script>
</body>
</html>

4.2 Notes

The onmediaevent callback function must be a valid JavaScript function
The event object in the event callback function contains detailed event information. It is recommended to use event.type for type determination
After the onready event is triggered, other methods and properties of the player can be safely called

Catalog Navigation