mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-27 17:51:20 -08:00
update docs
This commit is contained in:
Harvey Zack committed
1 parent
8b515906f5
commit
d696e817cf
17 files changed
+5006
-4
No files matched your search
@@ -0,0 +1,98 @@
|
||||
# 视频广告
|
||||
|
||||
## 演示
|
||||
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)
|
||||
|
||||
## 安装
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-ads
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-ads
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-ads
|
||||
```
|
||||
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-ads.js"></script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## CDN
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
autoSize: true,
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
plugins: [
|
||||
artplayerPluginAds({
|
||||
// html广告，假如是视频广告则忽略该值
|
||||
html: '<img src="/assets/sample/poster.jpg">',
|
||||
|
||||
// 视频广告的地址
|
||||
video: '/assets/sample/test1.mp4',
|
||||
|
||||
// 广告跳转网址，为空则不跳转
|
||||
url: 'http://artplayer.org',
|
||||
|
||||
// 必须观看的时长，期间不能被跳过，单位为秒
|
||||
// 当该值大于或等于totalDuration时，不能提前关闭广告
|
||||
// 当该值等于或小于0时，则随时都可以关闭广告
|
||||
playDuration: 5,
|
||||
|
||||
// 广告总时长，单位为秒
|
||||
totalDuration: 10,
|
||||
|
||||
// 视频广告是否默认静音
|
||||
muted: false,
|
||||
|
||||
// 多语言支持
|
||||
i18n: {
|
||||
close: '关闭广告',
|
||||
countdown: '%s秒',
|
||||
detail: '查看详情',
|
||||
canBeClosed: '%s秒后可关闭广告',
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
// ad is clicked
|
||||
art.on('artplayerPluginAds:click', (ads) => {
|
||||
console.info(ads);
|
||||
});
|
||||
|
||||
// Ad skipped
|
||||
art.on('artplayerPluginAds:skip', (ads) => {
|
||||
console.info(ads);
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
# 控制器皮肤
|
||||
|
||||
## 演示
|
||||
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-control/index.js&example=control)
|
||||
|
||||
## 安装
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-control
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-control
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-control
|
||||
```
|
||||
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-control.js"></script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## CDN
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-control/dist/artplayer-plugin-control.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-control/dist/artplayer-plugin-control.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-control/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js{7}
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
plugins: [
|
||||
artplayerPluginControl(),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## `enable`
|
||||
|
||||
- Type: `Getter/Setter`
|
||||
- Parameter: `Boolean`
|
||||
|
||||
是否启用新的控制器皮肤
|
||||
|
||||
<div className="run-code" data-libs="./uncompiled/artplayer-plugin-control/index.js">
|
||||
▶ Run Code
|
||||
</div>
|
||||
|
||||
```js
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: '/assets/sample/video.mp4',
|
||||
fullscreen: true,
|
||||
fullscreenWeb: true,
|
||||
controls: [
|
||||
{
|
||||
position: 'right',
|
||||
html: '<button type="button">Switch UI</button>',
|
||||
click: function () {
|
||||
const { enable } = art.plugins.artplayerPluginControl;
|
||||
art.plugins.artplayerPluginControl.enable = !enable;
|
||||
},
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
artplayerPluginControl(),
|
||||
],
|
||||
});
|
||||
```
|
||||
@@ -0,0 +1,41 @@
|
||||
# HLS 画质
|
||||
|
||||
## 演示
|
||||
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=https://cdnjs.cloudflare.com/ajax/libs/hls.js/8.0.0-beta.3/hls.min.js%0A./uncompiled/artplayer-plugin-hls-quality/index.js&example=hls.quality)
|
||||
|
||||
## 安装
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-hls-quality
|
||||
```
|
||||
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-hls-quality.js"></script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## CDN
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js
|
||||
```
|
||||
|
||||
:::
|
||||
@@ -0,0 +1,293 @@
|
||||
# Iframe 控制
|
||||
|
||||
## 说明
|
||||
|
||||
通过该插件，你可以轻松在 `index.html` 里控制跨域 `iframe.html` 页面里的播放器，如在 `index.html` 里通过代码控制 `iframe.html` 播放器的功能，或者获取 `iframe.html` 播放器的值
|
||||
|
||||
## 演示
|
||||
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-iframe/index.js&example=iframe)
|
||||
|
||||
## 安装
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [npm]
|
||||
npm install artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
```bash [yarn]
|
||||
yarn add artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
pnpm add artplayer-plugin-iframe
|
||||
```
|
||||
|
||||
```html [script]
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## `CDN`
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [jsdelivr.net]
|
||||
https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
|
||||
```
|
||||
|
||||
```bash [unpkg.com]
|
||||
https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 使用
|
||||
|
||||
::: code-group
|
||||
|
||||
```html [index.html]
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="iframe"></iframe>
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<script>
|
||||
const iframe = new ArtplayerPluginIframe({
|
||||
// Iframe element
|
||||
iframe: document.querySelector('#iframe'),
|
||||
// Iframe url
|
||||
url: 'path/to/iframe.html',
|
||||
});
|
||||
|
||||
// Send message to iframe
|
||||
iframe.commit(() => {
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```html [iframe.html]
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="artplayer-app" style="width: 100%; height: 100%;"></div>
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<script>
|
||||
// Inject scripts to receive messages from instances
|
||||
ArtplayerPluginIframe.inject();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## `index.html` 接口
|
||||
|
||||
### `commit`
|
||||
|
||||
从 `index.html` 将消息推送到 `iframe.html`，该函数将在 `iframe.html` 内部运行，同时它也能用于异步获取 `iframe.html` 里的值
|
||||
|
||||
```js
|
||||
iframe.commit(() => {
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
});
|
||||
});
|
||||
|
||||
iframe.commit(() => {
|
||||
art.seek = 5;
|
||||
});
|
||||
|
||||
// Get the value from the iframe.html
|
||||
(async function () {
|
||||
// Use the return keyword
|
||||
var currentTime = await iframe.commit(() => {
|
||||
return art.currentTime;
|
||||
});
|
||||
|
||||
// or use the resolve method
|
||||
var currentTime2 = await iframe.commit((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve(art.currentTime);
|
||||
}, 1000);
|
||||
});
|
||||
})();
|
||||
```
|
||||
|
||||
### `message`
|
||||
|
||||
在 `index.html` 接收来自 `iframe.html` 的消息
|
||||
|
||||
```js
|
||||
iframe.message((event) => {
|
||||
console.info(event);
|
||||
});
|
||||
```
|
||||
|
||||
### `destroy`
|
||||
|
||||
销毁后 `index.html` 无法与 `iframe.html` 通信
|
||||
|
||||
```js
|
||||
iframe.destroy();
|
||||
```
|
||||
|
||||
## `iframe.html` 接口
|
||||
|
||||
:::warning 提示
|
||||
|
||||
`iframe.html` 接口 只能运行在 `iframe.html` 里
|
||||
|
||||
:::
|
||||
|
||||
### `inject`
|
||||
|
||||
注入脚本，接收来自 `index.html` 的消息
|
||||
|
||||
```js
|
||||
ArtplayerPluginIframe.inject();
|
||||
```
|
||||
|
||||
### `postMessage`
|
||||
|
||||
将消息推送到 `index.html`
|
||||
|
||||
```js
|
||||
iframe.message((event) => {
|
||||
console.info(event);
|
||||
});
|
||||
|
||||
iframe.commit(() => {
|
||||
ArtplayerPluginIframe.postMessage({
|
||||
type: 'currentTime',
|
||||
data: art.currentTime,
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 例子
|
||||
|
||||
最常遇到的问题是，播放器在 `iframe.html` 里进行网页全屏，但在 `index.html` 是不生效的，这时候只要监听 `iframe.html` 里的 `fullscreenWeb` 事件并通知到 `index.html` 即可
|
||||
|
||||
::: code-group
|
||||
|
||||
```html [index.html]
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="iframe"></iframe>
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<style>
|
||||
.fullscreenWeb {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const iframe = new ArtplayerPluginIframe({
|
||||
iframe: document.querySelector('#iframe'),
|
||||
url: 'path/to/iframe.html',
|
||||
});
|
||||
|
||||
iframe.message(({ type, data }) => {
|
||||
switch (type) {
|
||||
case 'fullscreenWeb':
|
||||
if (data) {
|
||||
$iframe.classList.add('fullscreenWeb');
|
||||
} else {
|
||||
$iframe.classList.remove('fullscreenWeb');
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
iframe.commit(() => {
|
||||
var art = new Artplayer({
|
||||
container: '.artplayer-app',
|
||||
url: 'path/to/video.mp4',
|
||||
});
|
||||
|
||||
art.on('fullscreenWeb', (state) => {
|
||||
ArtplayerPluginIframe.postMessage({
|
||||
type: 'fullscreenWeb',
|
||||
data: state,
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```html [iframe.html]
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>ArtPlayer</title>
|
||||
<meta charset="UTF-8" />
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="artplayer-app" style="width: 100%; height: 100%;"></div>
|
||||
<script src="path/to/artplayer.js"></script>
|
||||
<script src="path/to/artplayer-plugin-iframe.js"></script>
|
||||
<script>
|
||||
ArtplayerPluginIframe.inject();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
:::
|
||||
Reference in new issue
Block a user