diff --git a/docs/assets/example/ads.js b/docs/assets/example/ads.js
index e0fd75ea5..336127306 100644
--- a/docs/assets/example/ads.js
+++ b/docs/assets/example/ads.js
@@ -6,28 +6,22 @@ var art = new Artplayer({
fullscreenWeb: true,
plugins: [
artplayerPluginAds({
- // html广告，假如存在视频广告则忽略该值
- html: '123456',
+ // html广告，假如是视频广告则忽略该值
+ html: '
',
// 视频广告
- video: '',
+ // video: '/assets/sample/test1.mp4',
// 广告跳转网址，为空则不跳转
url: 'http://artplayer.org',
// 必须观看的时长，期间不能被跳过
- playDuration: 0,
+ playDuration: 5,
// 广告总时长，假如是视频广告则自动获取
- totalDuration: 0,
+ totalDuration: 10,
- // 是否允许广告全屏
- fullscreen: true,
-
- // 是否允许视频广告静音
- muted: true,
-
- // 多语言支持
+ // 多语言
i18n: {
//
},
diff --git a/docs/uncompiled/artplayer-plugin-ads/index.js b/docs/uncompiled/artplayer-plugin-ads/index.js
index bf88d4183..2a990edea 100644
--- a/docs/uncompiled/artplayer-plugin-ads/index.js
+++ b/docs/uncompiled/artplayer-plugin-ads/index.js
@@ -149,20 +149,36 @@ var _styleLess = require("bundle-text:./style.less");
var _styleLessDefault = parcelHelpers.interopDefault(_styleLess);
function artplayerPluginAds(option) {
return (art)=>{
- const { constructor: { utils: { append } , } , template: { $player } , } = art;
+ const { template: { $player } , constructor: { utils: { append , setStyle } , } , } = art;
+ let isEnd = false;
+ let $ads = null;
+ let $timer = null;
+ let time = 0;
+ let timer = null;
function skip() {
- //
+ isEnd = true;
+ art.play();
+ if (option.video) $ads.pause();
+ setStyle(art.template.$ads, "display", "none");
+ art.emit("artplayerPluginAds:skip", option);
}
- function toggleFullscreen() {
- //
+ function play() {
+ if (isEnd) return;
+ timer = setTimeout(()=>{
+ time += 1;
+ $timer.innerHTML = time;
+ if (time >= option.totalDuration) skip();
+ else play();
+ }, 1000);
}
- function toggleMuted() {
- //
+ function pause() {
+ if (isEnd) return;
+ clearTimeout(timer);
}
function show() {
art.template.$ads = append($player, '');
- const html = option.video ? `` : option.html;
- const $ads = append(art.template.$ads, html);
+ $ads = append(art.template.$ads, option.video ? `` : `${option.html}
`);
+ $timer = append(art.template.$ads, '');
art.proxy($ads, "click", ()=>{
if (option.url) window.open(option.url);
art.emit("artplayerPluginAds:click", option);
@@ -171,14 +187,24 @@ function artplayerPluginAds(option) {
}
art.on("ready", ()=>{
art.once("play", ()=>{
+ show();
art.pause();
- const $ads = show();
- const isVideo = $ads instanceof HTMLVideoElement;
+ if (option.video) {
+ art.proxy($ads, "ended", skip);
+ art.proxy($ads, "error", skip);
+ art.proxy($ads, "loadedmetadata", ()=>{
+ play();
+ $ads.play();
+ if ($ads.duration && $ads.duration !== Infinity) option.totalDuration = $ads.duration;
+ });
+ } else play();
});
});
return {
name: "artplayerPluginAds",
- skip
+ skip,
+ pause,
+ play
};
};
}
@@ -227,7 +253,7 @@ exports.export = function(dest, destName, get) {
};
},{}],"1ZB0H":[function(require,module,exports) {
-module.exports = ".artplayer-plugin-ads {\n z-index: 150;\n width: 100%;\n height: 100%;\n color: #fff;\n background-color: #000;\n justify-content: center;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n width: 100%;\n height: 100%;\n}\n\n";
+module.exports = ".artplayer-plugin-ads {\n z-index: 150;\n width: 100%;\n height: 100%;\n color: #fff;\n background-color: #000;\n position: absolute;\n inset: 0;\n overflow: hidden;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-html {\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: flex;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-video {\n width: 100%;\n height: 100%;\n}\n\n.artplayer-plugin-ads .artplayer-plugin-ads-timer {\n position: absolute;\n top: 20px;\n right: 20px;\n}\n\n";
},{}]},["gEVO5"], "gEVO5", "parcelRequirea5da")
diff --git a/docs/uncompiled/artplayer-plugin-ads/index.js.map b/docs/uncompiled/artplayer-plugin-ads/index.js.map
index 30f2b8486..d5d37a645 100644
--- a/docs/uncompiled/artplayer-plugin-ads/index.js.map
+++ b/docs/uncompiled/artplayer-plugin-ads/index.js.map
@@ -1 +1 @@
-{"mappings":"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","sources":["src/index.js","../../node_modules/@parcel/transformer-js/src/esmodule-helpers.js","../../node_modules/@parcel/runtime-js/lib/bundles/runtime-845a50df90dd29ef.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginAds(option) {\n return (art) => {\n const {\n constructor: {\n utils: { append },\n },\n template: { $player },\n } = art;\n\n function skip() {\n //\n }\n\n function toggleFullscreen() {\n //\n }\n\n function toggleMuted() {\n //\n }\n\n function show() {\n art.template.$ads = append($player, '');\n\n const html = option.video\n ? ``\n : option.html;\n\n const $ads = append(art.template.$ads, html);\n\n art.proxy($ads, 'click', () => {\n if (option.url) window.open(option.url);\n art.emit('artplayerPluginAds:click', option);\n });\n\n return $ads;\n }\n\n art.on('ready', () => {\n art.once('play', () => {\n art.pause();\n const $ads = show();\n const isVideo = $ads instanceof HTMLVideoElement;\n });\n });\n\n return {\n name: 'artplayerPluginAds',\n skip,\n };\n };\n}\n\nartplayerPluginAds.env = process.env.NODE_ENV;\nartplayerPluginAds.version = process.env.APP_VER;\nartplayerPluginAds.build = process.env.BUILD_DATE;\n\nif (typeof document !== 'undefined') {\n if (!document.getElementById('artplayer-plugin-ads')) {\n const $style = document.createElement('style');\n $style.id = 'artplayer-plugin-ads';\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginAds'] = artplayerPluginAds;\n}\n","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n","module.exports = \"40889a184827c504\";"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../packages/artplayer-plugin-ads/"}
\ No newline at end of file
+{"mappings":"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","sources":["src/index.js","../../node_modules/@parcel/transformer-js/src/esmodule-helpers.js","../../node_modules/@parcel/runtime-js/lib/bundles/runtime-845a50df90dd29ef.js"],"sourcesContent":["import style from 'bundle-text:./style.less';\n\nexport default function artplayerPluginAds(option) {\n return (art) => {\n const {\n template: { $player },\n constructor: {\n utils: { append, setStyle },\n },\n } = art;\n\n let isEnd = false;\n let $ads = null;\n let $timer = null;\n\n let time = 0;\n let timer = null;\n\n function skip() {\n isEnd = true;\n art.play();\n if (option.video) $ads.pause();\n setStyle(art.template.$ads, 'display', 'none');\n art.emit('artplayerPluginAds:skip', option);\n }\n\n function play() {\n if (isEnd) return;\n timer = setTimeout(() => {\n time += 1;\n $timer.innerHTML = time;\n if (time >= option.totalDuration) {\n skip();\n } else {\n play();\n }\n }, 1000);\n }\n\n function pause() {\n if (isEnd) return;\n clearTimeout(timer);\n }\n\n function show() {\n art.template.$ads = append($player, '');\n\n $ads = append(\n art.template.$ads,\n option.video\n ? ``\n : `${option.html}
`,\n );\n\n $timer = append(art.template.$ads, '');\n\n art.proxy($ads, 'click', () => {\n if (option.url) window.open(option.url);\n art.emit('artplayerPluginAds:click', option);\n });\n\n return $ads;\n }\n\n art.on('ready', () => {\n art.once('play', () => {\n show();\n art.pause();\n if (option.video) {\n art.proxy($ads, 'ended', skip);\n art.proxy($ads, 'error', skip);\n art.proxy($ads, 'loadedmetadata', () => {\n play();\n $ads.play();\n if ($ads.duration && $ads.duration !== Infinity) {\n option.totalDuration = $ads.duration;\n }\n });\n } else {\n play();\n }\n });\n });\n\n return {\n name: 'artplayerPluginAds',\n skip,\n pause,\n play,\n };\n };\n}\n\nartplayerPluginAds.env = process.env.NODE_ENV;\nartplayerPluginAds.version = process.env.APP_VER;\nartplayerPluginAds.build = process.env.BUILD_DATE;\n\nif (typeof document !== 'undefined') {\n if (!document.getElementById('artplayer-plugin-ads')) {\n const $style = document.createElement('style');\n $style.id = 'artplayer-plugin-ads';\n $style.textContent = style;\n document.head.appendChild($style);\n }\n}\n\nif (typeof window !== 'undefined') {\n window['artplayerPluginAds'] = artplayerPluginAds;\n}\n","exports.interopDefault = function (a) {\n return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n Object.keys(source).forEach(function (key) {\n if (key === 'default' || key === '__esModule' || dest.hasOwnProperty(key)) {\n return;\n }\n\n Object.defineProperty(dest, key, {\n enumerable: true,\n get: function () {\n return source[key];\n },\n });\n });\n\n return dest;\n};\n\nexports.export = function (dest, destName, get) {\n Object.defineProperty(dest, destName, {\n enumerable: true,\n get: get,\n });\n};\n","module.exports = \"40889a184827c504\";"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../packages/artplayer-plugin-ads/"}
\ No newline at end of file
diff --git a/packages/artplayer-plugin-ads/src/index.js b/packages/artplayer-plugin-ads/src/index.js
index bd20f65c9..b05197db6 100644
--- a/packages/artplayer-plugin-ads/src/index.js
+++ b/packages/artplayer-plugin-ads/src/index.js
@@ -3,32 +3,56 @@ import style from 'bundle-text:./style.less';
export default function artplayerPluginAds(option) {
return (art) => {
const {
- constructor: {
- utils: { append },
- },
template: { $player },
+ constructor: {
+ utils: { append, setStyle },
+ },
} = art;
+ let isEnd = false;
+ let $ads = null;
+ let $timer = null;
+
+ let time = 0;
+ let timer = null;
+
function skip() {
- //
+ isEnd = true;
+ art.play();
+ if (option.video) $ads.pause();
+ setStyle(art.template.$ads, 'display', 'none');
+ art.emit('artplayerPluginAds:skip', option);
}
- function toggleFullscreen() {
- //
+ function play() {
+ if (isEnd) return;
+ timer = setTimeout(() => {
+ time += 1;
+ $timer.innerHTML = time;
+ if (time >= option.totalDuration) {
+ skip();
+ } else {
+ play();
+ }
+ }, 1000);
}
- function toggleMuted() {
- //
+ function pause() {
+ if (isEnd) return;
+ clearTimeout(timer);
}
function show() {
art.template.$ads = append($player, '');
- const html = option.video
- ? ``
- : option.html;
+ $ads = append(
+ art.template.$ads,
+ option.video
+ ? ``
+ : `${option.html}
`,
+ );
- const $ads = append(art.template.$ads, html);
+ $timer = append(art.template.$ads, '');
art.proxy($ads, 'click', () => {
if (option.url) window.open(option.url);
@@ -40,15 +64,29 @@ export default function artplayerPluginAds(option) {
art.on('ready', () => {
art.once('play', () => {
+ show();
art.pause();
- const $ads = show();
- const isVideo = $ads instanceof HTMLVideoElement;
+ if (option.video) {
+ art.proxy($ads, 'ended', skip);
+ art.proxy($ads, 'error', skip);
+ art.proxy($ads, 'loadedmetadata', () => {
+ play();
+ $ads.play();
+ if ($ads.duration && $ads.duration !== Infinity) {
+ option.totalDuration = $ads.duration;
+ }
+ });
+ } else {
+ play();
+ }
});
});
return {
name: 'artplayerPluginAds',
skip,
+ pause,
+ play,
};
};
}
diff --git a/packages/artplayer-plugin-ads/src/style.less b/packages/artplayer-plugin-ads/src/style.less
index 5c2d9e6da..738a3bd23 100644
--- a/packages/artplayer-plugin-ads/src/style.less
+++ b/packages/artplayer-plugin-ads/src/style.less
@@ -1,7 +1,4 @@
.artplayer-plugin-ads {
- display: flex;
- align-items: center;
- justify-content: center;
position: absolute;
z-index: 150;
left: 0;
@@ -14,8 +11,22 @@
color: #fff;
background-color: #000;
+ .artplayer-plugin-ads-html {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ }
+
.artplayer-plugin-ads-video {
width: 100%;
height: 100%;
}
+
+ .artplayer-plugin-ads-timer {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ }
}
\ No newline at end of file