ZWPlayer Basic Usage Guide

1. Import 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 of the file:


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

2. Create Player Container

Add a DIV element to the page to serve 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 show the video info button
optionButton	Boolean	false	Whether to show the video options button
snapshotButton	Boolean	false	Whether to show the video snapshot button
controlbar	Boolean	true	Whether to show 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.com/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 (like '#id') or a DOM element object.
Handling Non-existent Elements: If the specified element does not exist, ZWPlayer will attempt to create a default DIV element (640×360 pixels, located at the top-left of the page).
Control Bar: To hide the player control bar, set the controlbar parameter to false.
Autoplay: By default, the player will autoplay automatically. If you need manual control, please set autoplay to false.

7. Troubleshooting

Player Not Showing: Check if the element specified by the playerElm parameter exists.
Video Won’t Play: Confirm that the video file URL is accessible and the format is supported by the browser.

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