Merge pull request #209 from zhw2590582/ads-option

Ads option

packages/artplayer-document/docs/en/Questions/How to add video ads.md

@@ -0,0 +1,78 @@
+---
+title: How to add video ads
+sidebar_position: 5
+---
+
+Video ads play before main video playback, support multiple video ads
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+	container: '.artplayer-app',
+	url: 'https://artplayer.org/assets/sample/video.mp4',
+	muted: true,
+	autoSize: true,
+	autoplay: true,
+	ads: [
+		{
+			url: '/assets/sample/test1.mp4'
+		},
+		{
+			url: '/assets/sample/test2.webm'
+		},
+	],
+	controls: [
+		{
+			position: 'right',
+			html: 'Skip The Ads',
+			click: function () {
+				// Skip The Ads
+				art.ads.end();
+			},
+		},
+	],
+	layers: [
+		{
+			html: 'Skip The Ads',
+			style: {
+				position: 'absolute',
+				top: '20px',
+				right: '20px',
+			},
+			click: function () {
+				// Skip The Ads
+				art.ads.end();
+			},
+		},
+	],
+});
+
+// Triggers when each video advertisement is played
+art.on('ads:start', (item) => {
+	console.info('Ads is playing: ' + item.url);
+});
+
+// Triggers when all video advertisements are end
+art.on('ads:end', () => {
+	console.info('Ads is end');
+});
+
+// Current advertising index
+console.info(art.ads.index);
+
+// Whether all the advertisements are ended
+console.info(art.ads.isEnd);
+
+// Whether the advertisement is playing
+console.info(art.ads.playing);
+
+// The object of the prev advertisement
+console.info(art.ads.prev);
+
+// The object of the current advertisement
+console.info(art.ads.current);
+
+// The object of the next advertisement
+console.info(art.ads.next);
+```

packages/artplayer-document/docs/zh-cn/Questions/How to add video ads.md

@@ -0,0 +1,78 @@
+---
+title: 如何添加视频广告
+sidebar_position: 5
+---
+
+视频广告存在于正式视频播放之前，支持多个视频广告
+
+<div className="run-code">▶ Run Code</div>
+
+```js
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: 'https://artplayer.org/assets/sample/video.mp4',
+    muted: true,
+    autoSize: true,
+    autoplay: true,
+    ads: [
+        {
+            url: '/assets/sample/test1.mp4'
+        },
+        {
+            url: '/assets/sample/test2.webm'
+        },
+    ],
+    controls: [
+        {
+            position: 'right',
+            html: '跳过广告',
+            click: function () {
+                // 跳过广告
+                art.ads.end();
+            },
+        },
+    ],
+    layers: [
+        {
+            html: '跳过广告',
+            style: {
+                position: 'absolute',
+                top: '20px',
+                right: '20px',
+            },
+            click: function () {
+                // 跳过广告
+                art.ads.end();
+            },
+        },
+    ],
+});
+
+// 当每个视频广告播放时触发
+art.on('ads:start', (item) => {
+    console.info('Ads is playing: ' + item.url);
+});
+
+// 当全部视频广告播放完成
+art.on('ads:end', () => {
+    console.info('Ads is end');
+});
+
+// 当前广告的下标
+console.info(art.ads.index);
+
+// 广告是否已经结束
+console.info(art.ads.isEnd);
+
+// 广告是否正在播放
+console.info(art.ads.playing);
+
+// 上一个广告的对象
+console.info(art.ads.prev);
+
+// 当前广告的对象
+console.info(art.ads.current);
+
+// 下一个广告的对象
+console.info(art.ads.next);
+```