zwplayer播放器
本文档由 zwplayer 提供

下载安装

1. html5方式安装

1.1 下载

最新版本v3.1.4下载地址： https://cdn.zwplayer.cn/v3.1.4/zwplayer.zip

下载后解压，将整个zwplayer文件夹上传到网站目录。

注意：

  • 上传整个zwplayer目录，目录名必须为zwplayer。

  • zwplayer 包含的文件全部为静态文件，需放置在 Web 服务器的公开静态资源目录（如 public 或 static），并确保通过 HTTP/HTTPS 可访问，无任何访问限制。

1.2 文件结构

zwplayer/                # zwplayer播放器根目录
  ├── css/               # 样式文件及相关资源文件
  ├── plugins/           # 内嵌插件
  ├── widgets/           # 界面部件
  └── zwplayer.js        # 播放器主文件

1.3 引入播放器

在 HTML 文件的 <head> 标签中引入 zwplayer.js。有两种方式：

  1. 本地引入（假设 zwplayer 文件夹位于 Web 根目录）：

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

  2. CDN 引入：

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

重要提示：

  • 不像其他播放器需要引入多个文件，比如css、js文件等，zwplayer 仅需引入 zwplayer.js一个文件，无需手动引入额外文件，简化开发者的引入和使用。

  • 播放器会根据需要动态加载相关资源，如播放 FLV 的视频流，zwplayer播放器在运行时会自动动态加载flv.js代码文件，从而提高页面加载速度。

1.4 使用方法

  1. 引入 zwplayer 主文件 zwplayer.js：如上所述。

  2. 创建播放器容器：在 HTML 中添加一个 <div> 作为播放器容器。

  3. 初始化播放器：通过全局 ZWPlayer 类创建一个或多个播放器实例。

示例代码

以下是最简单的 zwplayer 使用示例：

<!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>

参数说明

  • playerElm: player Element的简写，该参数的用途是为了定位播放器，提供一个div元素作为播放器的定位元素，播放器将在该元素内停靠，playerElm参数可以是一个div元素的ID，也可以直接传递一个div元素对象（通过document.getElementById或document.querySelector等函数获取的DOM对象）。

  • url: 表示播放器要播放的媒体URL或定义媒体URL的js对象，由于zwplayer功能非常强大，因此该url值的写法有许多种形式，具体参看 源地址url参数说明。

注意：

  • ZWPlayer 实例为纯 JavaScript 对象，非 DOM 对象，不可直接传递给 jQuery 或 Zepto等JS框架。

  • zwplayer对象拥有少数几个方法，让开发者调用来控制zwplayer。

  • 可在同一个H5网页里可以创建任意多个zwplayer对象，这些对象相互独立，不会产生内部数据引用等方面的任何冲突。

2. Vue项目安装

2.1 Vue 2.x 项目

  1. 安装Vue2接口包

npm install zwplayer-vue2x --save

我们也做了vue2接口的演示工程，您可以在以下仓库中找到：示例仓库地址：

2.2 Vue 3.x 项目

  1. 安装Vue3接口包

npm install --save zwplayervue3

我们也做了vue3接口的演示工程，您可以在以下仓库中找到：示例仓库地址：

2.3 注意事项

  • 安装Vue接口包前，请确保项目存在public目录

  • 安装成功后，public目录下会自动生成zwplayer核心库目录

  • 该目录必须随项目一起构建发布

目录导航