update docs

docs/document/search-doc.json

@@ -1 +1 @@
-[{"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":"Add select in the controls","type":0,"sectionRef":"#","url":"en/Questions/Create selector in the controls","content":"Add select in the controls Sometimes you need to add a list in the controls, then you can use the selector and onSelect attribute when adding controls ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '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) { art.subtitle.switch(item.url, { name: $dom.innerText, }); return 'You click ' + item.html; }, }, ], }); Copy","keywords":""},{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create button in the controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '<button type="button">Click Me!</button>', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); Copy","keywords":""},{"title":"Handle a single component","type":0,"sectionRef":"#","url":"en/Questions/Handle single component","content":"Handle a single component When we add custom components in layers, contextmenu, controls, setting, It is best to add a name property that is used to position the DOM element of the component. Here are three ways to get the DOM element of the component: component method mounted, instance method query, recommended through name direct acquisition. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, }); art.on('ready', () => { art.layers.add({ name: 'layer1', html: 'your-layer', mounted: function($layer1) { // } }); art.contextmenu.add({ name: 'contextmenu1', html: 'your-contextmenu', mounted: function($contextmenu1) { // } }); art.controls.add({ name: 'control1', html: 'your-control', position: 'right', mounted: function($control1) { // } }); art.setting.add({ name: 'setting1', html: 'your-setting', mounted: function($setting1) { // } }); // Use the query method to get the DOM element of the component var $layer1 = art.query('.art-layer-layer1'); var $contextmenu1 = art.query('.art-contextmenu-contextmenu1'); var $control1 = art.query('.art-control-controLine truncated
+[{"title":"Third party librarys","type":0,"sectionRef":"#","url":"libraries","content":"","keywords":""},{"title":"flv.js​","type":1,"pageTitle":"Third party librarys","url":"libraries#flvjs","content":"Homepage: https://github.com/Bilibili/flv.js ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: '/assets/sample/video.flv', customType: { flv: function (video, url) { const flvPlayer = flvjs.createPlayer({ type: 'flv', url: url, }); flvPlayer.attachMediaElement(video); flvPlayer.load(); }, }, }); Copy "},{"title":"hls.js​","type":1,"pageTitle":"Third party librarys","url":"libraries#hlsjs","content":"Homepage: https://github.com/video-dev/hls.js ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', customType: { m3u8: function (video, url) { var hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); }, }, }); Copy "},{"title":"dash.js​","type":1,"pageTitle":"Third party librarys","url":"libraries#dashjs","content":"Homepage: https://github.com/Dash-Industry-Forum/dash.js ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd', customType: { mpd: function (video, url) { var player = dashjs.MediaPlayer().create(); player.initialize(video, url, true); }, }, }); Copy "},{"title":"shaka-player​","type":1,"pageTitle":"Third party librarys","url":"libraries#shaka-player","content":"Homepage: https://github.com/google/shaka-player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd', customType: { mpd: function (video, url) { shaka.polyfill.installAll(); var player = new shaka.Player(video); player.load(url); }, }, }); Copy "},{"title":"webtorrent​","type":1,"pageTitle":"Third party librarys","url":"libraries#webtorrent","content":"Homepage: https://github.com/webtorrent/webtorrent ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4', type: 'torrent', customType: { torrent: function (video, url, art) { var client = new WebTorrent(); art.loading.show = true; client.add(url, function (torrent) { var file = torrent.files[0]; file.renderTo(video, { autoplay: true, }); }); }, }, }); art.on('ready', () => { art.template.$video.controls = false; }); Copy "},{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create button in the controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '<button type="button">Click Me!</button>', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); Copy","keywords":""},{"title":"Add select in the controls","type":0,"sectionRef":"#","url":"en/Questions/Create selector in the controls","content":"Add select in the controls Sometimes you need to add a list in the controls, then you can use the selector and onSelect attribute when adding controls ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '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) { art.subtitle.switch(item.url, { name: $dom.innerText, }); return 'You click ' + item.html; }, }, ], }); 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: Line truncated