+
+
+
+
+
+ 
`,
+ click: function() {
+ art.destroy(true);
+ art = new Artplayer({
+ autoplay: true,
+ container: '.artplayer-app',
+ url: url + '/video/you-name.mp4',
+ });
+ },
+ style: {
+ position: 'absolute',
+ top: '20px',
+ right: '20px',
+ opacity: '.9',
+ },
+ },
+ ],
+ quality: [
+ {
+ default: true,
+ name: '标清 480P',
+ url: url + '/video/one-more-time-one-more-chance-480p.mp4',
+ },
+ {
+ name: '高清 720P',
+ url: url + '/video/one-more-time-one-more-chance-720p.mp4',
+ },
+ ],
+ thumbnails: {
+ url: url + '/image/one-more-time-one-more-chance-thumbnails.png',
+ width: 190,
+ height: 107,
+ },
+ subtitle: {
+ url: url + '/subtitle/one-more-time-one-more-chance.srt',
+ style: {
+ color: '#03A9F4',
+ },
+ },
+ highlight: [
+ {
+ time: 60,
+ text: 'One more chance',
+ },
+ {
+ time: 120,
+ text: '谁でもいいはずなのに',
+ },
+ {
+ time: 180,
+ text: '夏の想い出がまわる',
+ },
+ {
+ time: 240,
+ text: 'こんなとこにあるはずもないのに',
+ },
+ {
+ time: 300,
+ text: '－－终わり－－',
+ },
+ ],
+ controls: [
+ {
+ name: 'preview',
+ position: 'right',
+ html: '打开',
+ mounted: $preview => {
+ art.plugins.localPreview.attach($preview);
+ },
+ },
+ ],
+ icons: {
+ loading: '
',
+ },
+});
\ No newline at end of file
diff --git a/docs/assets/example/thumbnail.js b/docs/assets/example/thumbnail.js
new file mode 100644
index 000000000..ff01395e0
--- /dev/null
+++ b/docs/assets/example/thumbnail.js
@@ -0,0 +1 @@
+console.log('thumbnail');
\ No newline at end of file
diff --git a/docs/assets/img/ploading.gif b/docs/assets/img/ploading.gif
new file mode 100644
index 000000000..1a8c97d04
Binary files /dev/null and b/docs/assets/img/ploading.gif differ
diff --git a/docs/assets/js/common.js b/docs/assets/js/common.js
new file mode 100644
index 000000000..b5f30d5b4
--- /dev/null
+++ b/docs/assets/js/common.js
@@ -0,0 +1,176 @@
+(function() {
+ var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+ if (isMobile) {
+ window.location.href = './mobile.html';
+ return;
+ }
+
+ var $codeMirror = document.querySelector('.codeMirrorWrap');
+ var $lib = document.querySelector('.libsInput');
+ var $run = document.querySelector('.run');
+ var loaddLib = [];
+
+ consola.creat({
+ target: '.console',
+ size: '100%',
+ zIndex: 99,
+ });
+
+ var mirror = CodeMirror($codeMirror, {
+ lineNumbers: true,
+ mode: 'javascript',
+ matchBrackets: true,
+ styleActiveLine: true,
+ theme: 'dracula',
+ value: '',
+ });
+
+ function initArt(art) {
+ Artplayer.config.video.events.forEach(function(item) {
+ art.on('video:' + item, function(event) {
+ console.log('video: ' + event.type);
+ });
+ });
+ }
+
+ function getURLParameters(url) {
+ return (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(function(a, v) {
+ return (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a;
+ }, {});
+ }
+
+ function getExt(url) {
+ if (url.includes('?')) {
+ return getExt(url.split('?')[0]);
+ }
+
+ if (url.includes('#')) {
+ return getExt(url.split('#')[0]);
+ }
+
+ return url
+ .trim()
+ .toLowerCase()
+ .split('.')
+ .pop();
+ }
+
+ function loadScript(url) {
+ return new Promise(function(resolve, reject) {
+ var script = document.createElement('script');
+ script.type = 'text/javascript';
+ script.src = url;
+ script.onload = function() {
+ resolve(url);
+ };
+ script.onerror = function() {
+ reject(new Error('Loading script failed:' + url));
+ };
+ document.querySelector('head').appendChild(script);
+ });
+ }
+
+ function loadStyle(url) {
+ return new Promise(function(resolve, reject) {
+ var link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = url;
+ link.onload = function() {
+ resolve(url);
+ };
+ link.onerror = function() {
+ reject(new Error('Loading style failed:' + url));
+ };
+ document.querySelector('head').appendChild(link);
+ });
+ }
+
+ function loadLib(libs) {
+ var libPromise = [];
+ var libsDecode = decodeURIComponent(libs || '');
+ libsDecode
+ .split(/\r?\n/)
+ .filter(function(url) {
+ return !loaddLib.includes(url);
+ })
+ .forEach(function(url) {
+ var ext = getExt(url);
+ if (ext === 'js') {
+ libPromise.push(loadScript(url));
+ } else if (ext === 'css') {
+ libPromise.push(loadStyle(url));
+ }
+ });
+ $lib.value = libsDecode;
+ return Promise.all(libPromise);
+ }
+
+ function runExample(name) {
+ fetch(`./assets/example/${name}.js`)
+ .then(function(response) {
+ return response.text();
+ })
+ .then(function(text) {
+ mirror.setValue(text);
+ runCode();
+ })
+ .catch(function(err) {
+ console.error(err.message);
+ });
+ }
+
+ function loadCode(code, example) {
+ if (example) {
+ runExample(example);
+ } else if (code) {
+ mirror.setValue(decodeURIComponent(code).trim());
+ runCode();
+ } else {
+ runExample('index');
+ }
+ }
+
+ function runCode() {
+ Artplayer.instances.forEach(function(art) {
+ art.destroy(true);
+ });
+ var code = mirror.getValue();
+ eval(code);
+ initArt(Artplayer.instances[0]);
+ console.info('Player initialization completed');
+ }
+
+ function initApp() {
+ var _getURLParameters = getURLParameters(window.location.href),
+ code = _getURLParameters.code,
+ libs = _getURLParameters.libs;
+ example = _getURLParameters.example;
+
+ loadLib(libs)
+ .then(function(result) {
+ loaddLib = loaddLib.concat(result);
+ loadCode(code, example);
+ })
+ .catch(function(err) {
+ console.error(err.message);
+ });
+ }
+
+ window.addEventListener('error', function(err) {
+ console.error(err.message);
+ });
+
+ window.addEventListener('unhandledrejection', function(err) {
+ console.error(err.message);
+ });
+
+ $run.addEventListener('click', function(e) {
+ var libs = encodeURIComponent($lib.value);
+ var code = encodeURIComponent(mirror.getValue());
+ var url = window.location.origin + window.location.pathname + '?libs=' + libs + '&code=' + code;
+ history.pushState(null, null, url);
+ initApp();
+ });
+
+ initApp();
+})();
diff --git a/docs/index.html b/docs/index.html
index d0bbb4f38..620aefec8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,14 +1,51 @@
-
-
-