基础使用

1. 引入方法

首先需要在 HTML 头部引入 zwplayer 的 JavaScript 文件：

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

或者引入 CDN 版本的文件：

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

2. 创建播放器容器

在页面中添加一个 DIV 元素作为播放器容器：

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

3. 初始化播放器

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

4. 配置参数说明

参数	类型	默认值	说明
playerElm	String 或 Element	-	播放器容器元素或选择器
url	String 或 Object	-	视频文件的URL地址
infoButton	Boolean	false	是否显示视频信息按钮
optionButton	Boolean	false	是否显示视频选项按钮
snapshotButton	Boolean	false	是否显示视频截图按钮
controlbar	Boolean	true	是否显示视频控制条
autoplay	Boolean	true	是否自动播放视频

5. 完整示例代码

<!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. 注意事项

容器元素：playerElm 参数可以是一个选择器字符串（如 '#id'）或 DOM 元素对象
元素不存在处理：如果指定的元素不存在，ZWPlayer 会尝试创建一个默认的 DIV 元素（640×360 像素，位于页面左上角）
控制条：如需隐藏播放器控制条，将 controlbar 参数设置为 false
自动播放：默认情况下播放器会自动播放，如需手动控制播放，请将 autoplay 设置为 false

7. 故障排除

播放器不显示：检查 playerElm 参数指定的元素是否存在
视频无法播放：确认视频文件URL可访问，且格式受浏览器支持

通过以上说明，您可以快速上手使用 zwplayer 播放器，在网页中嵌入视频播放功能。

目录导航