download and install

1. HTML5 Installation

1.1 Download

Latest Version v3.1.5 Download: https://cdn.zwplayer.cn/v3.1.5/zwplayer.zip

After downloading, extract the files and upload the entire zwplayer folder to your website directory.

Notes:

  • Upload the entire zwplayer directory; the directory name must be zwplayer.

  • All files in zwplayer are static files and should be placed in the public static resource directory of the web server (such as public or static), ensuring they are accessible via HTTP/HTTPS without any access restrictions.

1.2 File Structure

zwplayer/                # zwplayer root directory
  ├── css/               # Style files and related resources
  ├── plugins/           # Embedded plugins
  ├── widgets/           # UI components
  └── zwplayer.js        # Main player file

1.3 Include the Player

Include zwplayer.js in the <head> tag of your HTML file. There are two methods:

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

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

  2. CDN Include:

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

Important Notes:

  • Unlike other players that require multiple files such as CSS and JS, zwplayer only requires including the zwplayer.js file. No additional files need to be manually included, simplifying the inclusion and usage for developers.

  • The player will dynamically load related resources as needed. For example, when playing FLV video streams, the zwplayer player will automatically load the flv.js code file at runtime, thereby improving page loading speed.

1.4 Usage

  1. Include the zwplayer main file zwplayer.js: As described above.

  2. Create a Player Container: Add a <div> in your HTML as the player container.

  3. Initialize the Player: Create one or more player instances through the global ZWPlayer class.

Example Code

The following is the simplest zwplayer usage example:

<!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"></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: Short for player Element. The purpose of this parameter is to position the player by providing a div element as the anchor element. The player will dock within this element. The playerElm parameter can be the ID of a div element, or you can directly pass a div element object (DOM object obtained through functions like document.getElementById or document.querySelector).

  • url: Represents the media URL to be played by the player, or a JS object defining the media URL. Since zwplayer is very powerful, there are many forms for writing this url value. For details, see Source URL Parameter Description.

Notes:

  • 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 for developers to call 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 in internal data references.

2. Vue Project Installation

2.1 Vue 2.x Project

  1. Install 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 at the following repositories: Example Repository Address:

2.2 Vue 3.x Project

  1. Install Vue 3 Interface Package

npm install --save zwplayervue3

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

2.3 Notes

  • Before installing the Vue interface package, please ensure the project has a public directory

  • 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

 

Catalog Navigation