update docs

docs/document/search-doc-1644585061318.json

@@ -0,0 +1 @@
+[{"title":"How to add setting panel","type":0,"sectionRef":"#","url":"en/Questions/How to add setting panel","content":"How to add setting panel Settings panels are similar to a collection of list selections, and support multi-layer nested Property\tType\tDescriptionhtml\tString、Element\tDOM elements of selector icon\tString、Element\tIcon of selector selector\tArray\tSelector List onSelect\tFunction\tSelector Click event width\tNumber\tPanel width default\tBoolean\tDefault selected description\tString\tDescription Text ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, flip: true, playbackRate: true, aspectRatio: true, settings: [ { html: 'Select Subtitle', width: 250, 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 onSubtitleSelect(item, $dom) { console.info(item, $dom); art.subtitle.url = item.url; }, }, { html: 'Select Quality', width: 150, 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 onQualitySelect(item, $dom) { console.info(item, $dom); art.switchQuality(item.url, item.html); }, }, { html: 'Multi-layer nested', selector: [ { html: 'Nested 01', selector: [ { html: 'Nested 02', }, { html: 'Nested 02', }, ], }, { html: 'Nested 01', selector: [ { html: 'Nested 02', }, { html: 'Nested 02', }, ], }, ], }, ], }); Copy","keywords":""},{"title":"How to import types","type":0,"sectionRef":"#","url":"en/Questions/How to import types","content":"How to import types Sometimes you lose TypeScript syntax prompt, then you can import types manually /** * @typedef { import("artplayer/types/artplayer") } Artplayer */ /** * @type {Artplayer} - An Artplayer instance. */ const art1 = {}; /** * @param {Artplayer} art2 - An Artplayer instance. */ function getInstance(art2) { // } Copy","keywords":""},{"title":"Static propertys","type":0,"sectionRef":"#","url":"class","content":"","keywords":""},{"title":"instances​","type":1,"pageTitle":"Static propertys","url":"class#instances","content":"Type: Array A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(Artplayer.instances.length); }); Copy "},{"title":"version​","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env​","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils​","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"title":"config​","type":1,"pageTitle":"Static propertys","url":"class#config","content":"Type: Object Store native properties and methods of video ▶ Run Code console.info(Artplayer.config); Copy "},{"title":"scheme​","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"title":"validator​","type":1,"pageTitle":"Static propertys","url":"class#validator","content":"Type: Function Validator for player option "},{"title":"option​","type":1,"pageTitle":"Static propertys","url":"class#option","content":"Type: Object Player default option ▶ Run Code console.info(Artplayer.option); Copy "},{"title":"html​","type":1,"pageTitle":"Static propertys","url":"class#html","content":"Type: String Player defaults HTML String, usually used for SSR ▶ Run Code console.info(Artplayer.html); Copy "},{"title":"kindOf​","type":1,"pageTitle":"Static propertys","url":"class#kindof","content":"Type: Function JS type identification function ▶ Run Code console.info(Artplayer.kindOf('0')); console.info(Artplayer.kindOf(0)); console.info(Artplayer.kindOf({})); console.info(Artplayer.kindOf([])); Copy "},{"title":"Use with React Portal","type":0,"sectionRef":"#","url":"en/Questions/Use with react portal","content":"Use with React Portal It is also very easy to use React Components in layers, contextmenu, controls. Handle more complex logic through ReactDOM.createPortal. 👉 Click to open an online demo import React, { useState, useEffect } from "react"; import ReactDOM, { createPortal } from "react-dom"; import ArtLine truncated