Appearance
快速开始
本指南将帮助您快速上手 QiuVideo 播放器。
前提条件
在开始之前，请确保您的环境中已满足以下要求：
- 现代Web浏览器（Chrome、Firefox、Safari、Edge最新版本）
- 基本的HTML、CSS和JavaScript知识
基本使用
方法一：直接通过HTML标签使用
最简单的方式是直接在HTML中使用<qiu-video-player>标签：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QiuVideo 快速开始</title>
<script src="path/to/qiu-video.min.js"></script>
</head>
<body>
<div style="width: 800px; margin: 0 auto;">
<qiu-video-player
url="path/to/your/video.mp4"
poster="path/to/poster.jpg"
controls="true"
></qiu-video-player>
</div>
</body>
</html>
方法二：使用JavaScript API
通过JavaScript API初始化播放器，提供更灵活的配置选项：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QiuVideo 快速开始</title>
<script src="path/to/qiu-video.min.js"></script>
</head>
<body>
<div id="player-container" style="width: 800px; margin: 0 auto;"></div>
<script>
// 方法1：工厂函数方式
const player1 = QiuVideo({
container: '#player-container',
url: 'path/to/your/video.mp4',
poster: 'path/to/poster.jpg',
autoplay: false,
volume: 0.7
});
// 方法2：链式调用方式
const player2 = QiuVideo.create('#player-container')
.src('path/to/your/video.mp4')
.autoplay(false)
.volume(0.7)
.on('play', () => console.log('视频开始播放'))
.mount();
</script>
</body>
</html>
播放直播流
QiuVideo支持播放HLS和FLV格式的直播流：
html
<!-- 播放HLS直播流 -->
<qiu-video-player
url="https://example.com/stream/index.m3u8"
live="true"
stream-type="hls"
></qiu-video-player>
<!-- 播放FLV直播流 -->
<qiu-video-player
url="https://example.com/stream/live.flv"
live="true"
stream-type="flv"
></qiu-video-player>
常见操作
javascript
// 播放视频
player.play();
// 暂停视频
player.pause();
// 设置音量（0.0-1.0）
player.volume(0.5);
// 跳转到指定时间点（秒）
player.seek(30);
// 获取当前播放状态
const isPlaying = player.isPlaying;
// 监听事件
player.addEventListener('play', () => console.log('播放开始'));
player.addEventListener('pause', () => console.log('播放暂停'));
player.addEventListener('ended', () => console.log('播放结束'));