ArtPlayer/docs/document/search-doc.json

[{"title":"Danmuku plugin","type":0,"sectionRef":"#","url":"en/Plugins/danmuku","content":"Danmuku plugin Tip The documentation of the current danmaku library plug-in, only the Chinese version 👉 https://artplayer.org/document/zh-cn/Plugins/danmuku/","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); });  "},{"title":"version​","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version);  "},{"title":"env​","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env);  "},{"title":"utils​","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Artplayer.utils);  "},{"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);  "},{"title":"scheme​","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme);  "},{"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);  "},{"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);  "},{"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([]));  "},{"title":"Ads Plugin","type":0,"sectionRef":"#","url":"en/Plugins/ads","content":"","keywords":""},{"title":"Demo​","type":1,"pageTitle":"Ads Plugin","url":"en/Plugins/ads#demo","content":"👉 View Demo "},{"title":"Install​","type":1,"pageTitle":"Ads Plugin","url":"en/Plugins/ads#install","content":""},{"title":"Install from npm:​","type":1,"pageTitle":"Ads Plugin","url":"en/Plugins/ads#install-from-npm","content":"$ npm install artplayer-plugin-ads  "},{"title":"Install from yarn:​","type":1,"pageTitle":"Ads Plugin","url":"en/Plugins/ads#install-from-yarn","content":"$ yarn add artplayer-plugin-ads  "},{"title":"Install from script:​","type":1,"pageTitle":"Ads Plugin","url":"en/Plugins/ads#install-from-script","content":"<!-- local --> <script src="path/to/artplayer-plugin-ads.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>  Then you can access the plugin function through window.artplayerPluginAds "},{"title":"Use​","type":1,"pageTitle":"Ads Plugin","url":"en/Plugins/ads#use","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, fullscreen: true, fullscreenWeb: true, plugins: [ artplayerPluginAds({ // html ad, ignore this value if it is a video ad html: '<img src="/assets/sample/poster.jpg">', // The address of the video ad video: '/assets/sample/test1.mp4', // Ad redirect URL, if empty, no redirect url: 'http://artplayer.org', // The length of time that must be watched, the period cannot be skipped, the unit is seconds // When the value is greater than or equal to totalDuration, the ad cannot be closed early // When the value is equal to or less than 0, the ad can be turned off at any time playDuration: 5, // The total duration of the ad, in seconds totalDuration: 10, // Whether the video ads defaults to silence muted: false, // Multilingual support i18n: { close: 'Close Ads', countdown: '%s seconds', detail: 'Check Detail', canBeClosed: 'Ads can be closed after %s seconds', }, }), ], }); art.on('artplayerPluginAds:click', (ads) => { console.info('ad is clicked', ads); }); art.on('artplayerPluginAds:skip', (ads) => { console.info('Ads are skipped', ads); });  "},{"title":"Hls Quality Plugin","type":0,"sectionRef":"#","url":"en/Plugins/hls-quality","content":"","keywords":""},{"title":"Overview​","type":1,"pageTitle":"Hls Quality Plugin","url":"en/Plugins/hls-quality#overview","content":"With this plugin, you can add the Hls video quality list to the control or the settings panel "},{"title":"Demo​","type":1,"pageTitle":"Hls Quality Plugin","url":"en/Plugins/hls-quality#demo","content":"👉 View Demo "},{"title":"Install​","type":1,"pageTitle":"Hls Quality Plugin","url":"en/Plugins/hls-quality#install","content":""},{"title":"Install from npm:​","type":1,"pageTitle":"Hls Quality Plugin","url":"en/Plugins/hls-quality#install-from-npm","content":"$ npm install artplayer-plugin-hls-quality  "},{"title":"Install from yarn:​","type":1,"pageTitle":"Hls Quality Plugin","url":"en/Plugins/hls-quality#install-from-yarn","content":"$ yarn add artplayer-plugin-hls-quality  "},{"title":"Install from script:​","type":1,"pageTitle":"Hls Quality Plugin","url":"en/Plugins/hls-quality#install-from-script","content":"<!-- local --> <script src="path/to/artplayer-plugin-hls-quality.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>  Then you can access the plugin function through window.artplayerPluginHlsQuality "},{"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; }, }, ], }); ","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, 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) { // } }); // 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-control1'); // Recommended use the name to get the DOM element of the component var $layer1 = art.layers['layer1']; var $contextmenu1 = art.contextmenu['contextmenu1']; var $control1 = art.controls['control1']; }); 提示 Note that you can't create components with the same name","keywords":""},{"title":"Iframe Plugin","type":0,"sectionRef":"#","url":"en/Plugins/iframe","content":"","keywords":""},{"title":"Overview​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#overview","content":"With this plugin, you can easily control the player in the iframe page in the main page. For example, you can control the functions of the iframe player through code in the main page, or get the value of the iframe player. "},{"title":"Demo​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#demo","content":"👉 View Demo "},{"title":"Install​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#install","content":""},{"title":"Install from npm:​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#install-from-npm","content":"$ npm install artplayer-plugin-iframe  "},{"title":"Install from yarn:​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#install-from-yarn","content":"$ yarn add artplayer-plugin-iframe  "},{"title":"Install from script:​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#install-from-script","content":"<!-- local --> <script src="path/to/artplayer-plugin-iframe.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script>  Then you can access the plugin function through window.artplayerPluginIframe "},{"title":"Use​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#use","content":""},{"title":"index.html​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#indexhtml","content":"index.html <!DOCTYPE html><html> <head> <title>ArtPlayer</title> <meta charset="UTF-8" /> </head> <body> <iframe id="iframe"></iframe> <script src="path/to/artplayer-plugin-iframe.js"></script> <script> const iframe = new ArtplayerPluginIframe({ // iframe element iframe: document.querySelector('#iframe'), // iframe url url: 'path/to/iframe.html', }); // Push message to iframe iframe.commit(() => { var art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4', }); }); </script> </body></html> "},{"title":"iframe.html​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#iframehtml","content":"iframe.html <!DOCTYPE html><html> <head> <title>ArtPlayer</title> <meta charset="UTF-8" /> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div class="artplayer-app" style="width: 100%; height: 100%;"></div> <script src="path/to/artplayer.js"></script> <script src="path/to/artplayer-plugin-iframe.js"></script> <script> // Inject the script, receive messages from the instance ArtplayerPluginIframe.inject(); </script> </body></html> "},{"title":"Instance Api​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#instance-api","content":""},{"title":"commit​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#commit","content":"Type: Function Push message to iframe, the function will run inside the iframe iframe.commit(() => { var art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4', }); }); iframe.commit(() => { art.seek = 5; }); // Get the value from the iframe (async function () { // Use return keyword var currentTime = await iframe.commit(() => { return art.currentTime; }); // Or use resolve method var currentTime2 = await iframe.commit((resolve) => { setTimeout(() => { resolve(art.currentTime); }, 1000); }); })();  "},{"title":"message​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#message","content":"Type: Function Receive message from the iframe iframe.message((event) => { console.log(event); });  "},{"title":"destroy​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#destroy","content":"Type: Function Destroy the instance, cannot communicate with the iframe after destroy iframe.destroy();  "},{"title":"Iframe Api​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#iframe-api","content":"Tip The Iframe Api can only be used in iframe. "},{"title":"inject​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#inject","content":"Type: Function Inject the script, then can receive messages from the instance ArtplayerPluginIframe.inject();  "},{"title":"postMessage​","type":1,"pageTitle":"Iframe Plugin","url":"en/Plugins/iframe#postmessage","content":"Type: Function Push message to instance iframe.message((event) => { console.log(event); }); iframe.commit(() => { ArtplayerPluginIframe.postMessage({ type: 'currentTime', data: art.currentTime, }); });  "},{"title":"Add select in the controls","type":0,"sectionRef":"#","url":"en/Questions/Create_selector_in_the_controls","content":"","keywords":""},{"title":"Switch Subtitle​","type":1,"pageTitle":"Add select in the controls","url":"en/Questions/Create_selector_in_the_controls#switch-subtitle","content":"▶ 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) { console.info(item, $dom); art.subtitle.url = item.url; return 'You click ' + item.html; }, }, ], });  "},{"title":"Switch filter​","type":1,"pageTitle":"Add select in the controls","url":"en/Questions/Create_selector_in_the_controls#switch-filter","content":"▶ Run Code var instagramFilters = [ { "html": "1977", "class": "filter-1977" }, { "html": "Aden", "class": "filter-aden" }, { "html": "Amaro", "class": "filter-amaro" }, { "html": "Ashby", "class": "filter-ashby" }, { "html": "Brannan", "class": "filter-brannan" }, { "html": "Brooklyn", "class": "filter-brooklyn" }, { "html": "Charmes", "class": "filter-charmes" }, { "html": "Clarendon", "class": "filter-clarendon" }, { "html": "Crema", "class": "filter-crema" }, { "html": "Dogpatch", "class": "filter-dogpatch" }, { "html": "Earlybird", "class": "filter-earlybird" }, { "html": "Gingham", "class": "filter-gingham" }, { "html": "Ginza", "class": "filter-ginza" }, { "html": "Hefe", "class": "filter-hefe" }, { "html": "Helena", "class": "filter-helena" }, { "html": "Hudson", "class": "filter-hudson" }, { "html": "Inkwell", "class": "filter-inkwell" }, { "html": "Kelvin", "class": "filter-kelvin" }, { "html": "Kuno", "class": "filter-juno" }, { "html": "Lark", "class": "filter-lark" }, { "html": "Lo-Fi", "class": "filter-lofi" }, { "html": "Ludwig", "class": "filter-ludwig" }, { "html": "Maven", "class": "filter-maven" }, { "html": "Mayfair", "class": "filter-mayfair" }, { "html": "Moon", "class": "filter-moon" }, { "html": "Nashville", "class": "filter-nashville" }, { "html": "Perpetua", "class": "filter-perpetua" }, { "html": "Poprocket", "class": "filter-poprocket" }, { "html": "Reyes", "class": "filter-reyes" }, { "html": "Rise", "class": "filter-rise" }, { "html": "Sierra", "class": "filter-sierra" }, { "html": "Skyline", "class": "filter-skyline" }, { "html": "Slumber", "class": "filter-slumber" }, { "html": "Stinson", "class": "filter-stinson" }, { "html": "Sutro", "class": "filter-sutro" }, { "html": "Toaster", "class": "filter-toaster" }, { "html": "Valencia", "class": "filter-valencia" }, { "html": "Vesper", "class": "filter-vesper" }, { "html": "Walden", "class": "filter-walden" }, { "html": "Willow", "class": "filter-willow" }, { "html": "X-Pro", "class": "filter-xpro-ii" } ] var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: 'Instagram Filters', selector: instagramFilters, onSelect: function (item) { art.template.$video.className = 'art-video ' + item.class; return item.html; }, }, ], });  "},{"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) { // } ","keywords":""},{"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 Artplayer from "artplayer/examples/react/Artplayer"; function Timer({ time }) { return <div>{time}</div>; } function App() { const [art, setArt] = useState(null); const [time, setTime] = useState(0); useEffect(() => { const update = () => setTime((time) => time + 1); setInterval(update, 1000); }, []); return ( <div> <Artplayer option={{ url: "https://artplayer.org/assets/sample/video.mp4", layers: [ { html: "", name: "portal" } ], controls: [ { position: "right", name: "portal", html: "" } ] }} style={{ width: "600px", height: "400px", margin: "60px auto 0" }} getInstance={(art) => { art.on("ready", () => setArt(art)); }} /> {art ? createPortal(<Timer time={time} />, art.layers.portal) : null} {art ? createPortal(<Timer time={time} />, art.controls.portal) : null} </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); ","keywords":""},{"title":"How to add setting panel","type":0,"sectionRef":"#","url":"en/Questions/How_to_add_setting_panel","content":"","keywords":""},{"title":"Add selector list​","type":1,"pageTitle":"How to add setting panel","url":"en/Questions/How_to_add_setting_panel#add-selector-list","content":"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 tooltip\tString\tTooltip 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, 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; // Change the tooltip return item.html; }, }, { html: 'Select 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); // Change the tooltip return 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', }, ], }, ], }, ], });  "},{"title":"Add switch button​","type":1,"pageTitle":"How to add setting panel","url":"en/Questions/How_to_add_setting_panel#add-switch-button","content":"Property\tType\tDescriptionhtml\tString、Element\tDOM elements of selector icon\tString、Element\tIcon of selector switch\tBoolean\tButton default state onSwitch\tFunction\tButton toggle event tooltip\tString\tTooltip 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: 'PIP Mode', tooltip: 'OFF', icon: '<img width="22" heigth="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; // Change the tooltip item.tooltip = nextState ? 'ON' : 'OFF'; // Change the switch state return nextState; }, }, { html: 'Use with selector', width: 200, selector: [ { default: true, html: 'Setting 01', }, { html: 'Setting 02', }, { html: 'Setting 03', switch: false, onSwitch: function (item, $dom, event) { return !item.switch; }, }, { html: 'Setting 04', icon: '', switch: true, onSwitch: function (item, $dom, event) { return !item.switch; }, }, ], onSelect: function (item) { return item.html; }, }, ], });  "},{"title":"Add range slider​","type":1,"pageTitle":"How to add setting panel","url":"en/Questions/How_to_add_setting_panel#add-range-slider","content":"Property\tType\tDescriptionhtml\tString、Element\tDOM elements of selector icon\tString、Element\tIcon of selector range\tArray\tRange default state onRange\tFunction\tRange change event tooltip\tString\tTooltip text const range = [5, 1, 10, 1]; const value = range[0]; const min = range[1]; const max = range[2]; const step = range[3];  ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, flip: true, playbackRate: true, aspectRatio: true, settings: [ { html: 'Range', tooltip: '5x', icon: '<img width="22" heigth="22" src="/assets/img/state.svg">', range: [5, 1, 10, 1], onRange: function (item) { // Change the tooltip return item.range + 'x'; }, }, { html: 'Use with selector', width: 240, selector: [ { default: true, html: 'Setting 01', }, { html: 'Setting 02', }, { html: 'Setting 03', tooltip: '5x', range: [5, 1, 10, 1], onRange: function (item) { return item.range + 'x'; }, }, { html: 'Setting 04', icon: '', tooltip: '5x', range: [5, 1, 10, 1], onRange: function (item) { return item.range + 'x'; }, }, ], onSelect: function (item) { return item.html; }, }, ], });  "},{"title":"Advanced propertys","type":0,"sectionRef":"#","url":"advance","content":"","keywords":""},{"title":"id​","type":1,"pageTitle":"Advanced propertys","url":"advance#id","content":"Type: Number A self-inclusive number of the player instance "},{"title":"option​","type":1,"pageTitle":"Advanced propertys","url":"advance#option","content":"Type: Object After merged options "},{"title":"isFocus​","type":1,"pageTitle":"Advanced propertys","url":"advance#isfocus","content":"Type: Boolean Whether the player instance has been focused "},{"title":"isInput​","type":1,"pageTitle":"Advanced propertys","url":"advance#isinput","content":"Type: Boolean Whether the player instance has been focused on input element "},{"title":"isLock​","type":1,"pageTitle":"Advanced propertys","url":"advance#islock","content":"Type: Boolean Whether the player instance has been locked on mobile "},{"title":"isDestroy​","type":1,"pageTitle":"Advanced propertys","url":"advance#isdestroy","content":"Type: Boolean Whether the player instance is destroyed "},{"title":"whitelist​","type":1,"pageTitle":"Advanced propertys","url":"advance#whitelist","content":"Type: Object Manage the whitelist "},{"title":"template​","type":1,"pageTitle":"Advanced propertys","url":"advance#template","content":"Type: Object Manage player HTML "},{"title":"query​","type":1,"pageTitle":"Advanced propertys","url":"advance#query","content":"Type: Function Method query You can find DOM elements in the current player instance, equivalent to document.querySelector('.artplayer-app').querySelector ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { var $video = art.template.query('.art-video'); console.info($video); });  "},{"title":"query​","type":1,"pageTitle":"Advanced propertys","url":"advance#query-1","content":"Type: Function Equal to art.template.query ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { var $video = art.query('.art-video'); console.info($video); });  "},{"title":"events​","type":1,"pageTitle":"Advanced propertys","url":"advance#events","content":"Type: Object Manage the events "},{"title":"proxy​","type":1,"pageTitle":"Advanced propertys","url":"advance#proxy","content":"Type: Function Proxy native event method, easy to manage and destroy the event ▶ Run Code var container = document.querySelector('.artplayer-app'); var art = new Artplayer({ container: container, url: '/assets/sample/video.mp4', }); art.proxy(container, 'click', (event) => { console.info(event); });  "},{"title":"storage​","type":1,"pageTitle":"Advanced propertys","url":"advance#storage","content":"Type: Object Manage persistent storage objects The player will automatically add a json object called artplayer_settings to the localstorage Property\tType\tDescriptionget\tFunction\tGet value set\tFunction\tSet value del\tFunction\tDelete value clear\tFunction\tClean value ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.storage.set('your-key', 'your-value'); art.storage.get('your-key'); art.storage.del('your-key'); art.storage.clear();  "},{"title":"icons​","type":1,"pageTitle":"Advanced propertys","url":"advance#icons","content":"Type: Object Manage player icons "},{"title":"i18n​","type":1,"pageTitle":"Advanced propertys","url":"advance#i18n","content":"Type: Object Manage player i18n "},{"title":"get​","type":1,"pageTitle":"Advanced propertys","url":"advance#get","content":"Type: Getter/Setter Method get can get the value of the language value ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.i18n.get('Play')); });  "},{"title":"update​","type":1,"pageTitle":"Advanced propertys","url":"advance#update","content":"Type: Function Method update can add more languages ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'jp', }); art.i18n.update({ 'zh-cn': { Language: '简体', }, 'zh-tw': { Language: '繁體', }, en: { Language: 'English', }, jp: { Language: '日文', }, fr: { Language: 'Français', }, ru: { Language: 'Russe', }, });  "},{"title":"player​","type":1,"pageTitle":"Advanced propertys","url":"advance#player","content":"Type: Object Manage the object of the core function "},{"title":"subtitle​","type":1,"pageTitle":"Advanced propertys","url":"advance#subtitle","content":"Type: Object Management subtitle object "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show","content":"Type: Getter/Setter Property show can control subtitle to display ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', }, }); art.on('ready', () => { art.seek = 20; art.subtitle.show = false; setTimeout(() => { art.subtitle.show = true; }, 3000); });  "},{"title":"style​","type":1,"pageTitle":"Advanced propertys","url":"advance#style","content":"Type: Function Method style can dynamically modify the subtitle style ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', encoding: 'utf-8', style: { color: '#03A9F4', 'font-size': '30px', }, }, }); art.on('ready', () => { art.seek = 20; setTimeout(() => { art.subtitle.style({ color: 'red', 'font-size': '40px', }); }, 3000); });  "},{"title":"url​","type":1,"pageTitle":"Advanced propertys","url":"advance#url","content":"Type: Getter/Setter Propertie url can set and get the subtitle url ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', encoding: 'utf-8', style: { color: '#03A9F4', 'font-size': '30px', }, }, }); art.on('ready', () => { console.info(art.subtitle.url); setTimeout(() => { art.subtitle.url = '/assets/sample/subtitle.srt?t=1'; }, 3000); });  "},{"title":"switch​","type":1,"pageTitle":"Advanced propertys","url":"advance#switch","content":"Type: Function Methods switch like the propertie url setter, but can modify the subtitle option ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', encoding: 'utf-8', style: { color: 'red', 'font-size': '30px', }, }, }); art.on('ready', () => { art.seek = 20; setTimeout(() => { art.subtitle.switch('/assets/sample/subtitle.srt?t=1', { name: 'The new subtitle', style: { color: 'green', 'font-size': '24px', }, }); }, 3000); });  "},{"title":"info​","type":1,"pageTitle":"Advanced propertys","url":"advance#info","content":"Type: Object Manage video info "},{"title":"layers​","type":1,"pageTitle":"Advanced propertys","url":"advance#layers","content":"Type: Object Manage the object of the layers "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show-1","content":"Type: Getter/Setter Property show can control all layers to display ▶ Run Code var img = '/assets/sample/layer.png'; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', layers: [ { html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, }, { html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', left: '20px', opacity: '.9', }, }, ], }); art.on('ready', () => { setTimeout(() => { art.layers.show = false; }, 3000); });  "},{"title":"add​","type":1,"pageTitle":"Advanced propertys","url":"advance#add","content":"Type: Function Method add can dynamically add a layer Property\tType\tDescriptiondisable\tBoolean\tWhether to disable the component name\tString\tThe unique name of the component, used to mark the class name index\tNumber\tComponent index, priority for display html\tString、Element\tDOM element of the component style\tObject\tComponent style object click\tFunction\tComponent click event mounted\tFunction\tTriggered after the component is mounted tooltip\tString\tPrompt text of the component ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); var img = '/assets/sample/layer.png'; art.on('ready', () => { setTimeout(() => { art.layers.add({ html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, }); }, 3000); });  "},{"title":"notice​","type":1,"pageTitle":"Advanced propertys","url":"advance#notice","content":"Type: Object Manage the object of prompt information "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show-2","content":"Type: Getter/Setter Attribute show output custom prompt information, the default residence time is two seconds, and the new information will immediately cover the old information ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.notice.show = 'Custom prompt information 1'; art.notice.show = 'Custom prompt information 2'; });  "},{"title":"controls​","type":1,"pageTitle":"Advanced propertys","url":"advance#controls","content":"Type: Object Manage the object of the control bar "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show-3","content":"Type: Getter/Setter Attribute show can control if the control bar is displayed ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { setTimeout(() => { art.controls.show = false; }, 3000); });  "},{"title":"add​","type":1,"pageTitle":"Advanced propertys","url":"advance#add-1","content":"Type: Function Method add can dynamically add a control Property\tType\tDescriptiondisable\tBoolean\tWhether to disable the component name\tString\tThe unique name of the component, used to mark the class name index\tNumber\tComponent index, priority for display html\tString、Element\tDOM element of the component style\tObject\tComponent style object click\tFunction\tComponent click event mounted\tFunction\tTriggered after the component is mounted tooltip\tString\tPrompt text of the component position\tString\tLocation at left or right ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { setTimeout(() => { art.controls.add({ disable: false, name: 'button', index: 10, position: 'right', html: 'Custom button1', tooltip: 'Custom button1', style: { color: 'red', }, click: function () { console.log('You clicked custom button 1'); }, mounted: function () { console.log('Custom button mounting is complete 1'); }, }); }, 3000); });  "},{"title":"contextmenu​","type":1,"pageTitle":"Advanced propertys","url":"advance#contextmenu","content":"Type: Object Manage the contextmenu "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show-4","content":"Type: Getter/Setter Attribute show can control if the menu is displayed ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.contextmenu.show = true; setTimeout(() => { art.contextmenu.show = false; }, 3000); });  "},{"title":"add​","type":1,"pageTitle":"Advanced propertys","url":"advance#add-2","content":"Type: Function Method add can dynamically add a menu items Property\tType\tDescriptiondisable\tBoolean\tWhether to disable the component name\tString\tThe unique name of the component, used to mark the class name index\tNumber\tComponent index, priority for display html\tString、Element\tDOM element of the component style\tObject\tComponent style object click\tFunction\tComponent click event mounted\tFunction\tTriggered after the component is mounted tooltip\tString\tPrompt text of the component ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.contextmenu.show = true; setTimeout(() => { art.contextmenu.add({ html: 'Custom menu', click: function () { console.info('You clicked the custom menu'); art.contextmenu.show = false; }, }); }, 3000); });  "},{"title":"loading​","type":1,"pageTitle":"Advanced propertys","url":"advance#loading","content":"Type: Object Manage loading icon "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show-5","content":"Type: Getter/Setter Property show can control whether the icon in the load is displayed ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.loading.show = true; setTimeout(() => { art.loading.show = false; }, 3000); });  "},{"title":"mask​","type":1,"pageTitle":"Advanced propertys","url":"advance#mask","content":"Type: Object Manage the object of the mask layer "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show-6","content":"Type: Getter/Setter Attributes show can control whether the mask layer is display ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.mask.show = true; setTimeout(() => { art.mask.show = false; }, 3000); });  "},{"title":"hotkey​","type":1,"pageTitle":"Advanced propertys","url":"advance#hotkey","content":"Type: Object Manage hotkey "},{"title":"add​","type":1,"pageTitle":"Advanced propertys","url":"advance#add-3","content":"Type: Function Methods add can dynamically add a hotkey, the first parameter is key code number, the second parameter is a callback function ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.hotkey.add(65, () => { console.info('You click A'); }); art.hotkey.add(66, () => { console.info('You click B'); }); });  Tip This hotkey will take effect only after the player gets the focus (if you click on the player). "},{"title":"setting​","type":1,"pageTitle":"Advanced propertys","url":"advance#setting","content":"Type: Object Manage the object of the setting panel "},{"title":"show​","type":1,"pageTitle":"Advanced propertys","url":"advance#show-7","content":"Type: Getter/Setter Property show can control the setting panel to display ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, autoSize: true, }); art.on('ready', () => { art.seek = 20; art.setting.show = true; setTimeout(() => { art.setting.show = false; }, 3000); });  "},{"title":"plugins​","type":1,"pageTitle":"Advanced propertys","url":"advance#plugins","content":"Type: Object Manage plugin "},{"title":"add​","type":1,"pageTitle":"Advanced propertys","url":"advance#add-4","content":"Type: Function Method add can be dynamically add a plugin ▶ Run Code function myPlugin(art) { console.info('You can access an instance of a player in the plugin'); return { name: 'myPlugin', something: 'Custom export properties', doSomething: function () { console.info('Custom export method'); }, }; } var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.plugins.add(myPlugin); console.info(art.plugins.myPlugin.something); console.info(art.plugins.myPlugin.doSomething()); });  "},{"title":"Common events","type":0,"sectionRef":"#","url":"events","content":"","keywords":""},{"title":"Native event​","type":1,"pageTitle":"Common events","url":"events#native-event","content":"For more information, please read Mozilla Video Events Event name\tFired Whenvideo:canplay\tThe browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. video:canplaythrough\tThe browser estimates it can play the media up to its end without stopping for content buffering. video:complete\tThe rendering of an OfflineAudioContext is terminated. video:durationchange\tThe duration attribute has been updated. video:emptied\tThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. video:ended\tPlayback has stopped because the end of the media was reached. video:loadeddata\tThe first frame of the media has finished loading. video:loadedmetadata\tThe metadata has been loaded. video:pause\tPlayback has been paused. video:play\tPlayback has begun. video:playing\tPlayback is ready to start after having been paused or delayed due to lack of data. video:progress\tFired periodically as the browser loads a resource. video:ratechange\tThe playback rate has changed. video:seeked\tA seek operation completed. video:seeking\tA seek operation began. video:stalled\tThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming. video:suspend\tMedia data loading has been suspended. video:timeupdate\tThe time indicated by the currentTime attribute has been updated. video:volumechange\tThe volume has changed. video:waiting\tPlayback has stopped because of a temporary lack of data ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('video:play', (...args) => { console.info(args); });  "},{"title":"Custom event​","type":1,"pageTitle":"Common events","url":"events#custom-event","content":""},{"title":"ready​","type":1,"pageTitle":"Common events","url":"events#ready","content":"Fired when the player is initialized, and the video can be played ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', (...args) => { console.info(args); });  "},{"title":"play​","type":1,"pageTitle":"Common events","url":"events#play","content":"Fired after the video is played ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('play', (...args) => { console.info(args); });  "},{"title":"pause​","type":1,"pageTitle":"Common events","url":"events#pause","content":"Fired after the video is pause ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('pause', (...args) => { console.info(args); });  "},{"title":"seek​","type":1,"pageTitle":"Common events","url":"events#seek","content":"Fired when the video is time jump ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('seek', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.seek = 5; });  Tip Set the art.currentTime will not fired the seek event "},{"title":"volume​","type":1,"pageTitle":"Common events","url":"events#volume","content":"Fired when the video volume changes ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('volume', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.volume = 0.5; });  "},{"title":"destroy​","type":1,"pageTitle":"Common events","url":"events#destroy","content":"Fired when the player instance is destroyed ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('destroy', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.destroy(); });  "},{"title":"focus​","type":1,"pageTitle":"Common events","url":"events#focus","content":"Fired when the player gets focus, if you click on the player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('focus', (...args) => { console.info(args); });  "},{"title":"blur​","type":1,"pageTitle":"Common events","url":"events#blur","content":"Fired when the player loses focus, such as the area other than the player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('blur', (...args) => { console.info(args); });  "},{"title":"hover​","type":1,"pageTitle":"Common events","url":"events#hover","content":"Fired when mouse moves player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('hover', (state) => { // state for true, the mouse moves from the outside to the player // state for false, the mouse moves from the player to the outside console.info(state); });  "},{"title":"resize​","type":1,"pageTitle":"Common events","url":"events#resize","content":"Fired when the player is changed ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, }); art.on('resize', (...args) => { console.info(args); });  "},{"title":"mousemove​","type":1,"pageTitle":"Common events","url":"events#mousemove","content":"Fired when the mouse is played, this and hover is different, it will trigger multiple times ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('mousemove', (...args) => { console.info(args); });  "},{"title":"url​","type":1,"pageTitle":"Common events","url":"events#url","content":"Fired when the video url changes ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('url', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.url = '/assets/sample/video.mp4?t=0'; });  "},{"title":"fullscreen​","type":1,"pageTitle":"Common events","url":"events#fullscreen","content":"Fired when the player window is full screen ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreen: true, }); art.on('fullscreen', (...args) => { console.info(args); });  "},{"title":"fullscreenWeb​","type":1,"pageTitle":"Common events","url":"events#fullscreenweb","content":"Fired when player webpage full screen ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, }); art.on('fullscreenWeb', (...args) => { console.info(args); });  "},{"title":"hotkey​","type":1,"pageTitle":"Common events","url":"events#hotkey","content":"Trigger when hotkey are used ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('hotkey', (...args) => { console.info(args); });  "},{"title":"Third party librarys","type":0,"sectionRef":"#","url":"libraries","content":"","keywords":""},{"title":"Overview​","type":1,"pageTitle":"Third party librarys","url":"libraries#overview","content":"With the option customType, it is easy to integrate third-party video decoding libraries. When there are multiple decoders, you can add them to customType. When the decoding library is too large, you can also use js to dynamically import By default, the player will parse the video type of the url option (such as m3u8, flv, mpd). If the correct video type cannot be parsed, you can add the type option to indicate the video type // Now this player can play: m3u8, flv, mpd var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.m3u8', type: 'm3u8', // Optional, but it is better to fill in customType: { m3u8: async function (video, url) { const { default: Hls } = await import('hls.js'); }, flv: async function (video, url) { const { default: flvjs } = await import('flv.js').default; }, mpd: async function (video, url) { const { default: dashjs } = await import('dash.js').default; }, }, }); // You can switch to a new video address art.url = '/assets/sample/video-new.m3u8'; // You can also switch new video type art.type = 'flv'; art.url = '/assets/sample/video.flv'; art.type = 'mpd'; art.url = '/assets/sample/video.mpd';  Tip If customType is used, the previous decoder instance must be destroyed before switching url, otherwise memory leakage will occur var hls = null; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.m3u8', type: 'm3u8', customType: { m3u8: async function (video, url) { const { default: Hls } = await import('hls.js'); // Destroy the last decoder instance before switching url if (hls) { hls.destroy(); } // When the player is destroyed, the decoder instance must also be destroyed art.on('destroy', () => { if (hls) { hls.destroy(); } }); hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); }, }, }); // Switch to a new video address art.url = '/assets/sample/video-new.m3u8';  "},{"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) { if (flvjs.isSupported()) { const flvPlayer = flvjs.createPlayer({ type: 'flv', url: url, }); flvPlayer.attachMediaElement(video); flvPlayer.load(); } else { art.notice.show = 'Does not support playback of flv'; } }, }, });  "},{"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) { if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = url; } else { art.notice.show = 'Does not support playback of m3u8'; } }, }, });  "},{"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); }, }, });  "},{"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); }, }, });  "},{"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; });  "},{"title":"快速上手","type":0,"sectionRef":"#","url":"zh-cn","content":"","keywords":""},{"title":"安装​","type":1,"pageTitle":"快速上手","url":"zh-cn#安装","content":"npmyarnscript npm install artplayer import Artplayer from 'artplayer';const art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4',}); "},{"title":"使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#使用","content":"提示 播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的 "},{"title":"在 Html 使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#在-html-使用","content":"index.html <!DOCTYPE html><html> <head> <title>ArtPlayer Demo</title> <meta charset="UTF-8" /> <style> .artplayer-app { width: 400px; height: 300px; } </style> </head> <body> <div class="artplayer-app"></div> <script src="path/to/artplayer.js"></script> <script> var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); </script> </body></html> "},{"title":"在 Vue.js、Nuxt.js 使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#在-vuejsnuxtjs-使用","content":"Vue.js 模板Nuxt.js 模板 🚀 artplayer-template/vue.js Artplayer.vueApp.vue Artplayer.vue <template> <div ref="artRef"></div></template><script>import Artplayer from "artplayer";export default { data() { return { instance: null, }; }, props: { option: { type: Object, required: true, }, }, mounted() { this.instance = new Artplayer({ ...this.option, container: this.$refs.artRef, }); this.$nextTick(() => { this.$emit("get-instance", this.instance); }); }, beforeUnmount() { if (this.instance && this.instance.destroy) { this.instance.destroy(false); } },};</script> "},{"title":"在 React.js、Next.js 使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#在-reactjsnextjs-使用","content":"React.js 模板Next.js 模板 🚀 artplayer-template/react.js ArtPlayer.jsxApp.jsx ArtPlayer.jsx import { useEffect, useRef } from 'react';import Artplayer from 'artplayer';export default function Player({ option, getInstance, ...rest }) { const artRef = useRef(); useEffect(() => { const art = new Artplayer({ ...option, container: artRef.current, }); if (getInstance && typeof getInstance === 'function') { getInstance(art); } return () => { if (art && art.destroy) { art.destroy(false); } }; }, []); return <div ref={artRef} {...rest}></div>;} "},{"title":"静态属性","type":0,"sectionRef":"#","url":"zh-cn/class","content":"","keywords":""},{"title":"instances​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#instances","content":"类型: Array 一个保存了所有播放器实例的数组，当单个页面同时存在多个播放器时，可以通过这个属性进行管理多个实例 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(Artplayer.instances) })  "},{"title":"version​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#version","content":"类型: String 当前播放器版本号 ▶ Run Code console.info(Artplayer.version)  "},{"title":"env​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#env","content":"类型: String 当前播放器环境变量 ▶ Run Code console.info(Artplayer.env)  "},{"title":"utils​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#utils","content":"类型: Object 播放器的常用工具集 ▶ Run Code console.info(Artplayer.utils)  "},{"title":"config​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#config","content":"类型: Object 存放了视频的原生属性和方法 ▶ Run Code console.info(Artplayer.config)  "},{"title":"scheme​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#scheme","content":"类型: Object 播放器参数的校验方案 ▶ Run Code console.info(Artplayer.scheme)  "},{"title":"validator​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#validator","content":"类型: Function 播放器参数的校验器 "},{"title":"option​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#option","content":"类型: Object 播放器默认参数 ▶ Run Code console.info(Artplayer.option)  "},{"title":"html​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#html","content":"类型: String 播放器默认 Html 字符串，通常用于 SSR 的提前渲染 ▶ Run Code console.info(Artplayer.html)  "},{"title":"kindOf​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#kindof","content":"类型: Function JS类型识别函数 ▶ Run Code console.info(Artplayer.kindOf('0')) console.info(Artplayer.kindOf(0)) console.info(Artplayer.kindOf({})) console.info(Artplayer.kindOf([]))  "},{"title":"高级属性","type":0,"sectionRef":"#","url":"zh-cn/advance","content":"","keywords":""},{"title":"id​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#id","content":"类型: Number 播放器实例的一个自增编号 "},{"title":"option​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#option","content":"类型: Object 播放器实例经合并后的参数对象 "},{"title":"isFocus​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#isfocus","content":"类型: Boolean 播放器实例是否获得了焦点，如最后被用户点击过 "},{"title":"isInput​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#isinput","content":"类型: Boolean 播放器实例是否在 input 元素上获得了焦点，如正在输入弹幕 "},{"title":"isLock​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#islock","content":"类型: Boolean 播放器实例是否已在移动端锁定 "},{"title":"isDestroy​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#isdestroy","content":"类型: Boolean 播放器实例是否被销毁 "},{"title":"whitelist​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#whitelist","content":"类型: Object 管理白名单的对象 "},{"title":"template​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#template","content":"类型: Object 管理播放器 Html 的对象 "},{"title":"query​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#query","content":"类型: Function 方法 query 可以查找当前播放器实例内的 dom 元素，等同于 document.querySelector('.artplayer-app').querySelector ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { var $video = art.template.query('.art-video'); console.info($video); });  "},{"title":"query​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#query-1","content":"类型: Function 等于 art.template.query ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { var $video = art.query('.art-video'); console.info($video); });  "},{"title":"events​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#events","content":"类型: Object 管理事件发生的对象 "},{"title":"proxy​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#proxy","content":"类型: Function 代理原生事件的方法，便于事件的管理与销毁 ▶ Run Code var container = document.querySelector('.artplayer-app'); var art = new Artplayer({ container: container, url: '/assets/sample/video.mp4', }); art.proxy(container, 'click', (event) => { console.info(event); });  "},{"title":"storage​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#storage","content":"类型: Object 管理持久化存储的对象 播放器会自动添加一个名为 artplayer_settings 的 JSON 对象到的 localStorage 里 属性\t类型\t描述get\tFunction\t获取值 set\tFunction\t设置值 del\tFunction\t删除值 clear\tFunction\t清空对象 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.storage.set('your-key', 'your-value'); art.storage.get('your-key'); art.storage.del('your-key'); art.storage.clear();  "},{"title":"icons​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#icons","content":"类型: Object 管理图标的对象 "},{"title":"i18n​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#i18n","content":"类型: Object 管理多语言的对象 "},{"title":"get​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#get","content":"类型: Getter/Setter 方法 get 可以获取到对应的语言的值 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.i18n.get('Play')); });  "},{"title":"update​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#update","content":"类型: Function 方法 update 可以动态添加更多语言 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'jp', }); art.i18n.update({ 'zh-cn': { Language: '简体', }, 'zh-tw': { Language: '繁體', }, en: { Language: 'English', }, jp: { Language: '日文', }, fr: { Language: 'Français', }, ru: { Language: 'Russe', }, });  "},{"title":"player​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#player","content":"类型: Object 管理核心功能的对象，所以属性和方法都代理到播放器实例上了 "},{"title":"subtitle​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#subtitle","content":"类型: Object 管理字幕的对象 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show","content":"类型: Getter/Setter 属性 show 可以控制字幕显示 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', }, }); art.on('ready', () => { art.seek = 20; art.subtitle.show = false; setTimeout(() => { art.subtitle.show = true; }, 3000); });  "},{"title":"style​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#style","content":"类型: Function 方法 style 可以动态修改字幕样式 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', encoding: 'utf-8', style: { color: '#03A9F4', 'font-size': '30px', }, }, }); art.on('ready', () => { art.seek = 20; setTimeout(() => { art.subtitle.style({ color: 'red', 'font-size': '40px', }); }, 3000); });  "},{"title":"url​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#url","content":"类型: Getter/Setter 属性 url 可以设置和获取字幕网址 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', encoding: 'utf-8', style: { color: '#03A9F4', 'font-size': '30px', }, }, }); art.on('ready', () => { console.info(art.subtitle.url); setTimeout(() => { art.subtitle.url = '/assets/sample/subtitle.srt?t=1'; }, 3000); });  "},{"title":"switch​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#switch","content":"类型: Function 方法 switch 就像属性设置 url，但可以修改字幕选项 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', encoding: 'utf-8', style: { color: 'red', 'font-size': '30px', }, }, }); art.on('ready', () => { art.seek = 20; setTimeout(() => { art.subtitle.switch('/assets/sample/subtitle.srt?t=1', { name: 'The new subtitle', style: { color: 'green', 'font-size': '24px', }, }); }, 3000); });  "},{"title":"info​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#info","content":"类型: Object 管理统计信息的对象 "},{"title":"layers​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#layers","content":"类型: Object 管理业务层的对象 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show-1","content":"类型: Getter/Setter 属性 show 可以控制全部图层是否显示 ▶ Run Code var img = '/assets/sample/layer.png'; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', layers: [ { html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, }, { html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', left: '20px', opacity: '.9', }, }, ], }); art.on('ready', () => { setTimeout(() => { art.layers.show = false; }, 3000); });  "},{"title":"add​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#add","content":"类型: Function 方法 add 可以动态添加业务层 属性\t类型\t描述disable\tBoolean\t是否禁用组件 name\tString\t组件唯一名称，用于标记类名 index\tNumber\t组件索引，用于显示的优先级 html\tString、Element\t组件的 DOM 元素 style\tObject\t组件样式对象 click\tFunction\t组件点击事件 mounted\tFunction\t组件挂载后触发 tooltip\tString\t组件的提示文本 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); var img = '/assets/sample/layer.png'; art.on('ready', () => { setTimeout(() => { art.layers.add({ html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, }); }, 3000); });  "},{"title":"notice​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#notice","content":"类型: Object 管理提示信息的对象 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show-2","content":"类型: Getter/Setter 属性 show 输出自定义提示信息，默认停留时间为两秒，且新的信息会马上覆盖旧的信息 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.notice.show = '自定义提示信息1'; art.notice.show = '自定义提示信息2'; });  "},{"title":"controls​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#controls","content":"类型: Object 管理控制栏的对象 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show-3","content":"类型: Getter/Setter 属性 show 可以控制控制栏是否显示 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { setTimeout(() => { art.controls.show = false; }, 3000); });  "},{"title":"add​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#add-1","content":"类型: Function 方法 add 可以动态添加控制器 属性\t类型\t描述disable\tBoolean\t是否禁用组件 name\tString\t组件唯一名称，用于标记类名 index\tNumber\t组件索引，用于显示的优先级 html\tString、Element\t组件的 DOM 元素 style\tObject\t组件样式对象 click\tFunction\t组件点击事件 mounted\tFunction\t组件挂载后触发 tooltip\tString\t组件的提示文本 position\tString\t位置在 left 或者 right ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { setTimeout(() => { art.controls.add({ position: 'right', index: 10, html: '自定义按钮', tooltip: '自定义按钮的提示', click: function () { console.log('你点击了自定义按钮'); }, }); }, 3000); });  "},{"title":"contextmenu​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#contextmenu","content":"类型: Object 管理右键菜单的对象 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show-4","content":"类型: Getter/Setter 属性 show 可以控制菜单是否显示 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.contextmenu.show = true; setTimeout(() => { art.contextmenu.show = false; }, 3000); });  "},{"title":"add​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#add-2","content":"类型: Function 方法 add 可以动态添加菜单项 属性\t类型\t描述disable\tBoolean\t是否禁用组件 name\tString\t组件唯一名称，用于标记类名 index\tNumber\t组件索引，用于显示的优先级 html\tString、Element\t组件的 DOM 元素 style\tObject\t组件样式对象 click\tFunction\t组件点击事件 mounted\tFunction\t组件挂载后触发 tooltip\tString\t组件的提示文本 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.contextmenu.show = true; setTimeout(() => { art.contextmenu.add({ html: '自定义菜单', click: function () { console.info('你点击了自定义菜单'); art.contextmenu.show = false; }, }); }, 3000); });  "},{"title":"loading​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#loading","content":"类型: Object 管理加载中的图标 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show-5","content":"类型: Getter/Setter 属性 show 可以控制是否显示加载中的图标 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.loading.show = true; setTimeout(() => { art.loading.show = false; }, 3000); });  "},{"title":"mask​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#mask","content":"类型: Object 管理遮罩层的对象 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show-6","content":"类型: Getter/Setter 属性 show 可以控制遮罩层是否加载层 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.mask.show = true; setTimeout(() => { art.mask.show = false; }, 3000); });  "},{"title":"hotkey​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#hotkey","content":"类型: Object 管理快捷键的对象 "},{"title":"add​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#add-3","content":"类型: Function 方法 add 可以动态添加快捷键，第一个参数是 key code 数字，第二个参数是回调函数 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.hotkey.add(65, () => { console.info('你点击了 A 键'); }); art.hotkey.add(66, () => { console.info('你点击了 B 键'); }); });  提示 只在播放器获得焦点后（如点击了播放器后），该快捷键才会生效 "},{"title":"setting​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#setting","content":"类型: Object 管理设置面板的对象 "},{"title":"show​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#show-7","content":"类型: Getter/Setter 属性 show 可以控制设置面板是否显示 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, autoSize: true, }); art.on('ready', () => { art.seek = 20; art.setting.show = true; setTimeout(() => { art.setting.show = false; }, 3000); });  "},{"title":"plugins​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#plugins","content":"类型: Object 管理插件的对象 "},{"title":"add​","type":1,"pageTitle":"高级属性","url":"zh-cn/advance#add-4","content":"类型: Function 方法 add 可以动态添加插件 ▶ Run Code function myPlugin(art) { console.info('你可以在插件里访问到播放器的实例'); return { name: 'myPlugin', something: '自定义导出的属性', doSomething: function () { console.info('自定义导出的方法'); }, }; } var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.plugins.add(myPlugin); console.info(art.plugins.myPlugin.something); console.info(art.plugins.myPlugin.doSomething()); });  "},{"title":"实例事件","type":0,"sectionRef":"#","url":"zh-cn/events","content":"","keywords":""},{"title":"原生事件​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#原生事件","content":"更多信息请阅读 Mozilla Video Events 事件名字\t触发时间video:canplay\tThe browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. video:canplaythrough\tThe browser estimates it can play the media up to its end without stopping for content buffering. video:complete\tThe rendering of an OfflineAudioContext is terminated. video:durationchange\tThe duration attribute has been updated. video:emptied\tThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it. video:ended\tPlayback has stopped because the end of the media was reached. video:loadeddata\tThe first frame of the media has finished loading. video:loadedmetadata\tThe metadata has been loaded. video:pause\tPlayback has been paused. video:play\tPlayback has begun. video:playing\tPlayback is ready to start after having been paused or delayed due to lack of data. video:progress\tFired periodically as the browser loads a resource. video:ratechange\tThe playback rate has changed. video:seeked\tA seek operation completed. video:seeking\tA seek operation began. video:stalled\tThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming. video:suspend\tMedia data loading has been suspended. video:timeupdate\tThe time indicated by the currentTime attribute has been updated. video:volumechange\tThe volume has changed. video:waiting\tPlayback has stopped because of a temporary lack of data ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('video:play', (...args) => { console.info(args); });  "},{"title":"自定义事件​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#自定义事件","content":""},{"title":"ready​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#ready","content":"当实例初始化完成，并视频可以被播放时触发，只会触发一个，哪怕视频地址变化了 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', (...args) => { console.info(args); });  "},{"title":"play​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#play","content":"在视频被播放后触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('play', (...args) => { console.info(args); });  "},{"title":"pause​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#pause","content":"在视频被暂停后触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('pause', (...args) => { console.info(args); });  "},{"title":"seek​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#seek","content":"在视频进行时间跳转时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('seek', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.seek = 5; });  提示 设置 art.currentTime 时不会触发 seek 事件 "},{"title":"volume​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#volume","content":"在视频音量变化时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('volume', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.volume = 0.5; });  "},{"title":"destroy​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#destroy","content":"在播放器实例被销毁时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('destroy', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.destroy(); });  "},{"title":"focus​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#focus","content":"在播放器获得焦点时触发，如点击了播放器 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('focus', (...args) => { console.info(args); });  "},{"title":"blur​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#blur","content":"在播放器失去焦点时触发，如点击播放器以外的区域 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('blur', (...args) => { console.info(args); });  "},{"title":"hover​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#hover","content":"在鼠标移动进播放器时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('hover', (state) => { // state 为true时，鼠标从外面移进播放器 // state 为false时，鼠标从播放器移出外面 console.info(state); });  "},{"title":"resize​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#resize","content":"在播放器尺寸变化时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, }); art.on('resize', (...args) => { console.info(args); });  "},{"title":"mousemove​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#mousemove","content":"在鼠标经过播放器时触发，和hover不一样，它会触发多次 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('mousemove', (...args) => { console.info(args); });  "},{"title":"url​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#url","content":"在视频地址变化时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('url', (...args) => { console.info(args); }); art.on('ready', (...args) => { art.url = '/assets/sample/video.mp4?t=0'; });  "},{"title":"fullscreen​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#fullscreen","content":"在播放器窗口全屏时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreen: true, }); art.on('fullscreen', (...args) => { console.info(args); });  "},{"title":"fullscreenWeb​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#fullscreenweb","content":"在播放器网页全屏时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, }); art.on('fullscreenWeb', (...args) => { console.info(args); });  "},{"title":"hotkey​","type":1,"pageTitle":"实例事件","url":"zh-cn/events#hotkey","content":"在快捷键被使用时触发 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('hotkey', (...args) => { console.info(args); });  "},{"title":"第三方库","type":0,"sectionRef":"#","url":"zh-cn/libraries","content":"","keywords":""},{"title":"简介​","type":1,"pageTitle":"第三方库","url":"zh-cn/libraries#简介","content":"通过选项 customType 可以很容易的集成第三方的视频解码库，存在多个解码器时，你可以把他们都添加到 customType 里，解码库太大时，你还可以使用 js 动态导入 播放器默认会解析出 url 选项的视频类型（如 m3u8, flv, mpd）, 假如无法解析出正确的视频类型时，你可以添加 type 选项指明视频类型 // 现在这个播放器可以同时播放: m3u8, flv, mpd var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.m3u8', type: 'm3u8', // 可选，但最好填上 customType: { m3u8: async function (video, url) { const { default: Hls } = await import('hls.js'); }, flv: async function (video, url) { const { default: flvjs } = await import('flv.js').default; }, mpd: async function (video, url) { const { default: dashjs } = await import('dash.js').default; }, }, }); // 你可以切换新的视频地址 art.url = '/assets/sample/video-new.m3u8'; // 你还可以切换新的视频类型 art.type = 'flv'; art.url = '/assets/sample/video.flv'; art.type = 'mpd'; art.url = '/assets/sample/video.mpd';  提示 假如使用了 customType，那么切换地址前，要销毁上一个解码器实例，否则会引起内存泄漏 var hls = null; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.m3u8', type: 'm3u8', customType: { m3u8: async function (video, url) { const { default: Hls } = await import('hls.js'); // 切换地址前，要销毁上一个解码器实例 if (hls) { hls.destroy(); } // 播放器销毁时，也要销毁解码器实例 art.on('destroy', () => { if (hls) { hls.destroy(); } }); hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); }, }, }); // 切换新的视频地址 art.url = '/assets/sample/video-new.m3u8';  "},{"title":"flv.js​","type":1,"pageTitle":"第三方库","url":"zh-cn/libraries#flvjs","content":"主页: 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) { if (flvjs.isSupported()) { const flvPlayer = flvjs.createPlayer({ type: 'flv', url: url, }); flvPlayer.attachMediaElement(video); flvPlayer.load(); } else { art.notice.show = '不支持播放格式：flv'; } }, }, });  "},{"title":"hls.js​","type":1,"pageTitle":"第三方库","url":"zh-cn/libraries#hlsjs","content":"主页: 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) { if (Hls.isSupported()) { const hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); } else if (video.canPlayType('application/vnd.apple.mpegurl')) { video.src = url; } else { art.notice.show = '不支持播放格式：m3u8'; } }, }, });  "},{"title":"dash.js​","type":1,"pageTitle":"第三方库","url":"zh-cn/libraries#dashjs","content":"主页: 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); }, }, });  "},{"title":"shaka-player​","type":1,"pageTitle":"第三方库","url":"zh-cn/libraries#shaka-player","content":"主页: 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); }, }, });  "},{"title":"webtorrent​","type":1,"pageTitle":"第三方库","url":"zh-cn/libraries#webtorrent","content":"主页: 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; });  "},{"title":"广告插件","type":0,"sectionRef":"#","url":"zh-cn/Plugins/ads","content":"","keywords":""},{"title":"演示​","type":1,"pageTitle":"广告插件","url":"zh-cn/Plugins/ads#演示","content":"👉 查看完整演示 "},{"title":"安装​","type":1,"pageTitle":"广告插件","url":"zh-cn/Plugins/ads#安装","content":""},{"title":"通过 npm 安装：​","type":1,"pageTitle":"广告插件","url":"zh-cn/Plugins/ads#通过-npm-安装","content":"$ npm install artplayer-plugin-ads  "},{"title":"通过 yarn 安装：​","type":1,"pageTitle":"广告插件","url":"zh-cn/Plugins/ads#通过-yarn-安装","content":"$ yarn add artplayer-plugin-ads  "},{"title":"通过 script 安装：​","type":1,"pageTitle":"广告插件","url":"zh-cn/Plugins/ads#通过-script-安装","content":"<!-- 本地 --> <script src="path/to/artplayer-plugin-ads.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>  然后你可以通过 window.artplayerPluginAds 访问到插件函数 "},{"title":"使用​","type":1,"pageTitle":"广告插件","url":"zh-cn/Plugins/ads#使用","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, fullscreen: true, fullscreenWeb: true, plugins: [ artplayerPluginAds({ // html广告，假如是视频广告则忽略该值 html: '<img src="/assets/sample/poster.jpg">', // 视频广告的地址 video: '/assets/sample/test1.mp4', // 广告跳转网址，为空则不跳转 url: 'http://artplayer.org', // 必须观看的时长，期间不能被跳过，单位为秒 // 当该值大于或等于totalDuration时，不能提前关闭广告 // 当该值等于或小于0时，则随时都可以关闭广告 playDuration: 5, // 广告总时长，单位为秒 totalDuration: 10, // 视频广告是否默认静音 muted: false, // 多语言支持 i18n: { close: '关闭广告', countdown: '%s秒', detail: '查看详情', canBeClosed: '%s秒后可关闭广告', }, }), ], }); art.on('artplayerPluginAds:click', (ads) => { console.info('广告被点击', ads); }); art.on('artplayerPluginAds:skip', (ads) => { console.info('广告被跳过', ads); });  "},{"title":"Common properties","type":0,"sectionRef":"#","url":"propertie","content":"","keywords":""},{"title":"play​","type":1,"pageTitle":"Common properties","url":"propertie#play","content":"Type: Function Play video ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { art.play(); });  "},{"title":"pause​","type":1,"pageTitle":"Common properties","url":"propertie#pause","content":"Type: Function Pause video ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { art.play(); setTimeout(() => { art.pause(); }, 3000); });  "},{"title":"toggle​","type":1,"pageTitle":"Common properties","url":"propertie#toggle","content":"Type: Function Switch Video playback and pause ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { art.toggle(); setTimeout(() => { art.toggle(); }, 3000); });  "},{"title":"seek​","type":1,"pageTitle":"Common properties","url":"propertie#seek","content":"Type: SetterParameter: Number Video time jump, unit seconds ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 5; });  "},{"title":"forward​","type":1,"pageTitle":"Common properties","url":"propertie#forward","content":"Type: SetterParameter: Number Video time forward, unit seconds ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.forward = 5; });  "},{"title":"backward​","type":1,"pageTitle":"Common properties","url":"propertie#backward","content":"Type: SetterParameter: Number Video time backward, unit seconds ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 5; setTimeout(() => { art.backward = 2; }, 3000); });  "},{"title":"volume​","type":1,"pageTitle":"Common properties","url":"propertie#volume","content":"Type: Setter/GetterParameter: Number Set and get video volume, range: [0, 1] ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.volume); art.volume = 0.5; console.info(art.volume); });  "},{"title":"url​","type":1,"pageTitle":"Common properties","url":"propertie#url","content":"Type: Setter/GetterParameter: String Set and get video url ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.url); art.url = '/assets/sample/video.mp4?t=0'; console.info(art.url); });  "},{"title":"switchUrl​","type":1,"pageTitle":"Common properties","url":"propertie#switchurl","content":"Type: FunctionParameter: String Set video url, set, like the url, but will perform some optimization operations The function supports two parameters, the first one for the new video url, the second is new video name ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; setTimeout(() => { art.switchUrl('/assets/sample/video.mp4?t=0', 'New video name'); }, 3000); });  "},{"title":"switchQuality​","type":1,"pageTitle":"Common properties","url":"propertie#switchquality","content":"Type: FunctionParameter: String Set the video quality address, like the switchUrl, but will bring the previous play progress The function supports two parameters, the first one for the new video url, the second is new video name ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; setTimeout(() => { art.switchQuality('/assets/sample/video.mp4?t=0', 'New video name'); }, 3000); });  "},{"title":"muted​","type":1,"pageTitle":"Common properties","url":"propertie#muted","content":"Type: Setter/GetterParameter: Boolean Setting up and getting the video mute ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.muted); art.muted = true; console.info(art.muted); });  "},{"title":"currentTime​","type":1,"pageTitle":"Common properties","url":"propertie#currenttime","content":"Type: Setter/GetterParameter: Number Set and get the video current time, set time like the seek, but it does not trigger additional events ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.currentTime); art.currentTime = 5; console.info(art.currentTime); });  "},{"title":"duration​","type":1,"pageTitle":"Common properties","url":"propertie#duration","content":"Type: Getter Get video duration ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.duration); });  Tip Some videos are there is no duration, such as the live video or video is not decoded, the duration will be 0 "},{"title":"screenshot​","type":1,"pageTitle":"Common properties","url":"propertie#screenshot","content":"Type: Function Download the current video frame screenshot ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; art.once('video:canplay', () => { art.screenshot(); }); });  "},{"title":"getDataURL​","type":1,"pageTitle":"Common properties","url":"propertie#getdataurl","content":"Type: Function Get the base64 url of the current video frame, return to a Promise ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; art.getDataURL().then((url) => console.info(url)); });  "},{"title":"getBlobUrl​","type":1,"pageTitle":"Common properties","url":"propertie#getbloburl","content":"Type: Function Get the blob url of the current video frame, return to a Promise ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; art.getBlobUrl().then((url) => console.info(url)); });  "},{"title":"fullscreen​","type":1,"pageTitle":"Common properties","url":"propertie#fullscreen","content":"Type: Setter/GetterParameter: Boolean Set and get a player window full screen ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreen: true, }); art.on('ready', () => { art.fullscreen = true; setTimeout(() => { art.fullscreen = false; }, 3000); });  Tip Due to the browser security mechanism, the page must be exchanged before the window full screen, such as the user click on the page) "},{"title":"fullscreenWeb​","type":1,"pageTitle":"Common properties","url":"propertie#fullscreenweb","content":"Type: Setter/GetterParameter: Boolean Setting up and get a player web page full screen ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, }); art.on('ready', () => { art.fullscreenWeb = true; setTimeout(() => { art.fullscreenWeb = false; }, 3000); });  "},{"title":"pip​","type":1,"pageTitle":"Common properties","url":"propertie#pip","content":"Type: Setter/GetterParameter: Boolean Set and get player PIP Mode ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, }); art.on('ready', () => { art.pip = true; setTimeout(() => { art.pip = false; }, 3000); });  Tip Due to the browser security mechanism, the page must be exchanged first before the PIP (such as user clicking over the page) "},{"title":"poster​","type":1,"pageTitle":"Common properties","url":"propertie#poster","content":"Type: Setter/GetterParameter: String Setting up and get a video poster, only the poster effect can only be seen before the video is played ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', poster: '/assets/sample/poster.jpg', }); art.on('ready', () => { console.info(art.poster); art.poster = '/assets/sample/poster.jpg?t=0'; console.info(art.poster); });  "},{"title":"mini​","type":1,"pageTitle":"Common properties","url":"propertie#mini","content":"Type: Setter/GetterParameter: Boolean Set and get player mini mode ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.mini = true; });  "},{"title":"playing​","type":1,"pageTitle":"Common properties","url":"propertie#playing","content":"Type: GetterParameter: Boolean Get the video is playing ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { console.info(art.playing); art.play(); console.info(art.playing); });  "},{"title":"autoSize​","type":1,"pageTitle":"Common properties","url":"propertie#autosize","content":"Type: Setter/GetterParameter: Boolean Set whether the video is adaptive, set to true, it will only execute once ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.autoSize); art.autoSize = true; console.info(art.autoSize); });  "},{"title":"rect​","type":1,"pageTitle":"Common properties","url":"propertie#rect","content":"Type: Getter Get the size and coordinate information of the player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(JSON.stringify(art.rect)); });  Tip Size and coordinate information is obtained by getBoundingClientRect "},{"title":"flip​","type":1,"pageTitle":"Common properties","url":"propertie#flip","content":"Type: Setter/GetterParameter: String Set and get player flip, support normal, horizontal, vertical ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.flip); art.flip = 'horizontal'; console.info(art.flip); });  "},{"title":"playbackRate​","type":1,"pageTitle":"Common properties","url":"propertie#playbackrate","content":"Type: Setter/GetterParameter: Number Set and get player playback speed, support 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.playbackRate); art.playbackRate = 2; console.info(art.playbackRate); });  "},{"title":"aspectRatio​","type":1,"pageTitle":"Common properties","url":"propertie#aspectratio","content":"Type: Setter/GetterParameter: String Set and get the player long aspect, support default, 4:3, 16:9 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.aspectRatio); art.aspectRatio = '16:9'; console.info(art.aspectRatio); });  "},{"title":"loop​","type":1,"pageTitle":"Common properties","url":"propertie#loop","content":"Type: Setter/GetterParameter: Array Setting and getting the interval to play in seconds, unit seconds ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.loop); art.loop = [5, 10]; console.info(art.loop); });  Tip Delete interval loop play, only need to set up loop is [] "},{"title":"autoHeight​","type":1,"pageTitle":"Common properties","url":"propertie#autoheight","content":"Type: Setter/GetterDefault: Boolean When the container has only width, you want the container height adapt to the player aspect ratio. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.autoHeight); art.autoHeight = true; console.info(art.autoHeight); });  "},{"title":"attr​","type":1,"pageTitle":"Common properties","url":"propertie#attr","content":"Type: FunctionParameter: String Dynamically get and set the properties of the video element ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.attr('playsInline')); art.attr('playsInline', true); console.info(art.attr('playsInline')); });  "},{"title":"title​","type":1,"pageTitle":"Common properties","url":"propertie#title","content":"Type: Setter/GetterParameter: String Dynamic get and set player title ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.title); art.title = 'New Title'; console.info(art.title); });  "},{"title":"type​","type":1,"pageTitle":"Common properties","url":"propertie#type","content":"Type: Setter/GetterParameter: String Dynamic get and set video type ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.type); art.type = 'm3u8'; console.info(art.type); });  "},{"title":"theme​","type":1,"pageTitle":"Common properties","url":"propertie#theme","content":"Type: Setter/GetterParameter: String Dynamic get and set player theme color ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.theme); art.theme = '#000'; console.info(art.theme); });  "},{"title":"airplay​","type":1,"pageTitle":"Common properties","url":"propertie#airplay","content":"Type: Function Open the Airplay ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { name: 'airplay', position: 'right', html: 'AirPlay', click: function () { art.airplay(); }, }, ], });  "},{"title":"destroy​","type":1,"pageTitle":"Common properties","url":"propertie#destroy","content":"Type: FunctionParameter: Boolean Destroy the player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.destroy(); });  "},{"title":"Hls 画质插件","type":0,"sectionRef":"#","url":"zh-cn/Plugins/hls-quality","content":"","keywords":""},{"title":"说明​","type":1,"pageTitle":"Hls 画质插件","url":"zh-cn/Plugins/hls-quality#说明","content":"通过该插件，可以添加 Hls 画质列表到控制栏或者设置面板里 "},{"title":"演示​","type":1,"pageTitle":"Hls 画质插件","url":"zh-cn/Plugins/hls-quality#演示","content":"👉 查看完整演示 "},{"title":"安装​","type":1,"pageTitle":"Hls 画质插件","url":"zh-cn/Plugins/hls-quality#安装","content":""},{"title":"通过 npm 安装：​","type":1,"pageTitle":"Hls 画质插件","url":"zh-cn/Plugins/hls-quality#通过-npm-安装","content":"$ npm install artplayer-plugin-hls-quality  "},{"title":"通过 yarn 安装：​","type":1,"pageTitle":"Hls 画质插件","url":"zh-cn/Plugins/hls-quality#通过-yarn-安装","content":"$ yarn add artplayer-plugin-hls-quality  "},{"title":"通过 script 安装：​","type":1,"pageTitle":"Hls 画质插件","url":"zh-cn/Plugins/hls-quality#通过-script-安装","content":"<!-- 本地 --> <script src="path/to/artplayer-plugin-hls-quality.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer-plugin-hls-quality/dist/artplayer-plugin-hls-quality.js"></script>  然后你可以通过 window.artplayerPluginHlsQuality 访问到插件函数 "},{"title":"弹幕库插件","type":0,"sectionRef":"#","url":"zh-cn/Plugins/danmuku","content":"","keywords":""},{"title":"演示​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#演示","content":"👉 查看完整演示 "},{"title":"安装​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#安装","content":""},{"title":"通过 npm 安装：​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#通过-npm-安装","content":"$ npm install artplayer-plugin-danmuku  "},{"title":"通过 yarn 安装：​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#通过-yarn-安装","content":"$ yarn add artplayer-plugin-danmuku  "},{"title":"通过 script 安装：​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#通过-script-安装","content":"<!-- 本地 --> <script src="path/to/artplayer-plugin-danmuku.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js"></script>  然后你可以通过 window.artplayerPluginDanmuku 访问到插件函数 "},{"title":"使用​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#使用","content":""},{"title":"使用弹幕数组​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#使用弹幕数组","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, setting: true, playbackRate: true, fullscreenWeb: true, plugins: [ artplayerPluginDanmuku({ // 弹幕数组 danmuku: [ { text: '111', // 弹幕文本 time: 1, // 发送时间，单位秒 color: '#fff', // 弹幕局部颜色 border: false, // 是否显示描边 mode: 0, // 弹幕模式: 0表示滚动、1静止 }, { text: '222', time: 2, color: 'red', border: true, mode: 0, }, { text: '333', time: 3, color: 'green', border: false, mode: 1, }, ], speed: 5, // 弹幕持续时间，单位秒，范围在[1 ~ 10] opacity: 1, // 弹幕透明度，范围在[0 ~ 1] fontSize: 25, // 字体大小，支持数字和百分比 color: '#FFFFFF', // 默认字体颜色 mode: 0, // 默认模式，0-滚动，1-静止 margin: [10, '25%'], // 弹幕上下边距，支持数字和百分比 antiOverlap: true, // 是否防重叠 useWorker: true, // 是否使用 web worker synchronousPlayback: false, // 是否同步到播放速度 filter: (danmu) => danmu.text.length < 50, // 弹幕过滤函数，返回 true 则可以发送 lockTime: 5, // 输入框锁定时间，单位秒，范围在[1 ~ 60] maxLength: 100, // 输入框最大可输入的字数，范围在[0 ~ 500] minWidth: 200, // 输入框最小宽度，范围在[0 ~ 500]，填 0 则为无限制 maxWidth: 400, // 输入框最大宽度，范围在[0 ~ Infinity]，填 0 则为 100% 宽度 theme: 'dark', // 输入框自定义挂载时的主题色，默认为 dark，可以选填亮色 light beforeEmit: (danmu) => !!danmu.text.trim(), // 发送弹幕前的自定义校验，返回 true 则可以发送 // 通过 mount 选项可以自定义输入框挂载的位置，默认挂载于播放器底部，仅在当宽度小于最小值时生效 // mount: document.querySelector('.artplayer-danmuku'), }), ], });  "},{"title":"使用弹幕 XML​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#使用弹幕-xml","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ // 弹幕 XML 文件，和 Bilibili 网站的弹幕格式一致 danmuku: '/assets/sample/danmuku.xml', }), ], });  "},{"title":"使用异步调用​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#使用异步调用","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ // 使用 Promise 异步返回 danmuku: function () { return new Promise((resovle) => { return resovle([ { text: '111', time: 1, }, { text: '222', time: 2, }, { text: '333', time: 3, }, ]); }); }, }), ], });  "},{"title":"接口​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#接口","content":""},{"title":"hide/show​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#hideshow","content":"类型: Function 通过方法 hide 和 show 进行隐藏或者显示弹幕 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], controls: [ { position: 'right', html: '隐藏弹幕', click: function () { art.plugins.artplayerPluginDanmuku.hide(); }, }, { position: 'right', html: '显示弹幕', click: function () { art.plugins.artplayerPluginDanmuku.show(); }, }, ], });  "},{"title":"isHide​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#ishide","content":"类型: Boolean 通过属性 isHide 判断当前弹幕是隐藏或者显示 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], controls: [ { position: 'right', html: '隐藏弹幕', click: function (_, event) { if (art.plugins.artplayerPluginDanmuku.isHide) { art.plugins.artplayerPluginDanmuku.show(); event.target.innerText = '隐藏弹幕'; } else { art.plugins.artplayerPluginDanmuku.hide(); event.target.innerText = '显示弹幕'; } }, }, ], });  "},{"title":"emit​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#emit","content":"类型: Function 通过方法 emit 发送一条实时弹幕 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], controls: [ { position: 'right', html: '发送弹幕', click: function () { var text = prompt('请输入弹幕文本', '弹幕测试文本'); if (!text || !text.trim()) return; var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16); art.plugins.artplayerPluginDanmuku.emit({ text: text, color: color, border: true, }); }, }, ], });  "},{"title":"config​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#config","content":"类型: Function 通过方法 config 实时改变弹幕配置，支持属性有： danmukuspeedopacityfontSizecolormodemarginantiOverlapsynchronousPlaybackfilterlockTimebeforeEmit ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], controls: [ { position: 'right', html: '弹幕大小：<input type="range" min="12" max="50" step="1" value="25">', style: { display: 'flex', alignItems: 'center', }, mounted: function ($setting) { const $range = $setting.querySelector('input[type=range]'); $range.addEventListener('change', () => { art.plugins.artplayerPluginDanmuku.config({ fontSize: Number($range.value), }); }); }, }, ], });  "},{"title":"load​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#load","content":"类型: Function 通过 load 方法可以重载弹幕源，或者切换新弹幕 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], controls: [ { position: 'right', html: '重载弹幕', click: function () { art.plugins.artplayerPluginDanmuku.load(); }, }, { position: 'right', html: '切换弹幕', click: function () { art.plugins.artplayerPluginDanmuku.config({ danmuku: '/assets/sample/danmuku-v2.xml', }); art.plugins.artplayerPluginDanmuku.load(); }, }, ], });  "},{"title":"reset​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#reset","content":"类型: Function 用于清空当前显示的弹幕 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], }); art.on('resize', () => { art.plugins.artplayerPluginDanmuku.reset(); });  "},{"title":"option​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#option","content":"类型: Object 用于获取当前弹幕配置 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], }); art.on('ready', () => { console.log(art.plugins.artplayerPluginDanmuku.option); });  "},{"title":"事件​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#事件","content":"var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, plugins: [ artplayerPluginDanmuku({ danmuku: '/assets/sample/danmuku.xml', }), ], }); art.on('artplayerPluginDanmuku:emit', (danmu) => { console.info('新增弹幕', danmu); }); art.on('artplayerPluginDanmuku:loaded', (danmus) => { console.info('加载弹幕', danmus.length); }); art.on('artplayerPluginDanmuku:error', (error) => { console.info('加载错误', error); }); art.on('artplayerPluginDanmuku:config', (option) => { console.info('配置变化', option); }); art.on('artplayerPluginDanmuku:stop', () => { console.info('弹幕停止'); }); art.on('artplayerPluginDanmuku:start', () => { console.info('弹幕开始'); }); art.on('artplayerPluginDanmuku:hide', () => { console.info('弹幕隐藏'); }); art.on('artplayerPluginDanmuku:show', () => { console.info('弹幕显示'); }); art.on('artplayerPluginDanmuku:destroy', () => { console.info('弹幕销毁'); });  "},{"title":"Basic options","type":0,"sectionRef":"#","url":"options","content":"","keywords":""},{"title":"container​","type":1,"pageTitle":"Basic options","url":"options#container","content":"Type: String、ElementDefault: #artplayerRequired: Yes The dom container mounted by the player must have a size, otherwise the player cannot display ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', // container: document.querySelector('.artplayer-app'), url: '/assets/sample/video.mp4', });  You may need to initialize the size of the container element, such as: .artplayer-app { width: 400px; height: 300px; }  "},{"title":"url​","type":1,"pageTitle":"Basic options","url":"options#url","content":"Type: StringDefault: ''Required: Yes Video source address, default support three video file formats: .mp4、.ogg、.webm ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', });  "},{"title":"Ready Callback​","type":1,"pageTitle":"Basic options","url":"options#ready-callback","content":"Type: FunctionDefault: undefined The constructor accepts a function as the second parameter, fired when the player is initialized and the video can be play, just like ready event ▶ Run Code var art = new Artplayer( { container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }, function () { this.play(); }, );  提示 The this in the callback function is the player instance, but the callback function is used to use the arrow function, this is not to point to the player instance "},{"title":"poster​","type":1,"pageTitle":"Basic options","url":"options#poster","content":"Type: StringDefault: '' The poster of the video will only appear in a state in which the player is initialized and not played. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', poster: '/assets/sample/poster.jpg', });  "},{"title":"title​","type":1,"pageTitle":"Basic options","url":"options#title","content":"Type: StringDefault: '' Video headings, currently appear in video screenshots and mini mode ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', title: '【新海诚动画】『秒速5センチメートル』', screenshot: true, });  "},{"title":"theme​","type":1,"pageTitle":"Basic options","url":"options#theme","content":"Type: StringDefault: #f00 Player theme color, currently only on the progress bar ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', theme: '#ffad00', });  "},{"title":"volume​","type":1,"pageTitle":"Basic options","url":"options#volume","content":"Type: NumberDefault: 0.7 Default volume of the player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', volume: 0.5, });  Tip The player caches the size of the last volume, when the next initialization (such as refreshing the page) player reads the cache value "},{"title":"isLive​","type":1,"pageTitle":"Basic options","url":"options#islive","content":"Type: BooleanDefault: false Use live mode, hide progress bar and play time ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', isLive: true, });  "},{"title":"muted​","type":1,"pageTitle":"Basic options","url":"options#muted","content":"Type: BooleanDefault: false Whether the default mute ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, });  "},{"title":"autoplay​","type":1,"pageTitle":"Basic options","url":"options#autoplay","content":"Type: BooleanDefault: false Whether automatic play ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoplay: true, muted: true, });  Tip If you want the default to enter the page, you can automatically play the video, muted must be true, more information, please read Autoplay Policy Changes "},{"title":"autoSize​","type":1,"pageTitle":"Basic options","url":"options#autosize","content":"Type: BooleanDefault: false The size of the player will populate the entire container size, so there is often a black edge, the option can automatically adjust the player size to hide the black side. ▶ Run Code // Zoom browser window View effect var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, });  "},{"title":"autoMini​","type":1,"pageTitle":"Basic options","url":"options#automini","content":"Type: BooleanDefault: false When the player scrolls outside the browser viewport, automatically enter the mini play mode ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoMini: true, });  "},{"title":"loop​","type":1,"pageTitle":"Basic options","url":"options#loop","content":"Type: BooleanDefault: false Whether loop playing ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', loop: true, });  "},{"title":"flip​","type":1,"pageTitle":"Basic options","url":"options#flip","content":"Type: BooleanDefault: false Whether to display a video flip function, currently appear in the setting panel, so you need to set up setting is True ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', flip: true, setting: true, });  "},{"title":"playbackRate​","type":1,"pageTitle":"Basic options","url":"options#playbackrate","content":"Type: BooleanDefault: false Whether the video playback speed function is displayed, it will appear in the setting panel and contextmenu ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', playbackRate: true, setting: true, });  "},{"title":"aspectRatio​","type":1,"pageTitle":"Basic options","url":"options#aspectratio","content":"Type: BooleanDefault: false Whether to display video long aspect ratio, it will appear in the setting panel and contextmenu ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', aspectRatio: true, setting: true, });  "},{"title":"screenshot​","type":1,"pageTitle":"Basic options","url":"options#screenshot","content":"Type: BooleanDefault: false Whether to display video screenshots in the bottom control bar ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', screenshot: true, // Optional moreVideoAttr: { crossOrigin: 'anonymous', }, });  Tip Because browser security mechanisms, if video source addresses and websites are cross-domain, screenshot failed "},{"title":"setting​","type":1,"pageTitle":"Basic options","url":"options#setting","content":"Type: BooleanDefault: false Whether to display the setting panel of the switch button in the bottom control bar ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, });  "},{"title":"hotkey​","type":1,"pageTitle":"Basic options","url":"options#hotkey","content":"Type: BooleanDefault: true Whether to use shortcut keys ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', hotkey: true, });  Hotkey\tDescribe↑\tIncreasing volume ↓\tlower the volume ←\tFast forward 5 seconds →\tFast backward 5 seconds space\tSwitch play / pause Tip This hotkey will take effect only after the player gets the focus (if you click on the player). "},{"title":"pip​","type":1,"pageTitle":"Basic options","url":"options#pip","content":"Type: BooleanDefault: false Whether to display the PIP switch button in the bottom control bar ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', pip: true, });  "},{"title":"mutex​","type":1,"pageTitle":"Basic options","url":"options#mutex","content":"Type: BooleanDefault: true If there are multiple players on the page at the same time, can only one player be allowed to play ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', mutex: true, });  "},{"title":"fullscreen​","type":1,"pageTitle":"Basic options","url":"options#fullscreen","content":"Type: BooleanDefault: false Whether to display the full screen button of the player window in the bottom control bar ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreen: true, });  "},{"title":"fullscreenWeb​","type":1,"pageTitle":"Basic options","url":"options#fullscreenweb","content":"Type: BooleanDefault: false Whether to display the full screen button of the player webpage in the bottom control bar ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, });  "},{"title":"subtitleOffset​","type":1,"pageTitle":"Basic options","url":"options#subtitleoffset","content":"Type: BooleanDefault: false Subtitle time offset, in the range [-5s, 5s] ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', }, setting: true, subtitleOffset: true, });  "},{"title":"miniProgressBar​","type":1,"pageTitle":"Basic options","url":"options#miniprogressbar","content":"Type: BooleanDefault: false Mini progress bar, only appears when the player loses focus and is playing ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', miniProgressBar: true, });  "},{"title":"useSSR​","type":1,"pageTitle":"Basic options","url":"options#usessr","content":"Type: BooleanDefault: false Whether to use SSR mounting mode, it is useful if you want to render the HTML required by the player in advance before mounting the player You can access the HTML required by the player through Artplayer.html ▶ Run Code var $container = document.querySelector('.artplayer-app'); $container.innerHTML = Artplayer.html; var art = new Artplayer({ container: $container, url: '/assets/sample/video.mp4', useSSR: true, });  Tip SSR is the abbreviation of Server Side Render. The content on the page is generated by server side rendering, and the browser directly displays the HTML returned by the server side. "},{"title":"playsInline​","type":1,"pageTitle":"Basic options","url":"options#playsinline","content":"Type: BooleanDefault: true Whether use playsInline in mobile ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', playsInline: true, });  "},{"title":"layers​","type":1,"pageTitle":"Basic options","url":"options#layers","content":"Type: ArrayDefault: [] Initialize a custom layers Property\tType\tDescriptiondisable\tBoolean\tWhether to disable the component name\tString\tThe unique name of the component, used to mark the class name index\tNumber\tComponent index, priority for display html\tString、Element\tDOM element of the component style\tObject\tComponent style object click\tFunction\tComponent click event mounted\tFunction\tTriggered after the component is mounted tooltip\tString\tPrompt text of the component ▶ Run Code var img = '/assets/sample/layer.png'; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', layers: [ { index: 1, name: 'potser', disable: false, html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, click: function (...args) { console.info('You click on the component'); art.layers.show = false; }, mounted: function (...args) { console.info('Component mount completion'); }, }, ], });  "},{"title":"settings​","type":1,"pageTitle":"Basic options","url":"options#settings","content":"Type: ArrayDefault: [] Initialize custom setting panel, please visit How to add setting panel ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, settings: [ { html: 'Custom setting 01', selector: [ { html: 'Submenu 01', }, { html: 'Submenu 02', }, ], onSelect: function (item) { console.log(item.html); }, }, { html: 'Custom setting 02', selector: [ { html: 'Submenu 01', }, { html: 'Submenu 02', }, ], onSelect: function (item) { console.log(item.html); }, }, ], });  "},{"title":"contextmenu​","type":1,"pageTitle":"Basic options","url":"options#contextmenu","content":"Type: ArrayDefault: [] Initialize custom contextmenu Property\tType\tDescriptiondisable\tBoolean\tWhether to disable the component name\tString\tThe unique name of the component, used to mark the class name index\tNumber\tComponent index, priority for display html\tString、Element\tDOM element of the component style\tObject\tComponent style object click\tFunction\tComponent click event mounted\tFunction\tTriggered after the component is mounted tooltip\tString\tPrompt text of the component ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', contextmenu: [ { html: 'Custom menu', click: function () { console.info('You clicked the custom menu'); art.contextmenu.show = false; }, }, ], }); art.on('ready', () => { art.contextmenu.show = true; });  "},{"title":"controls​","type":1,"pageTitle":"Basic options","url":"options#controls","content":"Type: ArrayDefault: [] Initialize the customized bottom control bar Property\tType\tDescriptiondisable\tBoolean\tWhether to disable the component name\tString\tThe unique name of the component, used to mark the class name index\tNumber\tComponent index, priority for display html\tString、Element\tDOM element of the component style\tObject\tComponent style object click\tFunction\tComponent click event mounted\tFunction\tTriggered after the component is mounted tooltip\tString\tPrompt text of the component position\tString\tLocation at left or right ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { disable: false, name: 'button', index: 10, position: 'right', html: 'Custom button1', tooltip: 'Custom button1', style: { color: 'red', }, click: function () { console.log('You clicked custom button 1'); }, mounted: function () { console.log('Custom button mounting is complete 1'); }, }, { position: 'left', html: 'Custom button2', tooltip: 'Custom button2', style: { color: 'green', }, click: function () { console.log('You clicked custom button 2'); }, }, ], });  "},{"title":"quality​","type":1,"pageTitle":"Basic options","url":"options#quality","content":"Type: ArrayDefault: [] Whether to display the quality selection list in the bottom control bar Property\tType\tDescriptiondefault\tBoolean\tDefault quality html\tString\tQuality name url\tString\tQuality address ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', quality: [ { default: true, html: 'SD 480P', url: '/assets/sample/video.mp4', }, { html: 'HD 720P', url: '/assets/sample/video.mp4', }, ], });  "},{"title":"highlight​","type":1,"pageTitle":"Basic options","url":"options#highlight","content":"Type: ArrayDefault: [] Show highlighted information points on the progress bar Property\tType\tDescriptiontime\tNumber\tHighlight time (unit seconds) text\tString\tHighlight text ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', highlight: [ { time: 60, text: 'One more chance', }, { time: 120, text: '谁でもいいはずなのに', }, { time: 180, text: '夏の想い出がまわる', }, { time: 240, text: 'こんなとこにあるはずもないのに', }, { time: 300, text: '－－终わり－－', }, ], });  "},{"title":"plugins​","type":1,"pageTitle":"Basic options","url":"options#plugins","content":"Type: ArrayDefault: [] Initialization custom plugins ▶ Run Code function myPlugin(art) { console.info('You can access an instance of a player in the plugin'); return { name: 'myPlugin', something: 'Custom export properties', doSomething: function () { console.info('Custom export method'); }, }; } var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [myPlugin], }); art.on('ready', () => { console.info(art.plugins.myPlugin.something); console.info(art.plugins.myPlugin.doSomething()); });  "},{"title":"whitelist​","type":1,"pageTitle":"Basic options","url":"options#whitelist","content":"Type: ArrayDefault: [] Because there are a variety of differences and restrictions in different mobile devices, this player is mount video by default on mobile devices. If you want to use this player on mobile devices, you need to manually open white list. The whitelist is an array type, which matches the window.navigator.userAgent, as long as one of the match is successful, enable the player Support string match, function match, regular match ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)], // whitelist: [/iPhone OS 11/gi], // whitelist: ['iPhone OS 11'], whitelist: ['*'], });  Tip If you want all types of mobile devices to enable players, set the whitelist to wildcard: ['*'] "},{"title":"thumbnails​","type":1,"pageTitle":"Basic options","url":"options#thumbnails","content":"Type: ObjectDefault: {} Set a preview map on the progress bar Property\tType\tDescriptionurl\tString\tPreview url number\tNumber\tPreview number column\tNumber\tPreview column width\tNumber\tPreview width height\tNumber\tPreview height ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', thumbnails: { url: '/assets/sample/thumbnails.png', number: 100, column: 10, }, });  "},{"title":"subtitle​","type":1,"pageTitle":"Basic options","url":"options#subtitle","content":"Type: ObjectDefault: {} Set the subtitles of the video, support subtitles format: vtt、srt、ass Property\tType\tDescriptionurl\tString\tSubtitle url type\tString\tSubtitle type: vtt, srt, ass style\tObject\tSubtitle style encoding\tString\tSubtitle encoding, default utf-8 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', type: 'srt', encoding: 'utf-8', style: { color: '#03A9F4', 'font-size': '30px', }, }, });  "},{"title":"moreVideoAttr​","type":1,"pageTitle":"Basic options","url":"options#morevideoattr","content":"Type: ObjectDefault: {'controls': false,'preload': 'metadata'} More video properties, these properties will be written directly into video elements ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', moreVideoAttr: { 'webkit-playsinline': true, playsInline: true, }, });  "},{"title":"icons​","type":1,"pageTitle":"Basic options","url":"options#icons","content":"Type: ObjectDefault: {} Used to replace the default icon, support HTML string ▶ Run 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">', play: '', pause: '', check: '', volume: '', volumeClose: '', screenshot: '', setting: '', pip: '', arrowLeft: '', arrowRight: '', playbackRate: '', aspectRatio: '', config: '', lock: '', flip: '', unlock: '', fullscreenOff: '', fullscreenOn: '', fullscreenWebOff: '', fullscreenWebOn: '', switchOn: '', switchOff: '', error: '', indicator: '', }, });  "},{"title":"type​","type":1,"pageTitle":"Basic options","url":"options#type","content":"Type: StringDefault: '' Used to specify the format of the video, you need to use the CustomType to use, please visit Libraries The default video format is the suffix of video addresses (such as .flv,.mkv, .ts), but sometimes video address does not have the correct suffix, so it is necessary to specify ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.flv', type: 'flv', });  "},{"title":"customType​","type":1,"pageTitle":"Basic options","url":"options#customtype","content":"Type: ObjectDefault: {} Match by the format of the video, hand over video decoding to third party programs, please visit Libraries ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.flv', customType: { flv: function (video, url, art) { // video: Video DOM element // url: Video url // art: Current instance }, }, });  "},{"title":"lang​","type":1,"pageTitle":"Basic options","url":"options#lang","content":"Type: StringDefault: navigator.language.toLowerCase() Default display language, currently support: en、zh-cn、zh-tw、cs、pl、es、fa ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'en', });  "},{"title":"lock​","type":1,"pageTitle":"Basic options","url":"options#lock","content":"Type: BooleanDefault: false Whether to display a lock button on the mobile side to hide the bottom control bar ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lock: true, });  "},{"title":"fastForward​","type":1,"pageTitle":"Basic options","url":"options#fastforward","content":"Type: BooleanDefault: false Whether to add fast forward function on the mobile, when long press the video ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fastForward: true, });  "},{"title":"autoPlayback​","type":1,"pageTitle":"Basic options","url":"options#autoplayback","content":"Type: BooleanDefault: false Whether to use auto playback ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoPlayback: true, });  "},{"title":"autoOrientation​","type":1,"pageTitle":"Basic options","url":"options#autoorientation","content":"Type: BooleanDefault: false Whether to rotate the player according to the video size and viewport size, when the player web-fullscreen in mobile ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoOrientation: true, });  "},{"title":"airplay​","type":1,"pageTitle":"Basic options","url":"options#airplay","content":"Type: BooleanDefault: false Whether to display the AirPlay button, only available in Safari currently ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', airplay: true, });  "},{"title":"在控制栏添加按钮","type":0,"sectionRef":"#","url":"zh-cn/Questions/Create_button_in_the_controls","content":"在控制栏添加按钮 有时你需要在控制栏添加按钮，如开关按钮或者单选按钮等等，你甚至可以使用第三方的样式库如 bootstrap ▶ 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) { // 第二个参数是事件对象 time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); ","keywords":""},{"title":"基础参数","type":0,"sectionRef":"#","url":"zh-cn/options","content":"","keywords":""},{"title":"container​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#container","content":"类型: String、Element默认: #artplayer必填: 是 播放器所挂载的 dom 容器，其必须是具有尺寸的，否则播放器无法显示 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', // container: document.querySelector('.artplayer-app'), url: '/assets/sample/video.mp4', });  您可能需要初始化容器元素的大小，如: .artplayer-app { width: 400px; height: 300px; }  "},{"title":"url​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#url","content":"类型: String默认: ''必填: 是 视频源地址，默认支持三种视频文件格式：.mp4、.ogg、.webm ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', });  "},{"title":"Ready Callback​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#ready-callback","content":"类型: Function默认: undefined 构造函数接受一个函数作为第二个参数，播放器初始化成功且视频可以播放时触发，和ready事件一样 ▶ Run Code var art = new Artplayer( { container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }, function () { this.play(); }, );  提示 回调函数里的this就是播放器实例，但回调函数假如使用了箭头函数，this则不会指向播放器实例 "},{"title":"poster​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#poster","content":"类型: String默认: '' 视频的海报，只会出现在播放器初始化且未播放的状态下 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', poster: '/assets/sample/poster.jpg', });  "},{"title":"title​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#title","content":"类型: String默认: '' 视频标题，目前会出现在视频截图和迷你模式下 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', title: '【新海诚动画】『秒速5センチメートル』', screenshot: true, });  "},{"title":"theme​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#theme","content":"类型: String默认: #f00 播放器主题颜色，目前只作用于进度条上 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', theme: '#ffad00', });  "},{"title":"volume​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#volume","content":"类型: Number默认: 0.7 播放器的默认音量 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', volume: 0.5, });  提示 播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值 "},{"title":"isLive​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#islive","content":"类型: Boolean默认: false 使用直播模式，会隐藏进度条和播放时间 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', isLive: true, });  "},{"title":"muted​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#muted","content":"类型: Boolean默认: false 是否默认静音 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, });  "},{"title":"autoplay​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#autoplay","content":"类型: Boolean默认: false 是否自动播放 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoplay: true, muted: true, });  提示 假如希望默认进入页面就能自动播放视频，muted 必需为 true，更多信息请阅读 Autoplay Policy Changes "},{"title":"autoSize​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#autosize","content":"类型: Boolean默认: false 播放器的尺寸默认会填充整个 container 容器尺寸，所以经常出现黑边，该值能自动调整播放器尺寸以隐藏黑边 ▶ Run Code // 缩放浏览器窗口查看效果 var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, });  "},{"title":"autoMini​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#automini","content":"类型: Boolean默认: false 当播放器滚动到浏览器视口以外时，自动进入迷你播放模式 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoMini: true, });  "},{"title":"loop​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#loop","content":"类型: Boolean默认: false 是否循环播放 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', loop: true, });  "},{"title":"flip​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#flip","content":"类型: Boolean默认: false 是否显示视频翻转功能，目前只出现在 设置面板 里，所以需要同时设置 setting 为 true ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', flip: true, setting: true, });  "},{"title":"playbackRate​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#playbackrate","content":"类型: Boolean默认: false 是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', playbackRate: true, setting: true, });  "},{"title":"aspectRatio​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#aspectratio","content":"类型: Boolean默认: false 是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', aspectRatio: true, setting: true, });  "},{"title":"screenshot​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#screenshot","content":"类型: Boolean默认: false 是否在底部控制栏里显示视频截图功能 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', screenshot: true, // 可选 moreVideoAttr: { crossOrigin: 'anonymous', }, });  提示 由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败 "},{"title":"setting​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#setting","content":"类型: Boolean默认: false 是否在底部控制栏里显示设置面板的开关按钮 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, });  "},{"title":"hotkey​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#hotkey","content":"类型: Boolean默认: true 是否使用快捷键 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', hotkey: true, });  热键\t描述↑\t增加音量 ↓\t降低音量 ←\t快进 5 秒 →\t快退 5 秒 space\t切换播放/暂停 提示 只在播放器获得焦点后（如点击了播放器后），该快捷键才会生效 "},{"title":"pip​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#pip","content":"类型: Boolean默认: false 是否在底部控制栏里显示画中画的开关按钮 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', pip: true, });  "},{"title":"mutex​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#mutex","content":"类型: Boolean默认: true 假如页面里同时存在多个播放器，是否只能让一个播放器播放 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', mutex: true, });  "},{"title":"fullscreen​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#fullscreen","content":"类型: Boolean默认: false 是否在底部控制栏里显示播放器窗口全屏按钮 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreen: true, });  "},{"title":"fullscreenWeb​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#fullscreenweb","content":"类型: Boolean默认: false 是否在底部控制栏里显示播放器网页全屏按钮 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, });  "},{"title":"subtitleOffset​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#subtitleoffset","content":"类型: Boolean默认: false 字幕时间偏移，范围在 [-5s, 5s] ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', }, setting: true, subtitleOffset: true, });  "},{"title":"miniProgressBar​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#miniprogressbar","content":"类型: Boolean默认: false 迷你进度条，只在播放器失去焦点后且正在播放时出现 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', miniProgressBar: true, });  "},{"title":"useSSR​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#usessr","content":"类型: Boolean默认: false 是否使用 SSR 挂载模式，假如你希望在播放器挂载前，就提前渲染好播放器所需的HTML时有用 你可以通过Artplayer.html访问到播放器所需的HTML ▶ Run Code var $container = document.querySelector('.artplayer-app'); $container.innerHTML = Artplayer.html; var art = new Artplayer({ container: $container, url: '/assets/sample/video.mp4', useSSR: true, });  提示 SSR 是 Server Side Render 简称，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的 HTML 就可以了。 "},{"title":"playsInline​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#playsinline","content":"类型: Boolean默认: true 在移动端是否使用 playsInline 模式 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', playsInline: true, });  "},{"title":"layers​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#layers","content":"类型: Array默认: [] 初始化自定义的业务图层 属性\t类型\t描述disable\tBoolean\t是否禁用组件 name\tString\t组件唯一名称，用于标记类名 index\tNumber\t组件索引，用于显示的优先级 html\tString、Element\t组件的 DOM 元素 style\tObject\t组件样式对象 click\tFunction\t组件点击事件 mounted\tFunction\t组件挂载后触发 tooltip\tString\t组件的提示文本 ▶ Run Code var img = '/assets/sample/layer.png'; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', layers: [ { index: 1, name: 'potser', disable: false, html: `<img style="width: 100px" src="${img}">`, style: { position: 'absolute', top: '20px', right: '20px', opacity: '.9', }, click: function (...args) { console.info('你点击了组件'); art.layers.show = false; }, mounted: function (...args) { console.info('组件挂载完成'); }, }, ], });  "},{"title":"settings​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#settings","content":"类型: Array默认: [] 初始化自定义的设置面板，更多信息请访问 怎么添加设置面板 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, settings: [ { html: '自定义设置01', selector: [ { html: '子菜单01', }, { html: '子菜单02', }, ], onSelect: function (item) { console.log(item.html); }, }, { html: '自定义设置02', selector: [ { html: '子菜单01', }, { html: '子菜单02', }, ], onSelect: function (item) { console.log(item.html); }, }, ], });  "},{"title":"contextmenu​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#contextmenu","content":"类型: Array默认: [] 初始化自定义的右键菜单 属性\t类型\t描述disable\tBoolean\t是否禁用组件 name\tString\t组件唯一名称，用于标记类名 index\tNumber\t组件索引，用于显示的优先级 html\tString、Element\t组件的 DOM 元素 style\tObject\t组件样式对象 click\tFunction\t组件点击事件 mounted\tFunction\t组件挂载后触发 tooltip\tString\t组件的提示文本 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', contextmenu: [ { html: '自定义菜单', click: function () { console.info('你点击了自定义菜单'); art.contextmenu.show = false; }, }, ], }); art.on('ready', () => { art.contextmenu.show = true; });  "},{"title":"controls​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#controls","content":"类型: Array默认: [] 初始化自定义的底部控制栏 属性\t类型\t描述disable\tBoolean\t是否禁用组件 name\tString\t组件唯一名称，用于标记类名 index\tNumber\t组件索引，用于显示的优先级 html\tString、Element\t组件的 DOM 元素 style\tObject\t组件样式对象 click\tFunction\t组件点击事件 mounted\tFunction\t组件挂载后触发 tooltip\tString\t组件的提示文本 position\tString\t位置在 left 或者 right ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { disable: false, name: 'button', index: 10, position: 'right', html: '自定义按钮', tooltip: '自定义按钮的提示1', style: { color: 'red', }, click: function () { console.log('你点击了自定义按钮1'); }, mounted: function () { console.log('自定义按钮挂载完成1'); }, }, { position: 'left', html: '自定义按钮2', tooltip: '自定义按钮的提示2', style: { color: 'green', }, click: function () { console.log('你点击了自定义按钮2'); }, }, ], });  "},{"title":"quality​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#quality","content":"类型: Array默认: [] 是否在底部控制栏里显示画质选择列表 属性\t类型\t描述default\tBoolean\t默认画质 name\tString\t画质名字 url\tString\t画质地址 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', quality: [ { default: true, html: 'SD 480P', url: '/assets/sample/video.mp4', }, { html: 'HD 720P', url: '/assets/sample/video.mp4', }, ], });  "},{"title":"highlight​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#highlight","content":"类型: Array默认: [] 在进度条上显示高亮信息点 属性\t类型\t描述time\tNumber\t高亮时间（单位秒） text\tString\t高亮文本 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', highlight: [ { time: 60, text: 'One more chance', }, { time: 120, text: '谁でもいいはずなのに', }, { time: 180, text: '夏の想い出がまわる', }, { time: 240, text: 'こんなとこにあるはずもないのに', }, { time: 300, text: '－－终わり－－', }, ], });  "},{"title":"plugins​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#plugins","content":"类型: Array默认: [] 初始化自定义的插件 ▶ Run Code function myPlugin(art) { console.info('你可以在插件里访问到播放器的实例'); return { name: 'myPlugin', something: '自定义导出的属性', doSomething: function () { console.info('自定义导出的方法'); }, }; } var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [myPlugin], }); art.on('ready', () => { console.info(art.plugins.myPlugin.something); console.info(art.plugins.myPlugin.doSomething()); });  "},{"title":"whitelist​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#whitelist","content":"类型: Array默认: [] 因为不同的移动设备存在多种差异和限制，所以本播放器默认在移动设备上使用原生方法挂载视频，假如你想在移动设备上使用本播放器，需要手动开启白名单 白名单是一个数组类型，分别与 window.navigator.userAgent 进行匹配，只要其中一项匹配成功则启用播放器 支持字符串匹配、函数匹配、正则匹配 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)], // whitelist: [/iPhone OS 11/gi], // whitelist: ['iPhone OS 11'], whitelist: ['*'], });  提示 假如希望全部类型的移动设备都启用播放器，设置 whitelist 为通配符 ['*'] 即可 "},{"title":"thumbnails​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#thumbnails","content":"类型: Object默认: {} 在进度条上设置预览图 属性\t类型\t描述url\tString\t预览图地址 number\tNumber\t预览图数量 column\tNumber\t预览图列数 width\tNumber\t预览图宽度 height\tNumber\t预览图高度 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', thumbnails: { url: '/assets/sample/thumbnails.png', number: 100, column: 10, }, });  "},{"title":"subtitle​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#subtitle","content":"类型: Object默认: {} 设置视频的字幕，支持字幕格式：vtt、srt、ass 属性\t类型\t描述url\tString\t字幕地址 type\tString\t字幕类型，可选 vtt、srt、ass style\tObject\t字幕样式 encoding\tString\t字幕编码，默认 utf-8 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', subtitle: { url: '/assets/sample/subtitle.srt', type: 'srt', encoding: 'utf-8', style: { color: '#03A9F4', 'font-size': '30px', }, }, });  "},{"title":"moreVideoAttr​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#morevideoattr","content":"类型: Object默认: {'controls': false,'preload': 'metadata'} 更多视频属性，这些属性将直接写入视频元素里 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', moreVideoAttr: { 'webkit-playsinline': true, playsInline: true, }, });  "},{"title":"icons​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#icons","content":"类型: Object默认: {} 用于替换默认图标，支持 Html 字符串 ▶ Run 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">', play: '', pause: '', check: '', volume: '', volumeClose: '', screenshot: '', setting: '', pip: '', arrowLeft: '', arrowRight: '', playbackRate: '', aspectRatio: '', config: '', lock: '', flip: '', unlock: '', fullscreenOff: '', fullscreenOn: '', fullscreenWebOff: '', fullscreenWebOn: '', switchOn: '', switchOff: '', error: '', indicator: '', }, });  "},{"title":"type​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#type","content":"类型: String默认: '' 用于指明视频的格式，需要配合 customType 一起使用，更多信息请访问 第三方库 默认视频的格式就是视频地址的后缀（如 .flv、.mkv、.ts），但有时候视频地地址没有正确的后缀，所以需要特别指明 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.flv', type: 'flv', });  "},{"title":"customType​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#customtype","content":"类型: Object默认: {} 通过视频的格式进行匹配，把视频解码权交给第三方程序进行处理，更多信息请访问 第三方库 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.flv', customType: { flv: function (video, url, art) { // video: 视频dom元素 // url: 视频地址 // art: 当前实例 }, }, });  "},{"title":"lang​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#lang","content":"类型: String默认: navigator.language.toLowerCase() 默认显示语言，目前支持：en、zh-cn、zh-tw、cs、pl、es、fa ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'en', });  "},{"title":"lock​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#lock","content":"类型: Boolean默认: false 是否在移动端显示一个锁定按钮，用于隐藏底部控制栏 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lock: true, });  "},{"title":"fastForward​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#fastforward","content":"类型: Boolean默认: false 是否在移动端添加长按视频快进功能 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fastForward: true, });  "},{"title":"autoPlayback​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#autoplayback","content":"类型: Boolean默认: false 是否使用自动回放功能 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoPlayback: true, });  "},{"title":"autoOrientation​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#autoorientation","content":"类型: Boolean默认: false 是否在移动端的网页全屏时，根据视频尺寸和视口尺寸，旋转播放器 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoOrientation: true, });  "},{"title":"airplay​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#airplay","content":"Type: BooleanDefault: false 是否显示 airplay 按钮，当前只在 Safari 下可用 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', airplay: true, });  "},{"title":"处理单个组件","type":0,"sectionRef":"#","url":"zh-cn/Questions/Handle_single_component","content":"处理单个组件 当我们在layers、contextmenu、controls里添加自定义组件时，最好带上一个唯一的 name 属性，该属性不但会作为类名添加到 dom 元素里，还可以用于快速定位到组件。 这里有三种方法获取组件的dom元素：组件方法 mounted、实例方法 query、推荐通过 name 直接获取 ▶ 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) { // } }); // 使用查询 query 获取组件的DOM元素 var $layer1 = art.query('.art-layer-layer1'); var $contextmenu1 = art.query('.art-contextmenu-contextmenu1'); var $control1 = art.query('.art-control-control1'); // 推荐使用 name 获取组件的DOM元素 var $layer1 = art.layers['layer1']; var $contextmenu1 = art.contextmenu['contextmenu1']; var $control1 = art.controls['control1']; }); 提示 注意，你不能创建存在相同名字的组件","keywords":""},{"title":"Iframe 插件","type":0,"sectionRef":"#","url":"zh-cn/Plugins/iframe","content":"","keywords":""},{"title":"说明​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#说明","content":"通过该插件，你可以轻松在 主页面 里控制 iframe 页面里的播放器。 如在 主页面 里通过代码控制 iframe 播放器的功能，或者获取 iframe 播放器的值等等 "},{"title":"演示​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#演示","content":"👉 查看完整演示 "},{"title":"安装​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#安装","content":""},{"title":"通过 npm 安装：​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#通过-npm-安装","content":"$ npm install artplayer-plugin-iframe  "},{"title":"通过 yarn 安装：​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#通过-yarn-安装","content":"$ yarn add artplayer-plugin-iframe  "},{"title":"通过 script 安装：​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#通过-script-安装","content":"<!-- 本地 --> <script src="path/to/artplayer-plugin-iframe.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer-plugin-iframe/dist/artplayer-plugin-iframe.js"></script>  然后你可以通过 window.artplayerPluginIframe 访问到插件函数 "},{"title":"使用​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#使用","content":""},{"title":"index.html​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#indexhtml","content":"index.html <!DOCTYPE html><html> <head> <title>ArtPlayer</title> <meta charset="UTF-8" /> </head> <body> <iframe id="iframe"></iframe> <script src="path/to/artplayer-plugin-iframe.js"></script> <script> const iframe = new ArtplayerPluginIframe({ // iframe 元素 iframe: document.querySelector('#iframe'), // iframe 地址 url: 'path/to/iframe.html', }); // 向 iframe 发送消息 iframe.commit(() => { var art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4', }); }); </script> </body></html> "},{"title":"iframe.html​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#iframehtml","content":"iframe.html <!DOCTYPE html><html> <head> <title>ArtPlayer</title> <meta charset="UTF-8" /> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div class="artplayer-app" style="width: 100%; height: 100%;"></div> <script src="path/to/artplayer.js"></script> <script src="path/to/artplayer-plugin-iframe.js"></script> <script> // 注入脚本，接收来自实例的消息 ArtplayerPluginIframe.inject(); </script> </body></html> "},{"title":"实例接口​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#实例接口","content":""},{"title":"commit​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#commit","content":"类型: Function 将消息推送到 iframe，该函数将在 iframe 内部运行 iframe.commit(() => { var art = new Artplayer({ container: '.artplayer-app', url: 'path/to/video.mp4', }); }); iframe.commit(() => { art.seek = 5; }); // 获取来自 iframe 的值 (async function () { // 使用 return 关键词 var currentTime = await iframe.commit(() => { return art.currentTime; }); // 或者使用 resolve 方法 var currentTime2 = await iframe.commit((resolve) => { setTimeout(() => { resolve(art.currentTime); }, 1000); }); })();  "},{"title":"message​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#message","content":"类型: Function 接收来自 iframe 的消息 iframe.message((event) => { console.log(event); });  "},{"title":"destroy​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#destroy","content":"类型: Function 销毁实例，销毁后无法与 iframe 通信 iframe.destroy();  "},{"title":"Iframe 接口​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#iframe-接口","content":"Tip Iframe 接口 只能运行在 iframe 里 "},{"title":"inject​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#inject","content":"类型: Function 注入脚本，接收来自实例的消息 ArtplayerPluginIframe.inject();  "},{"title":"postMessage​","type":1,"pageTitle":"Iframe 插件","url":"zh-cn/Plugins/iframe#postmessage","content":"类型: Function 将消息推送到实例 iframe.message((event) => { console.log(event); }); iframe.commit(() => { ArtplayerPluginIframe.postMessage({ type: 'currentTime', data: art.currentTime, }); });  "},{"title":"如何导入类型","type":0,"sectionRef":"#","url":"zh-cn/Questions/How_to_import_types","content":"如何导入类型 有时你会丢失 TypeScript 的语法提示，这时候你可以手动导入类型 /** * @typedef { import("artplayer/types/artplayer") } Artplayer */ /** * @type {Artplayer} - 一个 Artplayer 实例 */ const art1 = {}; /** * @param {Artplayer} art2 - 一个 Artplayer 实例 */ function getInstance(art2) { // } ","keywords":""},{"title":"与 React Portal 使用","type":0,"sectionRef":"#","url":"zh-cn/Questions/Use_with_react_portal","content":"与 React Portal 使用 在 layers、contextmenu、controls 里使用 react 组件也是非常容易的事，通过 createPortal 处理更复杂的业务逻辑 👉 点击打开在线演示 import React, { useState, useEffect } from "react"; import ReactDOM, { createPortal } from "react-dom"; import Artplayer from "artplayer/examples/react/Artplayer"; function Timer({ time }) { return <div>{time}</div>; } function App() { const [art, setArt] = useState(null); const [time, setTime] = useState(0); useEffect(() => { const update = () => setTime((time) => time + 1); setInterval(update, 1000); }, []); return ( <div> <Artplayer option={{ url: "https://artplayer.org/assets/sample/video.mp4", layers: [ { html: "", name: "portal" } ], controls: [ { position: "right", name: "portal", html: "" } ] }} style={{ width: "600px", height: "400px", margin: "60px auto 0" }} getInstance={(art) => { art.on("ready", () => setArt(art)); }} /> {art ? createPortal(<Timer time={time} />, art.layers.portal) : null} {art ? createPortal(<Timer time={time} />, art.controls.portal) : null} </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); ","keywords":""},{"title":"怎么添加设置面板","type":0,"sectionRef":"#","url":"zh-cn/Questions/How_to_add_setting_panel","content":"","keywords":""},{"title":"添加选择列表​","type":1,"pageTitle":"怎么添加设置面板","url":"zh-cn/Questions/How_to_add_setting_panel#添加选择列表","content":"设置面板类似于列表选择的集合，而且支持多层嵌套 属性\t类型\t描述html\tString、Element\t元素的 DOM 元素 icon\tString、Element\t元素的图标 selector\tArray\t元素列表 onSelect\tFunction\t元素点击事件 width\tNumber\t列表宽度 default\tBoolean\t是否默认选中 tooltip\tString\t提示文本 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, flip: true, playbackRate: true, aspectRatio: true, settings: [ { html: '选择字幕', width: 250, tooltip: '字幕 01', selector: [ { default: true, html: '<span style="color:red">字幕 01</span>', url: '/assets/sample/subtitle.srt?id=1', }, { html: '<span style="color:yellow">字幕 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: '选择画质', 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; }, }, { html: '多层嵌套', selector: [ { html: '嵌套01', selector: [ { html: '嵌套02', }, { html: '嵌套02', }, ], }, { html: '嵌套01', selector: [ { html: '嵌套02', }, { html: '嵌套02', }, ], }, ], }, ], });  "},{"title":"添加切换按钮​","type":1,"pageTitle":"怎么添加设置面板","url":"zh-cn/Questions/How_to_add_setting_panel#添加切换按钮","content":"属性\t类型\t描述html\tString、Element\t元素的 DOM 元素 icon\tString、Element\t元素的图标 switch\tBoolean\t按钮默认状态 onSwitch\tFunction\t按钮切换事件 tooltip\tString\t提示文本 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, flip: true, playbackRate: true, aspectRatio: true, settings: [ { html: '画中画模式', tooltip: '关闭', icon: '<img width="22" heigth="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 ? '开启' : '关闭'; // 改变按钮状态 return nextState; }, }, { html: '和列表组合', width: 200, selector: [ { default: true, html: '设置 01', }, { html: '设置 02', }, { html: '设置 03', switch: false, onSwitch: function (item, $dom, event) { return !item.switch; }, }, { html: '设置 04', icon: '', switch: true, onSwitch: function (item, $dom, event) { return !item.switch; }, }, ], onSelect: function (item) { return item.html; }, }, ], });  "},{"title":"添加范围滑动​","type":1,"pageTitle":"怎么添加设置面板","url":"zh-cn/Questions/How_to_add_setting_panel#添加范围滑动","content":"属性\t类型\t描述html\tString、Element\t元素的 DOM 元素 icon\tString、Element\t元素的图标 range\tArray\t默认状态数组 onRange\tFunction\t滑块滑动事件 tooltip\tString\t提示文本 const range = [5, 1, 10, 1]; const value = range[0]; const min = range[1]; const max = range[2]; const step = range[3];  ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', setting: true, flip: true, playbackRate: true, aspectRatio: true, settings: [ { html: '滑块', tooltip: '5x', icon: '<img width="22" heigth="22" src="/assets/img/state.svg">', range: [5, 1, 10, 1], onRange: function (item) { // 改变提示文本 return item.range + 'x'; }, }, { html: '和列表组合', width: 200, selector: [ { default: true, html: '设置 01', }, { html: '设置 02', }, { html: '设置 03', tooltip: '5x', range: [5, 1, 10, 1], onRange: function (item) { return item.range + 'x'; }, }, { html: '设置 04', icon: '', tooltip: '5x', range: [5, 1, 10, 1], onRange: function (item) { return item.range + 'x'; }, }, ], onSelect: function (item) { return item.html; }, }, ], });  "},{"title":"在控制栏添加列表","type":0,"sectionRef":"#","url":"zh-cn/Questions/Create_selector_in_the_controls","content":"","keywords":""},{"title":"切换字幕​","type":1,"pageTitle":"在控制栏添加列表","url":"zh-cn/Questions/Create_selector_in_the_controls#切换字幕","content":"▶ 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) { console.info(item, $dom); art.subtitle.url = item.url; return '你点击了 ' + item.html; }, }, ], });  "},{"title":"切换滤镜​","type":1,"pageTitle":"在控制栏添加列表","url":"zh-cn/Questions/Create_selector_in_the_controls#切换滤镜","content":"▶ Run Code var instagramFilters = [ { "html": "1977", "class": "filter-1977" }, { "html": "Aden", "class": "filter-aden" }, { "html": "Amaro", "class": "filter-amaro" }, { "html": "Ashby", "class": "filter-ashby" }, { "html": "Brannan", "class": "filter-brannan" }, { "html": "Brooklyn", "class": "filter-brooklyn" }, { "html": "Charmes", "class": "filter-charmes" }, { "html": "Clarendon", "class": "filter-clarendon" }, { "html": "Crema", "class": "filter-crema" }, { "html": "Dogpatch", "class": "filter-dogpatch" }, { "html": "Earlybird", "class": "filter-earlybird" }, { "html": "Gingham", "class": "filter-gingham" }, { "html": "Ginza", "class": "filter-ginza" }, { "html": "Hefe", "class": "filter-hefe" }, { "html": "Helena", "class": "filter-helena" }, { "html": "Hudson", "class": "filter-hudson" }, { "html": "Inkwell", "class": "filter-inkwell" }, { "html": "Kelvin", "class": "filter-kelvin" }, { "html": "Kuno", "class": "filter-juno" }, { "html": "Lark", "class": "filter-lark" }, { "html": "Lo-Fi", "class": "filter-lofi" }, { "html": "Ludwig", "class": "filter-ludwig" }, { "html": "Maven", "class": "filter-maven" }, { "html": "Mayfair", "class": "filter-mayfair" }, { "html": "Moon", "class": "filter-moon" }, { "html": "Nashville", "class": "filter-nashville" }, { "html": "Perpetua", "class": "filter-perpetua" }, { "html": "Poprocket", "class": "filter-poprocket" }, { "html": "Reyes", "class": "filter-reyes" }, { "html": "Rise", "class": "filter-rise" }, { "html": "Sierra", "class": "filter-sierra" }, { "html": "Skyline", "class": "filter-skyline" }, { "html": "Slumber", "class": "filter-slumber" }, { "html": "Stinson", "class": "filter-stinson" }, { "html": "Sutro", "class": "filter-sutro" }, { "html": "Toaster", "class": "filter-toaster" }, { "html": "Valencia", "class": "filter-valencia" }, { "html": "Vesper", "class": "filter-vesper" }, { "html": "Walden", "class": "filter-walden" }, { "html": "Willow", "class": "filter-willow" }, { "html": "X-Pro", "class": "filter-xpro-ii" } ] var art = new Artplayer({ container: '.artplayer-app', url: 'https://artplayer.org/assets/sample/video.mp4', autoSize: true, controls: [ { position: 'right', html: 'Instagram Filters', selector: instagramFilters, onSelect: function (item) { art.template.$video.className = 'art-video ' + item.class; return item.html; }, }, ], });  "},{"title":"常用属性","type":0,"sectionRef":"#","url":"zh-cn/propertie","content":"","keywords":""},{"title":"play​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#play","content":"类型: Function 播放视频 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { art.play(); });  "},{"title":"pause​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#pause","content":"类型: Function 暂停视频 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { art.play(); setTimeout(() => { art.pause(); }, 3000); });  "},{"title":"toggle​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#toggle","content":"类型: Function 切换视频的播放和暂停 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { art.toggle(); setTimeout(() => { art.toggle(); }, 3000); });  "},{"title":"seek​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#seek","content":"类型: Setter参数: Number 视频时间跳转，单位秒 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 5; });  "},{"title":"forward​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#forward","content":"类型: Setter参数: Number 视频时间快进，单位秒 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.forward = 5; });  "},{"title":"backward​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#backward","content":"类型: Setter参数: Number 视频时间快退，单位秒 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 5; setTimeout(() => { art.backward = 2; }, 3000); });  "},{"title":"volume​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#volume","content":"类型: Setter/Getter参数: Number 设置和获取视频音量，范围在：[0, 1] ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.volume); art.volume = 0.5; console.info(art.volume); });  "},{"title":"url​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#url","content":"类型: Setter/Getter参数: String 设置和获取视频地址 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.url); art.url = '/assets/sample/video.mp4?t=0'; console.info(art.url); });  "},{"title":"switchUrl​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#switchurl","content":"类型: Function参数: String 设置视频地址，设置时和 url 类似，但会执行一些优化操作 函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; setTimeout(() => { art.switchUrl('/assets/sample/video.mp4?t=0', '新视频名字'); }, 3000); });  "},{"title":"switchQuality​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#switchquality","content":"类型: Function参数: String 设置视频画质地址，和 switchUrl 类似，但会带上之前的播放进度 函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; setTimeout(() => { art.switchQuality('/assets/sample/video.mp4?t=0', '新视频地址'); }, 3000); });  "},{"title":"muted​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#muted","content":"类型: Setter/Getter参数: Boolean 设置和获取视频是否静音 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.muted); art.muted = true; console.info(art.muted); });  "},{"title":"currentTime​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#currenttime","content":"类型: Setter/Getter参数: Number 设置和获取视频当前时间，设置时间时和 seek 类似，但它不会触发额外的事件 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.currentTime); art.currentTime = 5; console.info(art.currentTime); });  "},{"title":"duration​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#duration","content":"类型: Getter 获取视频时长 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.duration); });  提示 有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 0 "},{"title":"screenshot​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#screenshot","content":"类型: Function 下载当前视频帧的截图 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; art.once('video:canplay', () => { art.screenshot(); }); });  "},{"title":"getDataURL​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#getdataurl","content":"类型: Function 获取当前视频帧的截图的base64地址，返回的是一个 Promise ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; art.getDataURL().then((url) => console.info(url)); });  "},{"title":"getBlobUrl​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#getbloburl","content":"类型: Function 获取当前视频帧的截图的blob地址，返回的是一个 Promise ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.seek = 10; art.getBlobUrl().then((url) => console.info(url)); });  "},{"title":"fullscreen​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#fullscreen","content":"类型: Setter/Getter参数: Boolean 设置和获取播放器窗口全屏 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreen: true, }); art.on('ready', () => { art.fullscreen = true; setTimeout(() => { art.fullscreen = false; }, 3000); });  提示 由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面） "},{"title":"fullscreenWeb​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#fullscreenweb","content":"类型: Setter/Getter参数: Boolean 设置和获取播放器网页全屏 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, }); art.on('ready', () => { art.fullscreenWeb = true; setTimeout(() => { art.fullscreenWeb = false; }, 3000); });  "},{"title":"pip​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#pip","content":"类型: Setter/Getter参数: Boolean 设置和获取播放器画中画模式 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', fullscreenWeb: true, }); art.on('ready', () => { art.pip = true; setTimeout(() => { art.pip = false; }, 3000); });  提示 由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面） "},{"title":"poster​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#poster","content":"类型: Setter/Getter参数: String 设置和获取视频海报，只有在视频播放前才能看到海报效果 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', poster: '/assets/sample/poster.jpg', }); art.on('ready', () => { console.info(art.poster); art.poster = '/assets/sample/poster.jpg?t=0'; console.info(art.poster); });  "},{"title":"mini​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#mini","content":"类型: Setter/Getter参数: Boolean 设置和获取播放器迷你模式 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.mini = true; });  "},{"title":"playing​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#playing","content":"类型: Getter参数: Boolean 获取视频是否正在播放中 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', muted: true, }); art.on('ready', () => { console.info(art.playing); art.play(); console.info(art.playing); });  "},{"title":"autoSize​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#autosize","content":"类型: Setter/Getter参数: Boolean 设置视频是否自适应尺寸，设置为 true 之后它会只执行一次 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.autoSize); art.autoSize = true; console.info(art.autoSize); });  "},{"title":"rect​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#rect","content":"类型: Getter 获取播放器的尺寸和坐标信息 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(JSON.stringify(art.rect)); });  提示 尺寸和坐标信息是通过 getBoundingClientRect 获取的 "},{"title":"flip​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#flip","content":"类型: Setter/Getter参数: String 设置和获取播放器翻转，支持normal、 horizontal、 vertical ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.flip); art.flip = 'horizontal'; console.info(art.flip); });  "},{"title":"playbackRate​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#playbackrate","content":"类型: Setter/Getter参数: Number 设置和获取播放器播放速度，支持0.5、0.75、1.0、1.25、1.5、1.75、2.0 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.playbackRate); art.playbackRate = 2; console.info(art.playbackRate); });  "},{"title":"aspectRatio​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#aspectratio","content":"类型: Setter/Getter参数: String 设置和获取播放器长宽比，支持default、4:3、16:9 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.aspectRatio); art.aspectRatio = '16:9'; console.info(art.aspectRatio); });  "},{"title":"loop​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#loop","content":"类型: Setter/Getter参数: Array 设置和获取区间循序播放，单位秒 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.loop); art.loop = [5, 10]; console.info(art.loop); });  提示 删除区间循环播放，只需要设置 loop 为 [] 即可 "},{"title":"autoHeight​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#autoheight","content":"类型: Setter/Getter参数: Boolean 当容器只有宽度，但你希望容器高度能自适应播放器的长宽比 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.autoHeight); art.autoHeight = true; console.info(art.autoHeight); });  "},{"title":"attr​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#attr","content":"类型: Function参数: String 动态获取和设置 video 元素的属性 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.attr('playsInline')); art.attr('playsInline', true); console.info(art.attr('playsInline')); });  "},{"title":"title​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#title","content":"类型: Setter/Getter参数: String 动态获取和设置播放器标题 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.title); art.title = '新标题'; console.info(art.title); });  "},{"title":"type​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#type","content":"类型: Setter/Getter参数: String 动态获取和设置视频类型 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.type); art.type = 'm3u8'; console.info(art.type); });  "},{"title":"theme​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#theme","content":"类型: Setter/Getter参数: String 动态获取和设置播放器主题颜色 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(art.theme); art.theme = '#000'; console.info(art.theme); });  "},{"title":"airplay​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#airplay","content":"Type: Function 开启隔空播放 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { name: 'airplay', position: 'right', html: 'AirPlay', click: function () { art.airplay(); }, }, ], });  "},{"title":"destroy​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#destroy","content":"类型: Function参数: Boolean 销毁播放器，接受一个参数表示是否销毁后同时移除播放器的 html，默认为 true ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { art.destroy(); });  "}]