update ads demo

docs/assets/example/ads.js

@@ -0,0 +1,46 @@
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/video.mp4',
+    autoSize: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    plugins: [
+        artplayerPluginAds({
+            // html广告，假如存在视频广告则忽略该值
+            html: '123456',
+
+            // 视频广告
+            video: '',
+
+            // 广告跳转网址，为空则不跳转
+            url: 'http://artplayer.org',
+
+            // 必须观看的时长，期间不能被跳过
+            playDuration: 0,
+
+            // 广告总时长，假如是视频广告则自动获取
+            totalDuration: 0,
+
+            // 是否允许广告全屏
+            fullscreen: true,
+
+            // 是否允许视频广告静音
+            muted: true,
+
+            // 多语言支持
+            i18n: {
+                //
+            },
+        }),
+    ],
+});
+
+// 广告被点击
+art.on('artplayerPluginAds:click', (ads) => {
+    console.info('广告被点击', ads);
+});
+
+// 广告被跳过
+art.on('artplayerPluginAds:skip', (ads) => {
+    console.info('广告被跳过', ads);
+});

docs/index.html

@@ -31,6 +31,10 @@
                                     <a
                                         href="/?libs=./uncompiled/artplayer-plugin-danmuku/index.js&example=danmuku">artplayer-plugin-danmuku</a>
                                 </li>
+                                <li>
+                                    <a
+                                        href="/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads">artplayer-plugin-ads</a>
+                                </li>
                             </ul>
                             <ul>
                                 <li class="title">Tools</li>

docs/uncompiled/artplayer-plugin-ads/index.js

@@ -0,0 +1,212 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+  /* eslint-disable no-undef */
+  var globalObject =
+    typeof globalThis !== 'undefined'
+      ? globalThis
+      : typeof self !== 'undefined'
+      ? self
+      : typeof window !== 'undefined'
+      ? window
+      : typeof global !== 'undefined'
+      ? global
+      : {};
+  /* eslint-enable no-undef */
+
+  // Save the require from previous bundle to this closure if any
+  var previousRequire =
+    typeof globalObject[parcelRequireName] === 'function' &&
+    globalObject[parcelRequireName];
+
+  var cache = previousRequire.cache || {};
+  // Do not use `require` to prevent Webpack from trying to bundle this call
+  var nodeRequire =
+    typeof module !== 'undefined' &&
+    typeof module.require === 'function' &&
+    module.require.bind(module);
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire =
+          typeof globalObject[parcelRequireName] === 'function' &&
+          globalObject[parcelRequireName];
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error("Cannot find module '" + name + "'");
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = (cache[name] = new newRequire.Module(name));
+
+      modules[name][0].call(
+        module.exports,
+        localRequire,
+        module,
+        module.exports,
+        this
+      );
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x) {
+      var res = localRequire.resolve(x);
+      return res === false ? {} : newRequire(res);
+    }
+
+    function resolve(x) {
+      var id = modules[name][1][x];
+      return id != null ? id : x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  Object.defineProperty(newRequire, 'root', {
+    get: function () {
+      return globalObject[parcelRequireName];
+    },
+  });
+
+  globalObject[parcelRequireName] = newRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (mainEntry) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(mainEntry);
+
+    // CommonJS
+    if (typeof exports === 'object' && typeof module !== 'undefined') {
+      module.exports = mainExports;
+
+      // RequireJS
+    } else if (typeof define === 'function' && define.amd) {
+      define(function () {
+        return mainExports;
+      });
+
+      // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+})({"gEVO5":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+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 $ads = append($player, '<div class="artplayer-plugin-ads"></div>');
+        append($ads, option.video ? `<video src="${option.video}" controls="false"></video>` : option.html);
+        return {
+            name: "artplayerPluginAds",
+            skip () {
+            //
+            }
+        };
+    };
+}
+exports.default = artplayerPluginAds;
+artplayerPluginAds.env = "development";
+artplayerPluginAds.version = "4.4.8";
+artplayerPluginAds.build = "1655692550967";
+if (typeof document !== "undefined") {
+    if (!document.getElementById("artplayer-plugin-ads")) {
+        const $style = document.createElement("style");
+        $style.id = "artplayer-plugin-ads";
+        $style.textContent = (0, _styleLessDefault.default);
+        document.head.appendChild($style);
+    }
+}
+if (typeof window !== "undefined") window["artplayerPluginAds"] = artplayerPluginAds;
+
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"8MjWm","bundle-text:./style.less":"1ZB0H"}],"8MjWm":[function(require,module,exports) {
+exports.interopDefault = function(a) {
+    return a && a.__esModule ? a : {
+        default: a
+    };
+};
+exports.defineInteropFlag = function(a) {
+    Object.defineProperty(a, "__esModule", {
+        value: true
+    });
+};
+exports.exportAll = function(source, dest) {
+    Object.keys(source).forEach(function(key) {
+        if (key === "default" || key === "__esModule" || dest.hasOwnProperty(key)) return;
+        Object.defineProperty(dest, key, {
+            enumerable: true,
+            get: function() {
+                return source[key];
+            }
+        });
+    });
+    return dest;
+};
+exports.export = function(dest, destName, get) {
+    Object.defineProperty(dest, destName, {
+        enumerable: true,
+        get: 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";
+
+},{}]},["gEVO5"], "gEVO5", "parcelRequirea5da")
+
+//# sourceMappingURL=index.js.map

docs/uncompiled/artplayer-plugin-ads/index.js.map

@@ -0,0 +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        const $ads = append($player, '<div class=\"artplayer-plugin-ads\"></div>');\n        append($ads, option.video ? `<video src=\"${option.video}\" controls=\"false\"></video>` : option.html);\n\n        return {\n            name: 'artplayerPluginAds',\n            skip() {\n                //\n            },\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/"}

packages/artplayer-plugin-ads/src/index.js

@@ -1,7 +1,22 @@
+import style from 'bundle-text:./style.less';
+
 export default function artplayerPluginAds(option) {
     return (art) => {
+        const {
+            constructor: {
+                utils: { append },
+            },
+            template: { $player },
+        } = art;
+
+        const $ads = append($player, '<div class="artplayer-plugin-ads"></div>');
+        append($ads, option.video ? `<video src="${option.video}" controls="false"></video>` : option.html);
+
         return {
             name: 'artplayerPluginAds',
+            skip() {
+                //
+            },
         };
     };
 }
@@ -10,6 +25,15 @@ artplayerPluginAds.env = process.env.NODE_ENV;
 artplayerPluginAds.version = process.env.APP_VER;
 artplayerPluginAds.build = process.env.BUILD_DATE;
 
+if (typeof document !== 'undefined') {
+    if (!document.getElementById('artplayer-plugin-ads')) {
+        const $style = document.createElement('style');
+        $style.id = 'artplayer-plugin-ads';
+        $style.textContent = style;
+        document.head.appendChild($style);
+    }
+}
+
 if (typeof window !== 'undefined') {
     window['artplayerPluginAds'] = artplayerPluginAds;
 }

packages/artplayer-plugin-ads/src/style.less

@@ -0,0 +1,16 @@
+.artplayer-plugin-ads {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    z-index: 150;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    color: #fff;
+    background-color: #000;
+}