mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 03:17:46 -08:00
598 lines
84 KiB
JavaScript
598 lines
84 KiB
JavaScript
// Generated by yarn build:test. Readiness smoke only; do not edit.
|
|
(() => {
|
|
// scripts/docs-smoke/runtime.ts
|
|
var running = false;
|
|
async function runExample(example, scripts, timeoutMs = 4500) {
|
|
if (running)
|
|
throw new Error("Documentation smoke cases must run sequentially");
|
|
const savedStorage = [localStorage, sessionStorage].map((storage) => ({ storage, entries: Object.entries(storage) }));
|
|
const iframe = document.createElement("iframe");
|
|
iframe.dataset.documentationSmoke = example.id;
|
|
iframe.title = `Documentation smoke: ${example.id}`;
|
|
iframe.style.cssText = "width:640px;height:360px;border:0;display:block";
|
|
const context = { frame: null };
|
|
let active = true;
|
|
const disposers = [];
|
|
let fail = () => {
|
|
};
|
|
const failure = new Promise((_resolve, reject) => {
|
|
fail = reject;
|
|
});
|
|
const deadline = window.setTimeout(
|
|
() => fail(new Error(`${example.id}: readiness timeout (${timeoutMs}ms)`)),
|
|
timeoutMs
|
|
);
|
|
running = true;
|
|
const ensureActive = () => {
|
|
if (!active)
|
|
throw new Error("Documentation context was disposed");
|
|
};
|
|
function loaded(target, action, description) {
|
|
return new Promise((resolve, reject) => {
|
|
const done = () => {
|
|
cleanup();
|
|
resolve();
|
|
};
|
|
const error = () => {
|
|
cleanup();
|
|
reject(new Error(`Failed to load ${description}`));
|
|
};
|
|
function cleanup() {
|
|
target.removeEventListener("load", done);
|
|
target.removeEventListener("error", error);
|
|
}
|
|
target.addEventListener("load", done, { once: true });
|
|
target.addEventListener("error", error, { once: true });
|
|
disposers.push(() => {
|
|
cleanup();
|
|
reject(new Error(`Cancelled ${description}`));
|
|
});
|
|
action();
|
|
});
|
|
}
|
|
const work = async () => {
|
|
await loaded(
|
|
iframe,
|
|
() => {
|
|
iframe.srcdoc = '<!doctype html><html><body style="margin:0"><div class="artplayer-app" style="width:640px;height:360px"></div></body></html>';
|
|
document.body.appendChild(iframe);
|
|
},
|
|
"documentation frame"
|
|
);
|
|
ensureActive();
|
|
const frame = iframe.contentWindow;
|
|
context.frame = frame;
|
|
if (!frame)
|
|
throw new Error("Documentation frame is unavailable");
|
|
const onError = (event) => {
|
|
event.preventDefault();
|
|
fail(new Error(`${example.id}: ${event.message}`));
|
|
};
|
|
const onRejection = (event) => {
|
|
event.preventDefault();
|
|
fail(new Error(`${example.id}: ${String(event.reason)}`));
|
|
};
|
|
frame.addEventListener("error", onError);
|
|
frame.addEventListener("unhandledrejection", onRejection);
|
|
disposers.push(() => {
|
|
frame?.removeEventListener("error", onError);
|
|
frame?.removeEventListener("unhandledrejection", onRejection);
|
|
});
|
|
for (const url of scripts) {
|
|
const script = frame.document.createElement("script");
|
|
script.src = new URL(url, location.href).href;
|
|
await loaded(script, () => frame.document.head.appendChild(script), script.src);
|
|
ensureActive();
|
|
}
|
|
if (!frame.Artplayer)
|
|
throw new Error("Artplayer was not loaded in the documentation frame");
|
|
await frame.eval(`${example.code}
|
|
//# sourceURL=artplayer-doc-example-${encodeURIComponent(example.id)}.js`);
|
|
ensureActive();
|
|
const instances = frame.Artplayer.instances.slice();
|
|
await Promise.all(
|
|
instances.map(
|
|
(instance) => new Promise((resolve, reject) => {
|
|
if (instance.isReady) {
|
|
resolve();
|
|
return;
|
|
}
|
|
const ready = () => {
|
|
cleanup();
|
|
resolve();
|
|
};
|
|
const error = () => {
|
|
cleanup();
|
|
reject(new Error(`${example.id}: player readiness failed`));
|
|
};
|
|
function cleanup() {
|
|
instance.off("ready", ready);
|
|
instance.off("error", error);
|
|
instance.off("video:error", error);
|
|
}
|
|
instance.on("ready", ready);
|
|
instance.on("error", error);
|
|
instance.on("video:error", error);
|
|
disposers.push(() => {
|
|
cleanup();
|
|
reject(new Error("Cancelled player readiness"));
|
|
});
|
|
})
|
|
)
|
|
);
|
|
await new Promise((resolve) => {
|
|
const timer = window.setTimeout(resolve, 0);
|
|
disposers.push(() => window.clearTimeout(timer));
|
|
});
|
|
ensureActive();
|
|
return {
|
|
id: example.id,
|
|
instances: instances.length,
|
|
ready: instances.filter((instance) => instance.isReady).length,
|
|
media: instances.map((instance) => ({
|
|
readyState: instance.video.readyState,
|
|
width: instance.video.videoWidth,
|
|
height: instance.video.videoHeight,
|
|
duration: instance.video.duration
|
|
}))
|
|
};
|
|
};
|
|
let result;
|
|
let problem;
|
|
let failed = false;
|
|
try {
|
|
result = await Promise.race([work(), failure]);
|
|
} catch (error) {
|
|
failed = true;
|
|
problem = error;
|
|
} finally {
|
|
active = false;
|
|
window.clearTimeout(deadline);
|
|
for (const dispose of disposers) dispose();
|
|
const cleanupErrors = [];
|
|
for (const instance of context.frame?.Artplayer?.instances.slice() || []) {
|
|
try {
|
|
instance.destroy(true);
|
|
} catch (error) {
|
|
cleanupErrors.push(error);
|
|
}
|
|
}
|
|
iframe.remove();
|
|
for (const { storage, entries } of savedStorage) {
|
|
try {
|
|
storage.clear();
|
|
for (const [key, value] of entries) storage.setItem(key, value);
|
|
} catch (error) {
|
|
cleanupErrors.push(error);
|
|
}
|
|
}
|
|
running = false;
|
|
if (cleanupErrors.length) {
|
|
const errors = failed ? [problem, ...cleanupErrors] : cleanupErrors;
|
|
problem = Object.assign(new Error(`Documentation cleanup failed: ${errors.map(String).join("; ")}`), { errors });
|
|
failed = true;
|
|
}
|
|
}
|
|
if (failed)
|
|
throw problem;
|
|
if (!result)
|
|
throw new Error("Documentation smoke did not produce a result");
|
|
return result;
|
|
}
|
|
function registerDocumentationSmoke(examples, scripts) {
|
|
const host = globalThis;
|
|
if (typeof host.describe !== "function" || typeof host.it !== "function")
|
|
throw new Error("Documentation smoke requires the existing Mocha BDD page");
|
|
host.describe("Documentation readiness smoke (not feature acceptance)", function() {
|
|
this.timeout(6e3);
|
|
for (const example of examples) {
|
|
host.it(example.id, async () => {
|
|
await runExample(example, scripts);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// scripts/docs-smoke/documentation-smoke-entry.ts
|
|
registerDocumentationSmoke([{ "id": "advanced/built-in.md:12", "file": "advanced/built-in.md", "line": 12, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconsole.info(art.option);" }, { "id": "advanced/built-in.md:33", "file": "advanced/built-in.md", "line": 33, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconsole.info(art.template);\nconsole.info(art.template.$video);" }, { "id": "advanced/built-in.md:60", "file": "advanced/built-in.md", "line": 60, "code": "var container = document.querySelector('.artplayer-app');\n\nvar art = new Artplayer({\n container: container,\n url: '/assets/sample/video.mp4',\n});\n\nart.events.proxy(container, 'click', event => {\n console.info('click', event);\n});\n\nart.events.hover(container, (event) => {\n console.info('mouseenter', event);\n}, (event) => {\n console.info('mouseleave', event);\n});" }, { "id": "advanced/built-in.md:97", "file": "advanced/built-in.md", "line": 97, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.storage.set('test', { foo: 'bar' });\nconst test = art.storage.get('test');\nconsole.info(test);\nart.storage.del('test');\nart.storage.clear();" }, { "id": "advanced/built-in.md:120", "file": "advanced/built-in.md", "line": 120, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.storage.name = 'your-storage-key';\nart.storage.set('test', { foo: 'bar' });" }, { "id": "advanced/built-in.md:136", "file": "advanced/built-in.md", "line": 136, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconsole.info(art.icons.loading);" }, { "id": "advanced/built-in.md:160", "file": "advanced/built-in.md", "line": 160, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconsole.info(art.i18n.get('Play'));\n\nart.i18n.update({\n 'zh-cn': {\n Play: 'Your Play'\n }\n});" }, { "id": "advanced/built-in.md:188", "file": "advanced/built-in.md", "line": 188, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.notice.show = 'Video Ready To Play';\n})" }, { "id": "advanced/built-in.md:217", "file": "advanced/built-in.md", "line": 217, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.layers.add({\n html: 'Some Text',\n });\n\n setTimeout(() => {\n art.layers.show = false;\n }, 1000);\n});" }, { "id": "advanced/built-in.md:252", "file": "advanced/built-in.md", "line": 252, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.controls.add({\n html: 'Some Text',\n position: 'left',\n });\n\n setTimeout(() => {\n art.controls.show = false;\n }, 1000);\n});" }, { "id": "advanced/built-in.md:288", "file": "advanced/built-in.md", "line": 288, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.contextmenu.add({\n html: 'Some Text',\n });\n\n art.contextmenu.show = true;\n setTimeout(() => {\n art.contextmenu.show = false;\n }, 1000);\n});" }, { "id": "advanced/built-in.md:325", "file": "advanced/built-in.md", "line": 325, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.subtitle.url = '/assets/sample/subtitle.srt'\n art.subtitle.style({\n color: 'red',\n });\n});" }, { "id": "advanced/built-in.md:348", "file": "advanced/built-in.md", "line": 348, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.info.show = true;\n\n setTimeout(() => {\n art.info.show = false;\n }, 3000);\n});" }, { "id": "advanced/built-in.md:372", "file": "advanced/built-in.md", "line": 372, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.loading.show = true;\n setTimeout(() => {\n art.loading.show = false;\n }, 1000);\n});" }, { "id": "advanced/built-in.md:395", "file": "advanced/built-in.md", "line": 395, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nfunction hotkeyEvent(event) {\n console.info('click', event);\n}\n\nart.on('ready', () => {\n art.hotkey.add(32, hotkeyEvent);\n setTimeout(() => {\n art.hotkey.remove(32, hotkeyEvent);\n }, 5000);\n});" }, { "id": "advanced/built-in.md:428", "file": "advanced/built-in.md", "line": 428, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.mask.show = false;\n setTimeout(() => {\n art.mask.show = true;\n }, 1000);\n});" }, { "id": "advanced/built-in.md:454", "file": "advanced/built-in.md", "line": 454, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n flip: true,\n playbackRate: true,\n aspectRatio: true,\n subtitleOffset: true,\n});\n\nart.on('ready', () => {\n art.setting.show = true;\n setTimeout(() => {\n art.setting.show = false;\n }, 1000);\n});" }, { "id": "advanced/built-in.md:485", "file": "advanced/built-in.md", "line": 485, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nfunction myPlugin(art) {\n console.info(art);\n return {\n name: 'myPlugin',\n something: 'something',\n doSomething: function () {\n console.info('doSomething');\n },\n };\n}\n\nart.on('ready', () => {\n art.plugins.add(myPlugin);\n});" }, { "id": "advanced/class.md:12", "file": "advanced/class.md", "line": 12, "code": "console.info([...Artplayer.instances]);\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconsole.info([...Artplayer.instances]);" }, { "id": "advanced/class.md:29", "file": "advanced/class.md", "line": 29, "code": "console.info(Artplayer.version);" }, { "id": "advanced/class.md:39", "file": "advanced/class.md", "line": 39, "code": "console.info(Artplayer.env);" }, { "id": "advanced/class.md:49", "file": "advanced/class.md", "line": 49, "code": "console.info(Artplayer.build);" }, { "id": "advanced/class.md:59", "file": "advanced/class.md", "line": 59, "code": "console.info(Artplayer.config);" }, { "id": "advanced/class.md:69", "file": "advanced/class.md", "line": 69, "code": "console.info(Artplayer.utils);" }, { "id": "advanced/class.md:85", "file": "advanced/class.md", "line": 85, "code": "console.info(Artplayer.scheme);" }, { "id": "advanced/class.md:95", "file": "advanced/class.md", "line": 95, "code": "console.info(Artplayer.Emitter);" }, { "id": "advanced/class.md:105", "file": "advanced/class.md", "line": 105, "code": "console.info(Artplayer.validator);" }, { "id": "advanced/class.md:115", "file": "advanced/class.md", "line": 115, "code": "console.info(Artplayer.kindOf);" }, { "id": "advanced/class.md:125", "file": "advanced/class.md", "line": 125, "code": "console.info(Artplayer.html);" }, { "id": "advanced/class.md:135", "file": "advanced/class.md", "line": 135, "code": "console.info(Artplayer.option);" }, { "id": "advanced/event.md:10", "file": "advanced/event.md", "line": 10, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('video:canplay', () => {\n console.info('video:canplay');\n});" }, { "id": "advanced/event.md:25", "file": "advanced/event.md", "line": 25, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.once('video:canplay', () => {\n console.info('video:canplay');\n});" }, { "id": "advanced/event.md:40", "file": "advanced/event.md", "line": 40, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.emit('focus');" }, { "id": "advanced/event.md:53", "file": "advanced/event.md", "line": 53, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconst onReady = () => {\n console.info('ready');\n art.off('ready', onReady);\n}\n\nart.on('ready', onReady);" }, { "id": "advanced/event.md:79", "file": "advanced/event.md", "line": 79, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info('ready');\n});" }, { "id": "advanced/event.md:96", "file": "advanced/event.md", "line": 96, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.url = '/assets/sample/video.mp4'\n});\n\nart.on('restart', (url) => {\n console.info('restart', url);\n});" }, { "id": "advanced/event.md:117", "file": "advanced/event.md", "line": 117, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('pause', () => {\n console.info('pause');\n});" }, { "id": "advanced/event.md:134", "file": "advanced/event.md", "line": 134, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('play', () => {\n console.info('play');\n});" }, { "id": "advanced/event.md:151", "file": "advanced/event.md", "line": 151, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('hotkey', (event) => {\n console.info('hotkey', event);\n});" }, { "id": "advanced/event.md:168", "file": "advanced/event.md", "line": 168, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.destroy();\n});\n\nart.on('destroy', () => {\n console.info('destroy');\n});" }, { "id": "advanced/event.md:189", "file": "advanced/event.md", "line": 189, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('focus', (event) => {\n console.info('focus', event);\n});" }, { "id": "advanced/event.md:206", "file": "advanced/event.md", "line": 206, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('blur', (event) => {\n console.info('blur', event);\n});" }, { "id": "advanced/event.md:223", "file": "advanced/event.md", "line": 223, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('dblclick', (event) => {\n console.info('dblclick', event);\n});" }, { "id": "advanced/event.md:240", "file": "advanced/event.md", "line": 240, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('click', (event) => {\n console.info('click', event);\n});" }, { "id": "advanced/event.md:257", "file": "advanced/event.md", "line": 257, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/404.mp4',\n});\n\nart.on('error', (error, reconnectTime) => {\n console.info(error, reconnectTime);\n});" }, { "id": "advanced/event.md:274", "file": "advanced/event.md", "line": 274, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('hover', (state, event) => {\n console.info('hover', state, event);\n});" }, { "id": "advanced/event.md:291", "file": "advanced/event.md", "line": 291, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('mousemove', (event) => {\n console.info('mousemove', event);\n});" }, { "id": "advanced/event.md:308", "file": "advanced/event.md", "line": 308, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('resize', () => {\n console.info('resize');\n});" }, { "id": "advanced/event.md:325", "file": "advanced/event.md", "line": 325, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('view', (state) => {\n console.info('view', state);\n});" }, { "id": "advanced/event.md:342", "file": "advanced/event.md", "line": 342, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n lock: true,\n});\n\nart.on('lock', (state) => {\n console.info('lock', state);\n});" }, { "id": "advanced/event.md:360", "file": "advanced/event.md", "line": 360, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n aspectRatio: true,\n setting: true,\n});\n\nart.on('aspectRatio', (aspectRatio) => {\n console.info('aspectRatio', aspectRatio);\n});" }, { "id": "advanced/event.md:379", "file": "advanced/event.md", "line": 379, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.autoHeight();\n});\n\nart.on('autoHeight', (height) => {\n console.info('autoHeight', height);\n});" }, { "id": "advanced/event.md:400", "file": "advanced/event.md", "line": 400, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoSize: true,\n});\n\nart.on('autoSize', () => {\n console.info('autoSize');\n});" }, { "id": "advanced/event.md:418", "file": "advanced/event.md", "line": 418, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n flip: true,\n setting: true,\n});\n\nart.on('flip', (flip) => {\n console.info('flip', flip);\n});" }, { "id": "advanced/event.md:437", "file": "advanced/event.md", "line": 437, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreen: true,\n});\n\nart.on('fullscreen', (state) => {\n console.info('fullscreen', state);\n});" }, { "id": "advanced/event.md:455", "file": "advanced/event.md", "line": 455, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.fullscreen = true;\n});\n\nart.on('fullscreenError', (event) => {\n console.info('fullscreenError', event);\n});" }, { "id": "advanced/event.md:476", "file": "advanced/event.md", "line": 476, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreenWeb: true,\n});\n\nart.on('fullscreenWeb', (state) => {\n console.info('fullscreenWeb', state);\n});" }, { "id": "advanced/event.md:494", "file": "advanced/event.md", "line": 494, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.mini = true;\n});\n\nart.on('mini', (state) => {\n console.info('mini', state);\n});" }, { "id": "advanced/event.md:515", "file": "advanced/event.md", "line": 515, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n pip: true,\n});\n\nart.on('pip', (state) => {\n console.info('pip', state);\n});" }, { "id": "advanced/event.md:533", "file": "advanced/event.md", "line": 533, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n screenshot: true,\n});\n\nart.on('screenshot', (dataUri) => {\n console.info('screenshot', dataUri);\n});" }, { "id": "advanced/event.md:551", "file": "advanced/event.md", "line": 551, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('seek', (currentTime) => {\n console.info('seek', currentTime);\n});" }, { "id": "advanced/event.md:568", "file": "advanced/event.md", "line": 568, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitleOffset: true,\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n },\n setting: true,\n});\n\nart.on('subtitleOffset', (offset) => {\n console.info('subtitleOffset', offset);\n});" }, { "id": "advanced/event.md:590", "file": "advanced/event.md", "line": 590, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n },\n});\n\nart.on('subtitleBeforeUpdate', (cues) => {\n console.info('subtitleBeforeUpdate', cues);\n});" }, { "id": "advanced/event.md:610", "file": "advanced/event.md", "line": 610, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n },\n});\n\nart.on('subtitleAfterUpdate', (cues) => {\n console.info('subtitleAfterUpdate', cues);\n});" }, { "id": "advanced/event.md:630", "file": "advanced/event.md", "line": 630, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n },\n});\n\nart.on('subtitleLoad', (option, cues) => {\n console.info('subtitleLoad', cues, option);\n});" }, { "id": "advanced/event.md:650", "file": "advanced/event.md", "line": 650, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('info', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:667", "file": "advanced/event.md", "line": 667, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('layer', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:684", "file": "advanced/event.md", "line": 684, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('loading', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:701", "file": "advanced/event.md", "line": 701, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('mask', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:718", "file": "advanced/event.md", "line": 718, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('subtitle', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:735", "file": "advanced/event.md", "line": 735, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('contextmenu', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:752", "file": "advanced/event.md", "line": 752, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('control', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:769", "file": "advanced/event.md", "line": 769, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n});\n\nart.on('setting', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:787", "file": "advanced/event.md", "line": 787, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('muted', (state) => {\n console.log(state);\n});" }, { "id": "advanced/event.md:804", "file": "advanced/event.md", "line": 804, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('keydown', (event) => {\n console.log(event.code);\n});" }, { "id": "advanced/global.md:12", "file": "advanced/global.md", "line": 12, "code": "Artplayer.DEBUG = true;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:27", "file": "advanced/global.md", "line": 27, "code": "console.log(Artplayer.STYLE);" }, { "id": "advanced/global.md:37", "file": "advanced/global.md", "line": 37, "code": "Artplayer.CONTEXTMENU = false;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:52", "file": "advanced/global.md", "line": 52, "code": "Artplayer.NOTICE_TIME = 5000;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:67", "file": "advanced/global.md", "line": 67, "code": "Artplayer.SETTING_WIDTH = 300;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n loop: true,\n flip: true,\n playbackRate: true,\n aspectRatio: true,\n});" }, { "id": "advanced/global.md:87", "file": "advanced/global.md", "line": 87, "code": "Artplayer.SETTING_ITEM_WIDTH = 300;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n loop: true,\n flip: true,\n playbackRate: true,\n aspectRatio: true,\n});" }, { "id": "advanced/global.md:107", "file": "advanced/global.md", "line": 107, "code": "Artplayer.SETTING_ITEM_HEIGHT = 40;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n loop: true,\n flip: true,\n playbackRate: true,\n aspectRatio: true,\n});" }, { "id": "advanced/global.md:127", "file": "advanced/global.md", "line": 127, "code": "Artplayer.RESIZE_TIME = 500;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('resize', () => {\n console.log('resize');\n});" }, { "id": "advanced/global.md:146", "file": "advanced/global.md", "line": 146, "code": "Artplayer.SCROLL_TIME = 500;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('scroll', () => {\n console.log('scroll');\n});" }, { "id": "advanced/global.md:165", "file": "advanced/global.md", "line": 165, "code": "Artplayer.SCROLL_GAP = 100;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('scroll', () => {\n console.log('scroll');\n});" }, { "id": "advanced/global.md:184", "file": "advanced/global.md", "line": 184, "code": "Artplayer.AUTO_PLAYBACK_MAX = 20;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoPlayback: true,\n});" }, { "id": "advanced/global.md:200", "file": "advanced/global.md", "line": 200, "code": "Artplayer.AUTO_PLAYBACK_MIN = 10;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoPlayback: true,\n});" }, { "id": "advanced/global.md:216", "file": "advanced/global.md", "line": 216, "code": "Artplayer.AUTO_PLAYBACK_TIMEOUT = 5000;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoPlayback: true,\n});" }, { "id": "advanced/global.md:232", "file": "advanced/global.md", "line": 232, "code": "Artplayer.RECONNECT_TIME_MAX = 10;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/404.mp4',\n});" }, { "id": "advanced/global.md:247", "file": "advanced/global.md", "line": 247, "code": "Artplayer.RECONNECT_SLEEP_TIME = 3000;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/404.mp4',\n});" }, { "id": "advanced/global.md:262", "file": "advanced/global.md", "line": 262, "code": "Artplayer.CONTROL_HIDE_TIME = 5000;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:277", "file": "advanced/global.md", "line": 277, "code": "Artplayer.DBCLICK_TIME = 500;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('dblclick', () => {\n console.log('dblclick');\n});" }, { "id": "advanced/global.md:296", "file": "advanced/global.md", "line": 296, "code": "Artplayer.DBCLICK_FULLSCREEN = false;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:311", "file": "advanced/global.md", "line": 311, "code": "Artplayer.MOBILE_DBCLICK_PLAY = false;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:326", "file": "advanced/global.md", "line": 326, "code": "Artplayer.MOBILE_CLICK_PLAY = true;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:341", "file": "advanced/global.md", "line": 341, "code": "Artplayer.AUTO_ORIENTATION_TIME = 500;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoOrientation: true,\n});" }, { "id": "advanced/global.md:357", "file": "advanced/global.md", "line": 357, "code": "Artplayer.INFO_LOOP_TIME = 2000;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.info.show = true;" }, { "id": "advanced/global.md:374", "file": "advanced/global.md", "line": 374, "code": "Artplayer.FAST_FORWARD_VALUE = 5;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fastForward: true,\n});" }, { "id": "advanced/global.md:390", "file": "advanced/global.md", "line": 390, "code": "Artplayer.FAST_FORWARD_TIME = 2000;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fastForward: true,\n});" }, { "id": "advanced/global.md:406", "file": "advanced/global.md", "line": 406, "code": "Artplayer.TOUCH_MOVE_RATIO = 1;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:421", "file": "advanced/global.md", "line": 421, "code": "Artplayer.VOLUME_STEP = 0.2;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:436", "file": "advanced/global.md", "line": 436, "code": "Artplayer.SEEK_STEP = 10;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:451", "file": "advanced/global.md", "line": 451, "code": "Artplayer.PLAYBACK_RATE = [0.5, 1, 2, 3, 4, 5];\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n playbackRate: true,\n});\n\nart.contextmenu.show = true;\nart.setting.show = true;" }, { "id": "advanced/global.md:471", "file": "advanced/global.md", "line": 471, "code": "Artplayer.ASPECT_RATIO = ['default', '1:1', '2:1', '4:3', '6:5'];\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n aspectRatio: true,\n});\n\nart.contextmenu.show = true;\nart.setting.show = true;" }, { "id": "advanced/global.md:491", "file": "advanced/global.md", "line": 491, "code": "Artplayer.FLIP = ['normal', 'horizontal'];\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n flip: true,\n});\n\nart.contextmenu.show = true;\nart.setting.show = true;" }, { "id": "advanced/global.md:511", "file": "advanced/global.md", "line": 511, "code": "Artplayer.FULLSCREEN_WEB_IN_BODY = false;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreenWeb: true,\n});" }, { "id": "advanced/global.md:527", "file": "advanced/global.md", "line": 527, "code": "Artplayer.LOG_VERSION = false;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "advanced/global.md:542", "file": "advanced/global.md", "line": 542, "code": "Artplayer.USE_RAF = true;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n miniProgressBar: true,\n});" }, { "id": "advanced/global.md:560", "file": "advanced/global.md", "line": 560, "code": "Artplayer.REMOVE_SRC_WHEN_DESTROY = false;\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\n// \u53EA\u9500\u6BC1\u754C\u9762\uFF0C\u4E0D\u4E3B\u52A8\u6E05\u7A7A src\nart.destroy();" }, { "id": "advanced/plugin.md:10", "file": "advanced/plugin.md", "line": 10, "code": "function myPlugin(art) {\n console.info(art);\n return {\n name: 'myPlugin',\n something: 'something',\n doSomething: function () {\n console.info('doSomething');\n },\n };\n}\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n plugins: [myPlugin],\n});\n\nart.on('ready', () => {\n console.info(art.plugins.myPlugin);\n});" }, { "id": "advanced/plugin.md:37", "file": "advanced/plugin.md", "line": 37, "code": "function myPlugin(art) {\n console.info(art);\n return {\n name: 'myPlugin',\n something: 'something',\n doSomething: function () {\n console.info('doSomething');\n },\n };\n}\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.plugins.add(myPlugin);\n\nart.on('ready', () => {\n console.info(art.plugins.myPlugin);\n});" }, { "id": "advanced/plugin.md:65", "file": "advanced/plugin.md", "line": 65, "code": `function adsPlugin(option) {
|
|
return (art) => {
|
|
art.layers.add({
|
|
name: 'ads',
|
|
html: \`<img style="width: 100px" src="\${option.url}">\`,
|
|
style: {
|
|
display: 'none',
|
|
position: 'absolute',
|
|
top: '20px',
|
|
right: '20px',
|
|
},
|
|
});
|
|
|
|
function show() {
|
|
art.layers.ads.style.display = 'block';
|
|
}
|
|
|
|
function hide() {
|
|
art.layers.ads.style.display = 'none';
|
|
}
|
|
|
|
art.controls.add({
|
|
name: 'hide-ads',
|
|
position: 'right',
|
|
html: 'Hide Ads',
|
|
tooltip: 'Hide Ads',
|
|
click: hide,
|
|
style: {
|
|
marginRight: '20px'
|
|
}
|
|
});
|
|
|
|
art.controls.add({
|
|
name: 'show-ads',
|
|
position: 'right',
|
|
html: 'Show Ads',
|
|
tooltip: 'Show Ads',
|
|
click: show,
|
|
});
|
|
|
|
art.on('play', hide);
|
|
art.on('pause', show);
|
|
|
|
return {
|
|
name: 'adsPlugin',
|
|
show,
|
|
hide
|
|
};
|
|
}
|
|
}
|
|
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
plugins: [
|
|
adsPlugin({
|
|
url: '/assets/sample/layer.png'
|
|
})
|
|
],
|
|
});` }, { "id": "advanced/property.md:14", "file": "advanced/property.md", "line": 14, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n art.play();\n});" }, { "id": "advanced/property.md:34", "file": "advanced/property.md", "line": 34, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n art.play();\n\n setTimeout(() => {\n art.pause();\n }, 3000);\n});" }, { "id": "advanced/property.md:58", "file": "advanced/property.md", "line": 58, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n art.toggle();\n\n setTimeout(() => {\n art.toggle();\n }, 3000);\n});" }, { "id": "advanced/property.md:83", "file": "advanced/property.md", "line": 83, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.destroy();\n});" }, { "id": "advanced/property.md:104", "file": "advanced/property.md", "line": 104, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n // \u4EC5\u91CD\u7F6E video\uFF0C\u4E0D\u79FB\u9664\u754C\u9762\n art.reset();\n});" }, { "id": "advanced/property.md:125", "file": "advanced/property.md", "line": 125, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 5;\n});" }, { "id": "advanced/property.md:145", "file": "advanced/property.md", "line": 145, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.forward = 5;\n});" }, { "id": "advanced/property.md:165", "file": "advanced/property.md", "line": 165, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 5;\n\n setTimeout(() => {\n art.backward = 2;\n }, 3000);\n});" }, { "id": "advanced/property.md:189", "file": "advanced/property.md", "line": 189, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.volume);\n art.volume = 0.5;\n console.info(art.volume);\n});" }, { "id": "advanced/property.md:211", "file": "advanced/property.md", "line": 211, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.url = '/assets/sample/video.mp4?t=0';\n});" }, { "id": "advanced/property.md:231", "file": "advanced/property.md", "line": 231, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n setTimeout(() => {\n art.switch = '/assets/sample/video.mp4?t=0';\n }, 3000);\n});" }, { "id": "advanced/property.md:254", "file": "advanced/property.md", "line": 254, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n setTimeout(() => {\n art.switchUrl('/assets/sample/video.mp4?t=0');\n }, 3000);\n});" }, { "id": "advanced/property.md:283", "file": "advanced/property.md", "line": 283, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n setTimeout(() => {\n art.switchQuality('/assets/sample/video.mp4?t=0');\n }, 3000);\n});" }, { "id": "advanced/property.md:306", "file": "advanced/property.md", "line": 306, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.muted);\n art.muted = true;\n console.info(art.muted);\n});" }, { "id": "advanced/property.md:328", "file": "advanced/property.md", "line": 328, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.currentTime);\n art.currentTime = 5;\n console.info(art.currentTime);\n});" }, { "id": "advanced/property.md:349", "file": "advanced/property.md", "line": 349, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.duration);\n});" }, { "id": "advanced/property.md:374", "file": "advanced/property.md", "line": 374, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.screenshot('your-name');\n});" }, { "id": "advanced/property.md:393", "file": "advanced/property.md", "line": 393, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', async () => {\n const url = await art.getDataURL();\n console.info(url)\n});" }, { "id": "advanced/property.md:413", "file": "advanced/property.md", "line": 413, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', async () => {\n const url = await art.getBlobUrl();\n console.info(url);\n});" }, { "id": "advanced/property.md:434", "file": "advanced/property.md", "line": 434, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'right',\n html: 'Fullscreen Switch',\n click: function () {\n art.fullscreen = !art.fullscreen;\n },\n },\n ],\n});" }, { "id": "advanced/property.md:465", "file": "advanced/property.md", "line": 465, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreenWeb: true,\n});\n\nart.on('ready', () => {\n art.fullscreenWeb = true;\n\n setTimeout(() => {\n art.fullscreenWeb = false;\n }, 3000);\n});" }, { "id": "advanced/property.md:490", "file": "advanced/property.md", "line": 490, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'right',\n html: 'PIP',\n click: function () {\n art.pip = !art.pip;\n },\n },\n ],\n});" }, { "id": "advanced/property.md:521", "file": "advanced/property.md", "line": 521, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n poster: '/assets/sample/poster.jpg',\n});\n\nart.on('ready', () => {\n console.info(art.poster);\n art.poster = '/assets/sample/poster.jpg?t=0';\n console.info(art.poster);\n});" }, { "id": "advanced/property.md:544", "file": "advanced/property.md", "line": 544, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.mini = true;\n});" }, { "id": "advanced/property.md:564", "file": "advanced/property.md", "line": 564, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n console.info(art.playing);\n});" }, { "id": "advanced/property.md:585", "file": "advanced/property.md", "line": 585, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.state); // \u9ED8\u8BA4 standard\n art.state = 'mini';\n});" }, { "id": "advanced/property.md:605", "file": "advanced/property.md", "line": 605, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.autoSize();\n});" }, { "id": "advanced/property.md:624", "file": "advanced/property.md", "line": 624, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(JSON.stringify(art.rect));\n});" }, { "id": "advanced/property.md:652", "file": "advanced/property.md", "line": 652, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.width, art.height, art.left, art.top);\n});" }, { "id": "advanced/property.md:672", "file": "advanced/property.md", "line": 672, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.flip);\n art.flip = 'horizontal';\n console.info(art.flip);\n});" }, { "id": "advanced/property.md:694", "file": "advanced/property.md", "line": 694, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.playbackRate);\n art.playbackRate = 2;\n console.info(art.playbackRate);\n});" }, { "id": "advanced/property.md:716", "file": "advanced/property.md", "line": 716, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.aspectRatio);\n art.aspectRatio = '16:9';\n console.info(art.aspectRatio);\n});" }, { "id": "advanced/property.md:737", "file": "advanced/property.md", "line": 737, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.autoHeight();\n});\n\nart.on('resize', () => {\n art.autoHeight();\n});" }, { "id": "advanced/property.md:767", "file": "advanced/property.md", "line": 767, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.attr('playsInline'));\n art.attr('playsInline', true);\n console.info(art.attr('playsInline'));\n});" }, { "id": "advanced/property.md:789", "file": "advanced/property.md", "line": 789, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.type);\n art.type = 'm3u8';\n console.info(art.type);\n});" }, { "id": "advanced/property.md:811", "file": "advanced/property.md", "line": 811, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.theme);\n art.theme = '#000';\n console.info(art.theme);\n});" }, { "id": "advanced/property.md:832", "file": "advanced/property.md", "line": 832, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'right',\n html: 'AirPlay',\n click: function () {\n art.airplay();\n },\n },\n ],\n});" }, { "id": "advanced/property.md:856", "file": "advanced/property.md", "line": 856, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('video:timeupdate', () => {\n console.info(art.loaded);\n});" }, { "id": "advanced/property.md:875", "file": "advanced/property.md", "line": 875, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('video:timeupdate', () => {\n console.info(art.loadedTime);\n});" }, { "id": "advanced/property.md:894", "file": "advanced/property.md", "line": 894, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('video:timeupdate', () => {\n console.info(art.played);\n});" }, { "id": "advanced/property.md:913", "file": "advanced/property.md", "line": 913, "code": "var container = document.querySelector('.artplayer-app');\n\nvar art = new Artplayer({\n container: container,\n url: '/assets/sample/video.mp4',\n});\n\nart.proxy(container, 'click', event => {\n console.info(event);\n});" }, { "id": "advanced/property.md:940", "file": "advanced/property.md", "line": 940, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconsole.info(art.query('.art-video'));" }, { "id": "advanced/property.md:957", "file": "advanced/property.md", "line": 957, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nconsole.info(art.video);" }, { "id": "advanced/property.md:974", "file": "advanced/property.md", "line": 974, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.log(art.cssVar('--art-theme'));\n art.cssVar('--art-theme', 'green');\n console.log(art.cssVar('--art-theme'));\n});" }, { "id": "advanced/property.md:996", "file": "advanced/property.md", "line": 996, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n quality: [\n {\n default: true,\n html: 'SD 480P',\n url: '/assets/sample/video.mp4',\n },\n {\n html: 'HD 720P',\n url: '/assets/sample/video.mp4',\n },\n ],\n});\n\nart.on('ready', () => {\n setTimeout(() => {\n art.quality = [\n {\n default: true,\n html: '1080P',\n url: '/assets/sample/video.mp4',\n },\n {\n html: '4K',\n url: '/assets/sample/video.mp4',\n },\n ];\n }, 3000);\n})" }, { "id": "advanced/property.md:1039", "file": "advanced/property.md", "line": 1039, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.thumbnails = {\n url: '/assets/sample/thumbnails.png',\n number: 60,\n column: 10,\n };\n});" }, { "id": "advanced/property.md:1063", "file": "advanced/property.md", "line": 1063, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n },\n});\n\nart.on('ready', () => {\n art.subtitleOffset = 1;\n});" }, { "id": "component/contextmenu.md:21", "file": "component/contextmenu.md", "line": 21, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n contextmenu: [\n {\n name: 'your-menu',\n html: 'Your Menu',\n click: function (...args) {\n console.info(args);\n art.contextmenu.show = false;\n },\n },\n ],\n});\n\nart.contextmenu.show = true;\n\n// Get the Element of contextmenu by name\nconsole.info(art.contextmenu['your-menu']);" }, { "id": "component/contextmenu.md:47", "file": "component/contextmenu.md", "line": 47, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.contextmenu.add({\n name: 'your-menu',\n html: 'Your Menu',\n click: function (...args) {\n console.info(args);\n art.contextmenu.show = false;\n },\n});\n\nart.contextmenu.show = true;\n\n// Get the Element of contextmenu by name\nconsole.info(art.contextmenu['your-menu']);" }, { "id": "component/contextmenu.md:72", "file": "component/contextmenu.md", "line": 72, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n contextmenu: [\n {\n name: 'your-menu',\n html: 'Your Menu',\n click: function (...args) {\n console.info(args);\n art.contextmenu.show = false;\n },\n },\n ],\n});\n\nart.contextmenu.show = true;\n\nart.on('ready', () => {\n setTimeout(() => {\n // Delete the contextmenu by name\n art.contextmenu.remove('your-menu')\n }, 3000);\n});" }, { "id": "component/contextmenu.md:102", "file": "component/contextmenu.md", "line": 102, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n contextmenu: [\n {\n name: 'your-menu',\n html: 'Your Menu',\n click: function (...args) {\n console.info(args);\n art.contextmenu.show = false;\n },\n },\n ],\n});\n\nart.contextmenu.show = true;\n\nart.on('ready', () => {\n setTimeout(() => {\n // Update the contextmenu by name\n art.contextmenu.update({\n name: 'your-menu',\n html: 'Your New Menu',\n })\n }, 3000);\n});" }, { "id": "component/controls.md:24", "file": "component/controls.md", "line": 24, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
controls: [
|
|
{
|
|
name: 'your-button',
|
|
index: 10,
|
|
position: 'left',
|
|
html: 'Your Button',
|
|
tooltip: 'Your Button',
|
|
style: {
|
|
color: 'red',
|
|
},
|
|
click: function (...args) {
|
|
console.info('click', args);
|
|
},
|
|
mounted: function (...args) {
|
|
console.info('mounted', args);
|
|
},
|
|
},
|
|
{
|
|
name: 'subtitle',
|
|
position: 'right',
|
|
html: 'Subtitle',
|
|
selector: [
|
|
{
|
|
default: true,
|
|
html: '<span style="color:red">subtitle 01</span>',
|
|
},
|
|
{
|
|
html: '<span style="color:yellow">subtitle 02</span>',
|
|
},
|
|
],
|
|
onSelect: function (item, $dom) {
|
|
console.info(item, $dom);
|
|
return 'Your ' + item.html;
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
// Get the Element of control by name
|
|
console.info(art.controls['your-button']);
|
|
console.info(art.controls['subtitle']);` }, { "id": "component/controls.md:75", "file": "component/controls.md", "line": 75, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.controls.add({\n name: 'button1',\n index: 10,\n position: 'left',\n html: 'Your Button',\n tooltip: 'Your Button',\n style: {\n color: 'red',\n },\n click: function (...args) {\n console.info('click', args);\n },\n mounted: function (...args) {\n console.info('mounted', args);\n },\n});\n\n// Get the Element of control by name\nconsole.info(art.controls['button1']);" }, { "id": "component/controls.md:106", "file": "component/controls.md", "line": 106, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n name: 'button1',\n index: 10,\n position: 'right',\n html: 'Your Button',\n tooltip: 'Your Button',\n style: {\n color: 'red',\n },\n }\n ]\n});\n\nart.on('ready', () => {\n setTimeout(() => {\n // Delete the control by name\n art.controls.remove('button1');\n }, 3000);\n});" }, { "id": "component/controls.md:136", "file": "component/controls.md", "line": 136, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n name: 'button1',\n index: 10,\n position: 'right',\n html: 'Subtitle',\n selector: [\n {\n default: true,\n html: 'subtitle 01',\n },\n {\n html: 'subtitle 02',\n },\n ],\n }\n ]\n});\n\nart.on('ready', () => {\n setTimeout(() => {\n // Update the control by name\n art.controls.update({\n name: 'button1',\n index: 10,\n position: 'right',\n html: 'New Subtitle',\n selector: [\n {\n default: true,\n html: 'new subtitle 01',\n },\n {\n html: 'new subtitle 02',\n },\n ],\n });\n }, 3000);\n});" }, { "id": "component/layers.md:21", "file": "component/layers.md", "line": 21, "code": `var img = '/assets/sample/layer.png';
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
layers: [
|
|
{
|
|
name: 'potser',
|
|
html: \`<img style="width: 100px" src="\${img}">\`,
|
|
tooltip: 'Potser Tip',
|
|
style: {
|
|
position: 'absolute',
|
|
top: '50px',
|
|
right: '50px',
|
|
},
|
|
click: function (...args) {
|
|
console.info('click', args);
|
|
},
|
|
mounted: function (...args) {
|
|
console.info('mounted', args);
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
// Get the Element of layer by name
|
|
console.info(art.layers['potser']);` }, { "id": "component/layers.md:54", "file": "component/layers.md", "line": 54, "code": `var img = '/assets/sample/layer.png';
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
});
|
|
|
|
art.layers.add({
|
|
name: 'potser',
|
|
html: \`<img style="width: 100px" src="\${img}">\`,
|
|
tooltip: 'Potser Tip',
|
|
style: {
|
|
position: 'absolute',
|
|
top: '50px',
|
|
right: '50px',
|
|
},
|
|
click: function (...args) {
|
|
console.info('click', args);
|
|
},
|
|
mounted: function (...args) {
|
|
console.info('mounted', args);
|
|
},
|
|
});
|
|
|
|
// Get the Element of layer by name
|
|
console.info(art.layers['potser']);` }, { "id": "component/layers.md:86", "file": "component/layers.md", "line": 86, "code": `var img = '/assets/sample/layer.png';
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
layers: [
|
|
{
|
|
name: 'potser',
|
|
html: \`<img style="width: 100px" src="\${img}">\`,
|
|
style: {
|
|
position: 'absolute',
|
|
top: '50px',
|
|
right: '50px',
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
setTimeout(() => {
|
|
// Delete the layer by name
|
|
art.layers.remove('potser');
|
|
}, 3000);
|
|
});` }, { "id": "component/layers.md:116", "file": "component/layers.md", "line": 116, "code": `var img = '/assets/sample/layer.png';
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
layers: [
|
|
{
|
|
name: 'potser',
|
|
html: \`<img style="width: 100px" src="\${img}">\`,
|
|
style: {
|
|
position: 'absolute',
|
|
top: '50px',
|
|
right: '50px',
|
|
},
|
|
},
|
|
],
|
|
});
|
|
|
|
art.on('ready', () => {
|
|
setTimeout(() => {
|
|
// Update the layer by name
|
|
art.layers.update({
|
|
name: 'potser',
|
|
html: \`<img style="width: 200px" src="\${img}">\`,
|
|
style: {
|
|
position: 'absolute',
|
|
top: '50px',
|
|
left: '50px',
|
|
},
|
|
});
|
|
}, 3000);
|
|
});` }, { "id": "component/setting.md:10", "file": "component/setting.md", "line": 10, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n flip: true,\n playbackRate: true,\n aspectRatio: true,\n subtitleOffset: true,\n});" }, { "id": "component/setting.md:34", "file": "component/setting.md", "line": 34, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
setting: true,
|
|
settings: [
|
|
{
|
|
html: 'Button',
|
|
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
|
tooltip: 'tooltip',
|
|
onClick(item, $dom, event) {
|
|
console.info(item, $dom, event);
|
|
return 'new tooltip'
|
|
}
|
|
},
|
|
],
|
|
});` }, { "id": "component/setting.md:66", "file": "component/setting.md", "line": 66, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
setting: true,
|
|
settings: [
|
|
{
|
|
html: 'Subtitle',
|
|
width: 250,
|
|
tooltip: 'Subtitle 01',
|
|
selector: [
|
|
{
|
|
default: true,
|
|
html: '<span style="color:red">Subtitle 01</span>',
|
|
url: '/assets/sample/subtitle.srt?id=1',
|
|
},
|
|
{
|
|
html: '<span style="color:yellow">Subtitle 02</span>',
|
|
url: '/assets/sample/subtitle.srt?id=2',
|
|
},
|
|
],
|
|
onSelect: function (item, $dom, event) {
|
|
console.info(item, $dom, event);
|
|
art.subtitle.url = item.url;
|
|
return item.html;
|
|
},
|
|
},
|
|
{
|
|
html: 'Quality',
|
|
width: 150,
|
|
tooltip: '1080P',
|
|
selector: [
|
|
{
|
|
default: true,
|
|
html: '1080P',
|
|
url: '/assets/sample/video.mp4?id=1080',
|
|
},
|
|
{
|
|
html: '720P',
|
|
url: '/assets/sample/video.mp4?id=720',
|
|
},
|
|
{
|
|
html: '360P',
|
|
url: '/assets/sample/video.mp4?id=360',
|
|
},
|
|
],
|
|
onSelect: function (item, $dom, event) {
|
|
console.info(item, $dom, event);
|
|
art.switchQuality(item.url, item.html);
|
|
return item.html;
|
|
},
|
|
},
|
|
],
|
|
});` }, { "id": "component/setting.md:126", "file": "component/setting.md", "line": 126, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n settings: [\n {\n html: 'Multi-level',\n selector: [\n {\n html: 'Setting 01',\n width: 150,\n selector: [\n {\n html: 'Setting 01 - 01',\n },\n {\n html: 'Setting 01 - 02',\n },\n ],\n onSelect: function (item, $dom, event) {\n console.info(item, $dom, event);\n return item.html;\n },\n },\n {\n html: 'Setting 02',\n width: 150,\n selector: [\n {\n html: 'Setting 02 - 01',\n },\n {\n html: 'Setting 02 - 02',\n },\n ],\n onSelect: function (item, $dom, event) {\n console.info(item, $dom, event);\n return item.html;\n },\n },\n ],\n },\n ],\n});" }, { "id": "component/setting.md:185", "file": "component/setting.md", "line": 185, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
setting: true,
|
|
settings: [
|
|
{
|
|
html: 'PIP Mode',
|
|
tooltip: 'Close',
|
|
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
|
switch: false,
|
|
onSwitch: function (item, $dom, event) {
|
|
console.info(item, $dom, event);
|
|
const nextState = !item.switch;
|
|
art.pip = nextState;
|
|
item.tooltip = nextState ? 'Open' : 'Close';
|
|
return nextState;
|
|
},
|
|
},
|
|
],
|
|
});` }, { "id": "component/setting.md:229", "file": "component/setting.md", "line": 229, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
setting: true,
|
|
settings: [
|
|
{
|
|
html: 'Slider',
|
|
tooltip: '5x',
|
|
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
|
range: [5, 1, 10, 1],
|
|
onChange: function (item, $dom, event) {
|
|
console.info(item, $dom, event);
|
|
return item.range[0] + 'x';
|
|
},
|
|
},
|
|
],
|
|
});` }, { "id": "component/setting.md:253", "file": "component/setting.md", "line": 253, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
setting: true,
|
|
});
|
|
|
|
art.setting.show = true;
|
|
|
|
art.setting.add({
|
|
html: 'Slider',
|
|
tooltip: '5x',
|
|
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
|
range: [5, 1, 10, 1],
|
|
});` }, { "id": "component/setting.md:274", "file": "component/setting.md", "line": 274, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
setting: true,
|
|
flip: true,
|
|
settings: [
|
|
{
|
|
name: 'slider',
|
|
html: 'Slider',
|
|
tooltip: '5x',
|
|
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
|
range: [5, 1, 10, 1],
|
|
},
|
|
],
|
|
});
|
|
|
|
art.setting.show = true;
|
|
|
|
art.on('ready', () => {
|
|
setTimeout(() => {
|
|
// Delete the setting by name
|
|
art.setting.remove('slider');
|
|
}, 3000);
|
|
});` }, { "id": "component/setting.md:305", "file": "component/setting.md", "line": 305, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
setting: true,
|
|
settings: [
|
|
{
|
|
name: 'slider',
|
|
html: 'Slider',
|
|
tooltip: '5x',
|
|
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
|
range: [5, 1, 10, 1],
|
|
},
|
|
],
|
|
});
|
|
|
|
art.setting.show = true;
|
|
|
|
art.on('ready', () => {
|
|
setTimeout(() => {
|
|
// Update the setting by name
|
|
art.setting.update({
|
|
name: 'slider',
|
|
html: 'PIP Mode',
|
|
tooltip: 'Close',
|
|
icon: '<img width="22" height="22" src="/assets/img/state.svg">',
|
|
switch: false,
|
|
});
|
|
}, 3000);
|
|
});` }, { "id": "start/option.md:13", "file": "start/option.md", "line": 13, "code": "var art = new Artplayer({\n container: '.artplayer-app', \n // container: document.querySelector('.artplayer-app'),\n url: '/assets/sample/video.mp4',\n});" }, { "id": "start/option.md:53", "file": "start/option.md", "line": 53, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "start/option.md:64", "file": "start/option.md", "line": 64, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n});\n\nsetTimeout(() => {\n art.url = '/assets/sample/video.mp4';\n}, 1000);" }, { "id": "start/option.md:92", "file": "start/option.md", "line": 92, "code": "var art = new Artplayer({\n id: 'your-url-id',\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});" }, { "id": "start/option.md:109", "file": "start/option.md", "line": 109, "code": "var art = new Artplayer(\n {\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n },\n function onReady(art) {\n this.play()\n },\n);" }, { "id": "start/option.md:151", "file": "start/option.md", "line": 151, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n poster: '/assets/sample/poster.jpg',\n});" }, { "id": "start/option.md:168", "file": "start/option.md", "line": 168, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n theme: '#ffad00',\n});" }, { "id": "start/option.md:185", "file": "start/option.md", "line": 185, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n volume: 0.5,\n});" }, { "id": "start/option.md:208", "file": "start/option.md", "line": 208, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n isLive: true,\n});" }, { "id": "start/option.md:225", "file": "start/option.md", "line": 225, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});" }, { "id": "start/option.md:242", "file": "start/option.md", "line": 242, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoplay: true,\n muted: true,\n});" }, { "id": "start/option.md:266", "file": "start/option.md", "line": 266, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoSize: true,\n});" }, { "id": "start/option.md:283", "file": "start/option.md", "line": 283, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoMini: true,\n});" }, { "id": "start/option.md:300", "file": "start/option.md", "line": 300, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n loop: true,\n});" }, { "id": "start/option.md:317", "file": "start/option.md", "line": 317, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n flip: true,\n setting: true,\n});" }, { "id": "start/option.md:335", "file": "start/option.md", "line": 335, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n playbackRate: true,\n setting: true,\n});" }, { "id": "start/option.md:353", "file": "start/option.md", "line": 353, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n aspectRatio: true,\n setting: true,\n});" }, { "id": "start/option.md:371", "file": "start/option.md", "line": 371, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n screenshot: true,\n});" }, { "id": "start/option.md:394", "file": "start/option.md", "line": 394, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n});" }, { "id": "start/option.md:411", "file": "start/option.md", "line": 411, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n hotkey: true,\n});" }, { "id": "start/option.md:442", "file": "start/option.md", "line": 442, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n pip: true,\n});" }, { "id": "start/option.md:459", "file": "start/option.md", "line": 459, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n mutex: true,\n});" }, { "id": "start/option.md:476", "file": "start/option.md", "line": 476, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n backdrop: false, // \u5173\u95ED\u6BDB\u73BB\u7483\u6548\u679C\n});" }, { "id": "start/option.md:493", "file": "start/option.md", "line": 493, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreen: true,\n});" }, { "id": "start/option.md:510", "file": "start/option.md", "line": 510, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreenWeb: true,\n});" }, { "id": "start/option.md:527", "file": "start/option.md", "line": 527, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitleOffset: true,\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n },\n setting: true,\n});" }, { "id": "start/option.md:548", "file": "start/option.md", "line": 548, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n miniProgressBar: true,\n});" }, { "id": "start/option.md:567", "file": "start/option.md", "line": 567, "code": "var $container = document.querySelector('.artplayer-app');\n$container.innerHTML = Artplayer.html;\n\nvar art = new Artplayer({\n container: $container,\n url: '/assets/sample/video.mp4',\n useSSR: true,\n});" }, { "id": "start/option.md:587", "file": "start/option.md", "line": 587, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n playsInline: true,\n});" }, { "id": "start/option.md:604", "file": "start/option.md", "line": 604, "code": `var img = '/assets/sample/layer.png';
|
|
var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
layers: [
|
|
{
|
|
name: 'potser',
|
|
html: \`<img style="width: 100px" src="\${img}">\`,
|
|
style: {
|
|
position: 'absolute',
|
|
top: '20px',
|
|
right: '20px',
|
|
opacity: '.9',
|
|
},
|
|
click: function (...args) {
|
|
console.info('click', args);
|
|
art.layers.show = false;
|
|
},
|
|
mounted: function (...args) {
|
|
console.info('mounted', args);
|
|
},
|
|
},
|
|
],
|
|
});` }, { "id": "start/option.md:646", "file": "start/option.md", "line": 646, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n setting: true,\n settings: [\n {\n html: 'setting01',\n selector: [\n {\n html: 'setting01-01',\n },\n {\n html: 'setting01-02',\n },\n ],\n onSelect: function (...args) {\n console.info(args);\n },\n },\n {\n html: 'setting02',\n selector: [\n {\n html: 'setting02-01',\n },\n {\n html: 'setting02-02',\n },\n ],\n onSelect: function (...args) {\n console.info(args);\n },\n },\n ],\n});" }, { "id": "start/option.md:699", "file": "start/option.md", "line": 699, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n contextmenu: [\n {\n html: 'your-menu',\n click: function (...args) {\n console.info('click', args);\n art.contextmenu.show = false;\n },\n },\n ],\n});" }, { "id": "start/option.md:730", "file": "start/option.md", "line": 730, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n controls: [\n {\n position: 'left',\n html: 'your-control',\n tooltip: 'Your Control',\n style: {\n color: 'green',\n },\n click: function (...args) {\n console.info('click', args);\n },\n },\n ],\n});" }, { "id": "start/option.md:771", "file": "start/option.md", "line": 771, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n quality: [\n {\n default: true,\n html: 'SD 480P',\n url: '/assets/sample/video.mp4',\n },\n {\n html: 'HD 720P',\n url: '/assets/sample/video.mp4',\n },\n ],\n});" }, { "id": "start/option.md:803", "file": "start/option.md", "line": 803, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n highlight: [\n {\n time: 60,\n text: 'One more chance',\n },\n {\n time: 120,\n text: '\u8C01\u3067\u3082\u3044\u3044\u306F\u305A\u306A\u306E\u306B',\n },\n {\n time: 180,\n text: '\u590F\u306E\u60F3\u3044\u51FA\u304C\u307E\u308F\u308B',\n },\n {\n time: 240,\n text: '\u3053\u3093\u306A\u3068\u3053\u306B\u3042\u308B\u306F\u305A\u3082\u306A\u3044\u306E\u306B',\n },\n {\n time: 300,\n text: '\uFF0D\uFF0D\u7EC8\u308F\u308A\uFF0D\uFF0D',\n },\n ],\n});" }, { "id": "start/option.md:841", "file": "start/option.md", "line": 841, "code": "function myPlugin(art) {\n console.info(art);\n return {\n name: 'myPlugin',\n something: 'something',\n doSomething: function () {\n console.info('doSomething');\n },\n };\n}\n\nvar art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n plugins: [myPlugin],\n});" }, { "id": "start/option.md:878", "file": "start/option.md", "line": 878, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n thumbnails: {\n url: '/assets/sample/thumbnails.png',\n number: 60,\n column: 10,\n },\n});" }, { "id": "start/option.md:915", "file": "start/option.md", "line": 915, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n subtitle: {\n url: '/assets/sample/subtitle.srt',\n type: 'srt',\n encoding: 'utf-8',\n escape: true,\n style: {\n color: '#03A9F4',\n 'font-size': '30px',\n },\n },\n});" }, { "id": "start/option.md:941", "file": "start/option.md", "line": 941, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n moreVideoAttr: {\n 'webkit-playsinline': true,\n playsInline: true,\n },\n});" }, { "id": "start/option.md:961", "file": "start/option.md", "line": 961, "code": `var art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
icons: {
|
|
loading: '<img src="/assets/img/ploading.gif">',
|
|
state: '<img src="/assets/img/state.png">',
|
|
},
|
|
});` }, { "id": "start/option.md:987", "file": "start/option.md", "line": 987, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.m3u8',\n type: 'm3u8',\n});" }, { "id": "start/option.md:1018", "file": "start/option.md", "line": 1018, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.m3u8',\n customType: {\n m3u8: function (video, url, art) {\n //\n },\n },\n});" }, { "id": "start/option.md:1039", "file": "start/option.md", "line": 1039, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n lang: 'en',\n});" }, { "id": "start/option.md:1064", "file": "start/option.md", "line": 1064, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n lang: 'your-lang',\n i18n: {\n 'your-lang': {\n Play: 'Your Play'\n },\n },\n});" }, { "id": "start/option.md:1081", "file": "start/option.md", "line": 1081, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n i18n: {\n 'zh-cn': {\n Play: 'Your Play'\n },\n 'zh-tw': {\n Play: 'Your Play'\n },\n },\n});" }, { "id": "start/option.md:1111", "file": "start/option.md", "line": 1111, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n lock: true,\n});" }, { "id": "start/option.md:1128", "file": "start/option.md", "line": 1128, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n gesture: false,\n});" }, { "id": "start/option.md:1145", "file": "start/option.md", "line": 1145, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fastForward: true,\n});" }, { "id": "start/option.md:1162", "file": "start/option.md", "line": 1162, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n id: 'your-url-id',\n autoPlayback: true,\n});" }, { "id": "start/option.md:1188", "file": "start/option.md", "line": 1188, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoOrientation: true,\n});" }, { "id": "start/option.md:1205", "file": "start/option.md", "line": 1205, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n airplay: true,\n});" }, { "id": "start/option.md:1222", "file": "start/option.md", "line": 1222, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n cssVar: {\n //\n },\n});" }, { "id": "start/option.md:1247", "file": "start/option.md", "line": 1247, "code": "var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n proxy: () => document.createElement('video')\n});" }], ["../compiled/artplayer.js", "../compiled/artplayer-plugin-ads.js", "../compiled/artplayer-plugin-danmuku.js", "../compiled/artplayer-plugin-dash-control.js", "../compiled/artplayer-plugin-hls-control.js", "../compiled/artplayer-tool-iframe.js", "../compiled/artplayer-plugin-vtt-thumbnail.js", "../compiled/artplayer-plugin-chapter.js", "https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.5.17/hls.min.js", "https://cdnjs.cloudflare.com/ajax/libs/dashjs/5.2.1/modern/umd/dash.all.min.js", "https://cdnjs.cloudflare.com/ajax/libs/flv.js/1.6.2/flv.min.js"]);
|
|
})();
|