ArtPlayer/docs/document/search-doc.json

[{"title":"Static propertys","type":0,"sectionRef":"#","url":"class","content":"","keywords":""},{"title":"instances​","type":1,"pageTitle":"Static propertys","url":"class#instances","content":"Type: Array A array that saves all player instances, and can manage multiple instances through this property when multiple players exist at the same time. ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); art.on('ready', () => { console.info(Artplayer.instances.length); }); Copy "},{"title":"version​","type":1,"pageTitle":"Static propertys","url":"class#version","content":"Type: String Current player version number ▶ Run Code console.info(Artplayer.version); Copy "},{"title":"env​","type":1,"pageTitle":"Static propertys","url":"class#env","content":"Type: String Current player environment variable ▶ Run Code console.info(Artplayer.env); Copy "},{"title":"utils​","type":1,"pageTitle":"Static propertys","url":"class#utils","content":"Type: Object Common utils for player ▶ Run Code console.info(Object.keys(Artplayer.utils)); Copy "},{"title":"config​","type":1,"pageTitle":"Static propertys","url":"class#config","content":"Type: Object Store native properties and methods of video ▶ Run Code console.info(Artplayer.config); Copy "},{"title":"scheme​","type":1,"pageTitle":"Static propertys","url":"class#scheme","content":"Type: Object Verification scheme for player option ▶ Run Code console.info(Artplayer.scheme); Copy "},{"title":"validator​","type":1,"pageTitle":"Static propertys","url":"class#validator","content":"Type: Function Validator for player option "},{"title":"option​","type":1,"pageTitle":"Static propertys","url":"class#option","content":"Type: Object Player default option ▶ Run Code console.info(Artplayer.option); Copy "},{"title":"html​","type":1,"pageTitle":"Static propertys","url":"class#html","content":"Type: String Player defaults HTML String, usually used for SSR ▶ Run Code console.info(Artplayer.html); Copy "},{"title":"kindOf​","type":1,"pageTitle":"Static propertys","url":"class#kindof","content":"Type: Function JS type identification function ▶ Run Code console.info(Artplayer.kindOf('0')); console.info(Artplayer.kindOf(0)); console.info(Artplayer.kindOf({})); console.info(Artplayer.kindOf([])); Copy "},{"title":"Add button to the controls","type":0,"sectionRef":"#","url":"en/Questions/Create button in the controls","content":"Add button to the controls ▶ Run Code var time = 0; var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', controls: [ { position: 'right', html: '<button type="button">Click Me!</button>', click: function (_, event) { // The second parameter is an event object time += 1; event.target.innerText = 'You Click ' + time; }, }, ], }); Copy","keywords":""},{"title":"Handle a single component","type":0,"sectionRef":"#","url":"en/Questions/Handle single component","content":"Handle a single component When we add custom components in layers, contextmenu, controls, 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']; }); Copy 提示 Note that you can't create components with the same name","keywords":""},{"title":"How to add setting panel","type":0,"sectionRef":"#","url":"en/Questions/How to add setting panel","content":"How to add setting panel Settings panels are similar to a collection of list selections, and support multi-layer nested Property\tType\tDescriptionhtml\tString、Element\tDOM elements of selector icon\tString、Element\tIcon of selector selector\tArray\tSelector list onSelect\tFunction\tSelector click event width\tNumber\tPanel width default\tBoolean\tDefault selected 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) { console.info(item, $dom); 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) { console.info(item, $dom); 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', }, ], }, ], }, ], }); Copy","keywords":""},{"title":"Danmuku plugin","type":0,"sectionRef":"#","url":"en/Plugins/danmuku","content":"","keywords":""},{"title":"Demo​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#demo","content":"👉 View full demo "},{"title":"Install​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#install","content":""},{"title":"Install by npm:​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#install-by-npm","content":"$ npm install artplayer-plugin-danmuku Copy "},{"title":"Install by yarn:​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#install-by-yarn","content":"$ yarn add artplayer-plugin-danmuku Copy import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'; Copy "},{"title":"Install by script:​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#install-by-script","content":"<script src="path/to/artplayer-plugin-danmuku.js"></script> Copy Then you can access the plugin function via window.artplayerPluginDanmuku "},{"title":"Use​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#use","content":""},{"title":"Use the damuku array​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#use-the-damuku-array","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({ // Damuku array danmuku: [ { text: '111', // Danmu text time: 1, // Video time color: '#fff', // Danmu color border: false, // Danmu border mode: 0, // Danmu mode: 0-scroll or 1-static }, { text: '222', time: 2, color: 'red', border: true, mode: 0, }, { text: '333', time: 3, color: 'green', border: false, mode: 1, }, ], speed: 5, // Animation time opacity: 1, // Opacity color: '#fff', // Font color size: 25, // Font size maxlength: 50, // The maximum number of words in the danmu margin: [10, 20], // Margin top and margin bottom synchronousPlayback: false, // Synchronous playback speed }), ], }); Copy "},{"title":"Use the XML​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#use-the-xml","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ // Damuku xml，like the Bilibili danmuku format danmuku: '/assets/sample/danmuku.xml', }), ], }); Copy "},{"title":"Use asynchronous calls​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#use-asynchronous-calls","content":"▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', plugins: [ artplayerPluginDanmuku({ // Use promise to return asynchronous danmuku: function () { return new Promise((resovle) => { return resovle([ { text: '111', time: 1, }, { text: '222', time: 2, }, { text: '333', time: 3, }, ]); }); }, }), ], }); Copy "},{"title":"Interface​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#interface","content":""},{"title":"hide/show​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#hideshow","content":"Type: Function Hidden or show the danmuku by methods hide and 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: 'Hide', click: function () { art.plugins.artplayerPluginDanmuku.hide(); }, }, { position: 'right', html: 'Show', click: function () { art.plugins.artplayerPluginDanmuku.show(); }, }, ], }); Copy "},{"title":"isHide​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#ishide","content":"Type: Boolean By attribute ishide judgment the current danmuku is hidden or displayed ▶ 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: 'Hide', click: function (_, event) { if (art.plugins.artplayerPluginDanmuku.isHide) { art.plugins.artplayerPluginDanmuku.show(); event.target.innerText = 'Hide'; } else { art.plugins.artplayerPluginDanmuku.hide(); event.target.innerText = 'Show'; } }, }, ], }); Copy "},{"title":"emit​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#emit","content":"Type: Function Send a real-time danmu by method 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: 'Send', click: function () { var text = prompt('Input the danmu text', 'danmu text'); if (!text || !text.trim()) return; var color = '#' + Math.floor(Math.random() * 0xffffff).toString(16); art.plugins.artplayerPluginDanmuku.emit({ text: text, color: color, border: true, }); }, }, ], }); Copy "},{"title":"config​","type":1,"pageTitle":"Danmuku plugin","url":"en/Plugins/danmuku#config","content":"Type: Function Changing the danmu configuration in real time through method config, support attributes: speed, maxlength, margin, opacity, fontSize, synchronousPlayback ▶ 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: 'Size：<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), }); }); }, }, ], }); Copy "},{"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; }, }, ], }); Copy "},{"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; }, }, ], }); Copy "},{"title":"How to import types","type":0,"sectionRef":"#","url":"en/Questions/How to import types","content":"How to import types Sometimes you lose TypeScript syntax prompt, then you can import types manually /** * @typedef { import("artplayer/types/artplayer") } Artplayer */ /** * @type {Artplayer} - An Artplayer instance. */ const art1 = {}; /** * @param {Artplayer} art2 - An Artplayer instance. */ function getInstance(art2) { // } Copy","keywords":""},{"title":"How to add video ads","type":0,"sectionRef":"#","url":"en/Questions/How to add video ads","content":"How to add video ads Video ads play before main video playback, support multiple video ads ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: 'https://artplayer.org/assets/sample/video.mp4', muted: true, autoSize: true, autoplay: true, ads: [ { url: '/assets/sample/test1.mp4' }, { url: '/assets/sample/test2.webm' }, ], controls: [ { position: 'right', html: 'Skip The Ads', click: function () { // Skip The Ads art.ads.end(); }, }, ], layers: [ { html: 'Skip The Ads', style: { position: 'absolute', top: '20px', right: '20px', }, click: function () { // Skip The Ads art.ads.end(); }, }, ], }); art.on('ready', function () { // Triggers when each video advertisement is played art.on('ads:start', (item) => { console.info('Ads is playing: ' + item.url); }); // Triggers when all video advertisements are end art.on('ads:end', () => { console.info('Ads is end'); }); // Current advertising index console.info(art.ads.index); // Whether all the advertisements are ended console.info(art.ads.isEnd); // Whether the advertisement is playing console.info(art.ads.playing); // The object of the prev advertisement console.info(art.ads.prev); // The object of the current advertisement console.info(art.ads.current); // The object of the next advertisement console.info(art.ads.next); }); Copy","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); Copy","keywords":""},{"title":"Third party librarys","type":0,"sectionRef":"#","url":"libraries","content":"","keywords":""},{"title":"flv.js​","type":1,"pageTitle":"Third party librarys","url":"libraries#flvjs","content":"Homepage: https://github.com/Bilibili/flv.js ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: '/assets/sample/video.flv', customType: { flv: function (video, url) { const flvPlayer = flvjs.createPlayer({ type: 'flv', url: url, }); flvPlayer.attachMediaElement(video); flvPlayer.load(); }, }, }); Copy "},{"title":"hls.js​","type":1,"pageTitle":"Third party librarys","url":"libraries#hlsjs","content":"Homepage: https://github.com/video-dev/hls.js ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', customType: { m3u8: function (video, url) { var hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); }, }, }); Copy "},{"title":"dash.js​","type":1,"pageTitle":"Third party librarys","url":"libraries#dashjs","content":"Homepage: https://github.com/Dash-Industry-Forum/dash.js ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: 'https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd', customType: { mpd: function (video, url) { var player = dashjs.MediaPlayer().create(); player.initialize(video, url, true); }, }, }); Copy "},{"title":"shaka-player​","type":1,"pageTitle":"Third party librarys","url":"libraries#shaka-player","content":"Homepage: https://github.com/google/shaka-player ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: '//storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd', customType: { mpd: function (video, url) { shaka.polyfill.installAll(); var player = new shaka.Player(video); player.load(url); }, }, }); Copy "},{"title":"webtorrent​","type":1,"pageTitle":"Third party librarys","url":"libraries#webtorrent","content":"Homepage: https://github.com/webtorrent/webtorrent ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', autoplay: true, url: 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&tr=wss%3A%2F%2Ftracker.webtorrent.io&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fsintel-1024-surround.mp4', type: 'torrent', customType: { torrent: function (video, url, art) { var client = new WebTorrent(); art.loading.show = true; client.add(url, function (torrent) { var file = torrent.files[0]; file.renderTo(video, { autoplay: true, }); }); }, }, }); art.on('ready', () => { art.template.$video.controls = false; }); Copy "},{"title":"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":"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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 clean\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.clean(); Copy "},{"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')); }); Copy "},{"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', }, }); Copy "},{"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); }); Copy "},{"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', bilingual: true, style: { color: '#03A9F4', 'font-size': '30px', }, }, }); art.on('ready', () => { art.seek = 20; setTimeout(() => { art.subtitle.style({ color: 'red', 'font-size': '40px', }); }, 3000); }); Copy "},{"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', bilingual: true, 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); }); Copy "},{"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', bilingual: true, 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', bilingual: false, style: { color: 'green', 'font-size': '24px', }, }); }, 3000); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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'; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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'); }); }); Copy 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); }); Copy "},{"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()); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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; }); Copy 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; }); Copy "},{"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(); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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'; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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(); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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; }); Copy "},{"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; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy 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(); }) }); Copy "},{"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)); }); Copy "},{"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)); }); Copy "},{"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); }); Copy 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); }); Copy "},{"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); }); Copy 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); }); Copy "},{"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; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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)); }); Copy 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); }); Copy "},{"title":"rotate​","type":1,"pageTitle":"Common properties","url":"propertie#rotate","content":"Type: Setter/GetterParameter: Number Set and get player rotation, support -270, -180, -90, 0, 90, 180, 270 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, }); art.on('ready', () => { console.info(art.rotate); art.rotate = 90; console.info(art.rotate); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy 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); }); Copy "},{"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')); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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(); }); Copy "},{"title":"快速上手","type":0,"sectionRef":"#","url":"zh-cn","content":"","keywords":""},{"title":"安装​","type":1,"pageTitle":"快速上手","url":"zh-cn#安装","content":""},{"title":"通过 npm 安装：​","type":1,"pageTitle":"快速上手","url":"zh-cn#通过-npm-安装","content":"$ npm install artplayer Copy "},{"title":"通过 yarn 安装：​","type":1,"pageTitle":"快速上手","url":"zh-cn#通过-yarn-安装","content":"$ yarn add artplayer Copy 然后加载 artplayer 模块： // ES6 import Artplayer from 'artplayer'; // CommonJS const Artplayer = require('artplayer'); Copy "},{"title":"通过 script 安装：​","type":1,"pageTitle":"快速上手","url":"zh-cn#通过-script-安装","content":"<!-- locally --> <script src="path/to/artplayer.js"></script> <!-- jsdelivr --> <script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script> <!-- unpkg --> <script src="https://unpkg.com/artplayer/dist/artplayer.js"></script> Copy 然后你可以通过 window.Artplayer 访问到构造函数 "},{"title":"使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#使用","content":"提示 播放器的尺寸依赖于容器 container 的尺寸，所以你的容器 container 必须是有尺寸的 "},{"title":"在 Html 使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#在-html-使用","content":"<!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> Copy "},{"title":"与 Vue 使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#与-vue-使用","content":"👉 点击打开在线演示 <template> <Artplayer @get-instance="getInstance" :option="option" :style="style" /> </template> <script> import Artplayer from "artplayer/examples/vue/Artplayer"; export default { data() { return { option: { url: "https://artplayer.org/assets/sample/video.mp4", }, style: { width: "600px", height: "400px", margin: "60px auto 0", }, }; }, components: { Artplayer, }, methods: { getInstance(art) { console.log(art); }, }, }; </script> Copy "},{"title":"与 React 使用​","type":1,"pageTitle":"快速上手","url":"zh-cn#与-react-使用","content":"👉 点击打开在线演示 import React from "react"; import ReactDOM from "react-dom"; import Artplayer from "artplayer/examples/react/Artplayer"; function App() { return ( <div> <Artplayer option={{ url: "https://artplayer.org/assets/sample/video.mp4" }} style={{ width: "600px", height: "400px", margin: "60px auto 0" }} getInstance={(art) => console.log(art)} /> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); Copy 提示 在 Vue 和 React 里修改 option 不能动态修改 Artplayer 实例 "},{"title":"演示​","type":1,"pageTitle":"快速上手","url":"zh-cn#演示","content":"提示 本文档里，通过点击代码块前的 Run Code 按钮，可以马上进入演示  ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', }); Copy "},{"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', }); Copy You may need to initialize the size of the container element, such as: .artplayer-app { width: 400px; height: 300px; } Copy "},{"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', }); Copy "},{"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', }); Copy "},{"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, }); Copy "},{"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', }); Copy "},{"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, }); Copy 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, }); Copy "},{"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, }); Copy "},{"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, }); Copy 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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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', }, }); Copy 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, }); Copy "},{"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, }); Copy 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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy 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":"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'); }, }, ], }); Copy "},{"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); } }, ], }); Copy "},{"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; }); Copy "},{"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'); }, }, ], }); Copy "},{"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', }, ], }); Copy "},{"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: '－－终わり－－', }, ], }); Copy "},{"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()); }); Copy "},{"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: ['iPhone OS 11'], // whitelist: ['*'], // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)], // whitelist: [/iPhone OS 11/gi] }); Copy 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 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', thumbnails: { url: '/assets/sample/thumbnails.png', number: 100, column: 10, }, }); Copy "},{"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 bilingual\tBoolean\tWhether the double subtitle style is divided by a wrap ▶ 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', bilingual: true, style: { color: '#03A9F4', 'font-size': '30px', }, }, }); Copy "},{"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, }, }); Copy "},{"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: '', volume: '', volumeClose: '', subtitle: '', screenshot: '', setting: '', fullscreen: '', fullscreenWeb: '', pip: '', indicator: '', }, }); Copy "},{"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', }); Copy "},{"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 }, }, }); Copy "},{"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 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'en', }); Copy "},{"title":"第三方库","type":0,"sectionRef":"#","url":"zh-cn/libraries","content":"","keywords":""},{"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) { const flvPlayer = flvjs.createPlayer({ type: 'flv', url: url, }); flvPlayer.attachMediaElement(video); flvPlayer.load(); }, }, }); Copy "},{"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) { var hls = new Hls(); hls.loadSource(url); hls.attachMedia(video); }, }, }); Copy "},{"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); }, }, }); Copy "},{"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); }, }, }); Copy "},{"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; }); Copy "},{"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.length) }) Copy "},{"title":"version​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#version","content":"类型: String 当前播放器版本号 ▶ Run Code console.info(Artplayer.version) Copy "},{"title":"env​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#env","content":"类型: String 当前播放器环境变量 ▶ Run Code console.info(Artplayer.env) Copy "},{"title":"utils​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#utils","content":"类型: Object 播放器的常用工具集 ▶ Run Code console.info(Object.keys(Artplayer.utils)) Copy "},{"title":"config​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#config","content":"类型: Object 存放了视频的原生属性和方法 ▶ Run Code console.info(Artplayer.config) Copy "},{"title":"scheme​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#scheme","content":"类型: Object 播放器参数的校验方案 ▶ Run Code console.info(Artplayer.scheme) Copy "},{"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) Copy "},{"title":"html​","type":1,"pageTitle":"静态属性","url":"zh-cn/class#html","content":"类型: String 播放器默认 Html 字符串，通常用于 SSR 的提前渲染 ▶ Run Code console.info(Artplayer.html) Copy "},{"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([])) Copy "},{"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 Copy "},{"title":"通过 yarn 安装：​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#通过-yarn-安装","content":"$ yarn add artplayer-plugin-danmuku Copy import artplayerPluginDanmuku from 'artplayer-plugin-danmuku'; Copy "},{"title":"通过 script 安装：​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#通过-script-安装","content":"<script src="path/to/artplayer-plugin-danmuku.js"></script> Copy 然后你可以通过 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, // 全局持续时间 opacity: 1, // 全局透明度 color: '#fff', // 全局字体颜色 size: 25, // 全局字体大小 maxlength: 50, // 全局最大长度 margin: [10, 20], // 距离顶部和距离底部的高度值 synchronousPlayback: false, // 是否同步到播放速度 }), ], }); Copy "},{"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', }), ], }); Copy "},{"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, }, ]); }); }, }), ], }); Copy "},{"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(); }, }, ], }); Copy "},{"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 = '显示弹幕'; } }, }, ], }); Copy "},{"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, }); }, }, ], }); Copy "},{"title":"config​","type":1,"pageTitle":"弹幕库插件","url":"zh-cn/Plugins/danmuku#config","content":"类型: Function 通过方法 config 实时改变弹幕配置，支持属性有：speed、maxlength、margin、opacity、fontSize、synchronousPlayback ▶ 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), }); }); }, }, ], }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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; }); Copy 提示 设置 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; }); Copy "},{"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(); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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'; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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":"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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删除值 clean\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.clean(); Copy "},{"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')); }); Copy "},{"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', }, }); Copy "},{"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); }); Copy "},{"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', bilingual: true, style: { color: '#03A9F4', 'font-size': '30px', }, }, }); art.on('ready', () => { art.seek = 20; setTimeout(() => { art.subtitle.style({ color: 'red', 'font-size': '40px', }); }, 3000); }); Copy "},{"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', bilingual: true, 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); }); Copy "},{"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', bilingual: true, 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', bilingual: false, style: { color: 'green', 'font-size': '24px', }, }); }, 3000); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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'; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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 键'); }); }); Copy 提示 只在播放器获得焦点后（如点击了播放器后），该快捷键才会生效 "},{"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); }); Copy "},{"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()); }); Copy "},{"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; }, }, ], }); Copy","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', }); Copy 您可能需要初始化容器元素的大小，如: .artplayer-app { width: 400px; height: 300px; } Copy "},{"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', }); Copy "},{"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', }); Copy "},{"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, }); Copy "},{"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', }); Copy "},{"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, }); Copy 提示 播放器会缓存最后一次音量的大小，下次初始化时（如刷新页面）播放器会读取该缓存值 "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy 提示 假如希望默认进入页面就能自动播放视频，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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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', }, }); Copy 提示 由于浏览器安全机制，假如视频源地址和网站是跨域的，可能会出现截图失败 "},{"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, }); Copy "},{"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, }); Copy 热键\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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy "},{"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, }); Copy 提示 SSR 是 Server Side Render 简称，页面上的内容是通过服务端渲染生成的，浏览器直接显示服务端返回的 HTML 就可以了。 "},{"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('组件挂载完成'); }, }, ], }); Copy "},{"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); } }, ], }); Copy "},{"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; }); Copy "},{"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'); }, }, ], }); Copy "},{"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', }, ], }); Copy "},{"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: '－－终わり－－', }, ], }); Copy "},{"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()); }); Copy "},{"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: ['iPhone OS 11'], // whitelist: ['*'], // whitelist: [(ua) => /iPhone OS 11/gi.test(ua)], // whitelist: [/iPhone OS 11/gi], }); Copy 提示 假如希望全部类型的移动设备都启用播放器，设置 whitelist 为通配符 ['*'] 即可 "},{"title":"thumbnails​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#thumbnails","content":"类型: Object默认: {} 在进度条上设置预览图 属性\t类型\t描述url\tString\t预览图地址 number\tNumber\t预览图数量 column\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, }, }); Copy "},{"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 bilingual\tBoolean\t是否双字幕样式，通过换行区分 ▶ 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', bilingual: true, style: { color: '#03A9F4', 'font-size': '30px', }, }, }); Copy "},{"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, }, }); Copy "},{"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: '', volume: '', volumeClose: '', subtitle: '', screenshot: '', setting: '', fullscreen: '', fullscreenWeb: '', pip: '', indicator: '', }, }); Copy "},{"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', }); Copy "},{"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: 当前实例 }, }, }); Copy "},{"title":"lang​","type":1,"pageTitle":"基础参数","url":"zh-cn/options#lang","content":"类型: String默认: navigator.language.toLowerCase() 默认显示语言，目前支持：en、zh-cn、zh-tw ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', lang: 'en', }); Copy "},{"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']; }); Copy 提示 注意，你不能创建存在相同名字的组件","keywords":""},{"title":"怎么添加设置面板","type":0,"sectionRef":"#","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) { console.info(item, $dom); 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) { console.info(item, $dom); 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', }, ], }, ], }, ], }); Copy","keywords":""},{"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) { // } Copy","keywords":""},{"title":"如何添加视频广告","type":0,"sectionRef":"#","url":"zh-cn/Questions/How to add video ads","content":"如何添加视频广告 视频广告存在于正式视频播放之前，支持多个视频广告 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: 'https://artplayer.org/assets/sample/video.mp4', muted: true, autoSize: true, autoplay: true, ads: [ { url: '/assets/sample/test1.mp4', }, { url: '/assets/sample/test2.webm', }, ], controls: [ { position: 'right', html: '跳过广告', click: function () { art.ads.end(); }, }, ], layers: [ { html: '跳过广告', style: { position: 'absolute', top: '20px', right: '20px', }, click: function () { art.ads.end(); }, }, ], }); art.on('ready', function () { // 当每个视频广告播放时触发 art.on('ads:start', function (item) { console.info('广告开始播放: ' + item.url); }); // 当全部视频广告播放完成 art.on('ads:end', function () { console.info('广告已经结束'); }); // 当前广告的下标 console.info(art.ads.index); // 广告是否已经结束 console.info(art.ads.isEnd); // 广告是否正在播放 console.info(art.ads.playing); // 上一个广告的对象 console.info(art.ads.prev); // 当前广告的对象 console.info(art.ads.current); // 下一个广告的对象 console.info(art.ads.next); }); Copy","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); Copy","keywords":""},{"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; }, }, ], }); Copy "},{"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; }, }, ], }); Copy "},{"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(); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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; }); Copy "},{"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; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"title":"switchQuality​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#switchquality","content":"类型: Function参数: String 设置视频画质地址，和 switchQuality 类似，但会带上之前的播放进度 函数支持两个参数，第一个为新的视频地址，第二个为新的视频名字 ▶ 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); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy 提示 有的视频是没有时长的，例如直播中的视频或者没被解码完成的视频，这个时候获取的时长会是 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(); }) }); Copy "},{"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)); }); Copy "},{"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)); }); Copy "},{"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); }); Copy 提示 由于浏览器安全机制，触发窗口全屏前，页面必须先存在交互（例如用户点击过页面） "},{"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); }); Copy "},{"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); }); Copy 提示 由于浏览器安全机制，触发画中画前，页面必须先存在交互（例如用户点击过页面） "},{"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); }); Copy "},{"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; }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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)); }); Copy 提示 尺寸和坐标信息是通过 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); }); Copy "},{"title":"rotate​","type":1,"pageTitle":"常用属性","url":"zh-cn/propertie#rotate","content":"类型: Setter/Getter参数: Number 设置和获取播放器旋转，支持 -270、-180、-90、0、90、180、270 ▶ Run Code var art = new Artplayer({ container: '.artplayer-app', url: '/assets/sample/video.mp4', autoSize: true, }); art.on('ready', () => { console.info(art.rotate); art.rotate = 90; console.info(art.rotate); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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); }); Copy 提示 删除区间循环播放，只需要设置 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); }); Copy "},{"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')); }); Copy "},{"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); }); Copy "},{"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); }); Copy "},{"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(); }); Copy "}]