中文
Docs / Download & Install ZWPlayer

ZWPlayer Player - Download, Installation, and Usage Guide

1. HTML5 Installation

1.1 Download

Download link for the latest version v3.3.0: https://cdn.zwplayer.com/v3.3.0/zwplayer.zip

After downloading, unzip the file and upload the entire zwplayer folder to your website directory.

Note:

  • Upload the entire zwplayer directory; the directory name must be zwplayer.
  • All files contained in zwplayer are static files. They must be placed in the web server’s public static resource directory (such as public or static), and must be accessible via HTTP/HTTPS without any access restrictions.

1.2 File Structure

zwplayer/                # Root directory of the zwplayer player
  ├── css/               # Style files and related resource files
  ├── plugins/           # Embedded plugins
  ├── widgets/           # Interface widgets
  └── zwplayer.js        # Main player file

1.3 Including the Player

Include zwplayer.js in the <head> tag of your HTML file. There are two ways to do this:

  1. Local inclusion (assuming the zwplayer folder is located in the web root):

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

  2. CDN inclusion:

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

Important Note:

  • Unlike other players that require including multiple files, such as CSS and JS files, zwplayer only requires including the single file zwplayer.js. There is no need to manually include additional files, which simplifies integration and usage for developers.
  • The player will dynamically load related resources as needed. For example, when playing FLV video streams, the zwplayer will automatically load the flv.js code file at runtime, thereby improving page load speed.

1.4 Usage

  1. Include the main zwplayer file zwplayer.js: As described above.
  2. Create a player container: Add a <div> in your HTML to serve as the player container.
  3. Initialize the player: Create one or more player instances using the global ZWPlayer class.

Example Code

The following is the simplest usage example for zwplayer:

<!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"></div>
<script type="text/javascript">
    var info = {
        playerElm: 'mse',
        url: 'https://d2zihajmogu5jn.cloudfront.net/elephantsdream/ed_hd.mp4'
    };
    var player1 = new ZWPlayer(info);
</script>
</body>
</html>

Parameter Description

  • playerElm: Abbreviation for player Element. The purpose of this parameter is to locate the player; provide a div element as the positioning element for the player. The player will dock within this element. The playerElm parameter can be the ID of a div element, or it can directly accept a div element object (a DOM object obtained via functions like document.getElementById or document.querySelector).
  • url: Represents the media URL to be played by the player, or a JavaScript object defining the media URL. Since zwplayer is very powerful, there are many forms of writing for this url value. For details, please refer to Source URL parameter description.

Note:

  • The ZWPlayer instance is a pure JavaScript object, not a DOM object, and cannot be directly passed to JS frameworks like jQuery or Zepto.
  • The zwplayer object has a few methods that allow developers to control zwplayer.
  • You can create any number of zwplayer objects in the same H5 webpage. These objects are independent of each other and will not cause any conflicts regarding internal data references, etc.

2. Vue Project Installation

2.1 Vue 2.x Project

  1. Install the Vue 2 interface package
npm install zwplayer-vue2x --save

We have also created a demo project for the Vue 2 interface, which you can find in the following repositories: Example Repository Addresses:

2.2 Vue 3.x Project

  1. Install the Vue 3 interface package
npm install --save zwplayervue3

We have also created a demo project for the Vue 3 interface, which you can find in the following repositories: Example Repository Addresses:

2.3 Precautions

  • Before installing the Vue interface package, please ensure that a public directory exists in your project.
  • After successful installation, the zwplayer core library directory will be automatically generated under the public directory.
  • This directory must be built and published along with the project.
Previous Features Next Basic Usage