Basic Usage

1. Include Method

First, you need to include the zwplayer JavaScript file in the HTML head:

<script type="text/javascript" charset="utf-8" src="/zwplayer/zwplayer.js"></script>

Or include the CDN version:

<script type="text/javascript" charset="utf-8" src="https://cdn.zwplayer.cn/v3/zwplayer/zwplayer.js"></script>

2. Create Player Container

Add a DIV element to the page as the player container:

<div id="mse" style="width: 800px; height: 450px;margin: 0 auto;"></div>

3. Initialize Player

var info = {
    playerElm: 'mse',
    url: 'http://example.com/video.mp4',
    infoButton: true,
    optionButton: true,
    snapshotButton: true,
    controlbar: true,
    autoplay: true,
};
new ZWPlayer(info);

4. Configuration Parameter Description

Parameter	Type	Default	Description
playerElm	String or Element	-	Player container element or selector
url	String or Object	-	URL address of the video file
infoButton	Boolean	false	Whether to display the video info button
optionButton	Boolean	false	Whether to display the video options button
snapshotButton	Boolean	false	Whether to display the video snapshot button
controlbar	Boolean	true	Whether to display the video control bar
autoplay	Boolean	true	Whether to autoplay the video

5. Complete Example 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: 'http://example.com/video.mp4',
        infoButton: true,
        optionButton: true,
        snapshotButton: true,
        controlbar: true,
        autoplay: true,
    };
    new ZWPlayer(info);
</script>
</body>
</html>

6. Notes

Container Element: The playerElm parameter can be a selector string (such as '#id') or a DOM element object
Non-existent Element Handling: If the specified element does not exist, ZWPlayer will attempt to create a default DIV element (640×360 pixels, positioned at the top-left corner of the page)
Control Bar: To hide the player control bar, set the controlbar parameter to false
Autoplay: By default, the player will autoplay; to manually control playback, set autoplay to false

7. Troubleshooting

Player Not Displaying: Check if the element specified by the playerElm parameter exists
Video Cannot Play: Confirm that the video file URL is accessible and the format is supported by the browser

With the above instructions, you can quickly get started with the zwplayer player and embed video playback functionality in your web pages.

Catalog Navigation