x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-10 21:06:15 -08:00
Code Issues Packages Projects Releases Wiki Activity
Files
c2ea7d0ce05ceef66ceeedcbdf9ece35c91fa344
ArtPlayer/docs/document/assets/js/0fa62a73.cffa69c2.js
T
Harvey 6c2c2529ce update
2022-02-11 11:20:54 +08:00

1 line
34 KiB
JavaScript
Raw Blame History

"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[941],{3905:function(e,t,n){n.d(t,{Zo:function(){return d},kt:function(){return c}});var a=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function l(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?l(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):l(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function o(e,t){if(null==e)return{};var n,a,r=function(e,t){if(null==e)return{};var n,a,r={},l=Object.keys(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)n=l[a],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var p=a.createContext({}),s=function(e){var t=a.useContext(p),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=s(e.components);return a.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},m=a.forwardRef((function(e,t){var n=e.components,r=e.mdxType,l=e.originalType,p=e.parentName,d=o(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,k=m["".concat(p,".").concat(c)]||m[c]||u[c]||l;return n?a.createElement(k,i(i({ref:t},d),{},{components:n})):a.createElement(k,i({ref:t},d))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,i=new Array(l);i[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,i[1]=o;for(var s=2;s<l;s++)i[s]=n[s];return a.createElement.apply(null,i)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7498:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return s},toc:function(){return d},default:function(){return m}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),i=["components"],o={title:"Common properties",sidebar_position:3,slug:"/propertie"},p=void 0,s={unversionedId:"en/Properties",id:"en/Properties",isDocsHomePage:!1,title:"Common properties",description:"play",source:"@site/docs/en/Properties.md",sourceDirName:"en",slug:"/propertie",permalink:"/document/propertie",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Common properties",sidebar_position:3,slug:"/propertie"},sidebar:"en",previous:{title:"Basic options",permalink:"/document/options"},next:{title:"Advanced propertys",permalink:"/document/advance"}},d=[{value:"play",id:"play",children:[],level:2},{value:"pause",id:"pause",children:[],level:2},{value:"toggle",id:"toggle",children:[],level:2},{value:"seek",id:"seek",children:[],level:2},{value:"forward",id:"forward",children:[],level:2},{value:"backward",id:"backward",children:[],level:2},{value:"volume",id:"volume",children:[],level:2},{value:"url",id:"url",children:[],level:2},{value:"switchUrl",id:"switchurl",children:[],level:2},{value:"switchQuality",id:"switchquality",children:[],level:2},{value:"muted",id:"muted",children:[],level:2},{value:"currentTime",id:"currenttime",children:[],level:2},{value:"duration",id:"duration",children:[],level:2},{value:"screenshot",id:"screenshot",children:[],level:2},{value:"getDataURL",id:"getdataurl",children:[],level:2},{value:"getBlobUrl",id:"getbloburl",children:[],level:2},{value:"fullscreen",id:"fullscreen",children:[],level:2},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:2},{value:"pip",id:"pip",children:[],level:2},{value:"poster",id:"poster",children:[],level:2},{value:"mini",id:"mini",children:[],level:2},{value:"playing",id:"playing",children:[],level:2},{value:"autoSize",id:"autosize",children:[],level:2},{value:"rect",id:"rect",children:[],level:2},{value:"flip",id:"flip",children:[],level:2},{value:"rotate",id:"rotate",children:[],level:2},{value:"playbackRate",id:"playbackrate",children:[],level:2},{value:"aspectRatio",id:"aspectratio",children:[],level:2},{value:"loop",id:"loop",children:[],level:2},{value:"autoHeight",id:"autoheight",children:[],level:2},{value:"attr",id:"attr",children:[],level:2},{value:"title",id:"title",children:[],level:2},{value:"theme",id:"theme",children:[],level:2},{value:"destroy",id:"destroy",children:[],level:2}],u={toc:d};function m(e){var t=e.components,n=(0,r.Z)(e,i);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h2",{id:"play"},"play"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Play video"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n art.play();\n});\n")),(0,l.kt)("h2",{id:"pause"},"pause"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Pause video"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n art.play();\n\n setTimeout(() => {\n art.pause();\n }, 3000);\n});\n")),(0,l.kt)("h2",{id:"toggle"},"toggle"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Switch Video playback and pause"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n art.toggle();\n\n setTimeout(() => {\n art.toggle();\n }, 3000);\n});\n")),(0,l.kt)("h2",{id:"seek"},"seek"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Number"))),(0,l.kt)("p",null,"Video time jump, unit seconds"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 5;\n});\n")),(0,l.kt)("h2",{id:"forward"},"forward"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Number"))),(0,l.kt)("p",null,"Video time forward, unit seconds"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.forward = 5;\n});\n")),(0,l.kt)("h2",{id:"backward"},"backward"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Number"))),(0,l.kt)("p",null,"Video time backward, unit seconds"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 5;\n\n setTimeout(() => {\n art.backward = 2;\n }, 3000);\n});\n")),(0,l.kt)("h2",{id:"volume"},"volume"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Number"))),(0,l.kt)("p",null,"Set and get video volume, range: ",(0,l.kt)("inlineCode",{parentName:"p"},"[0, 1]")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.volume);\n art.volume = 0.5;\n console.info(art.volume);\n});\n")),(0,l.kt)("h2",{id:"url"},"url"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Set and get video url"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.url);\n art.url = '/assets/sample/video.mp4?t=0';\n console.info(art.url);\n});\n")),(0,l.kt)("h2",{id:"switchurl"},"switchUrl"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Set video url, set, like the ",(0,l.kt)("inlineCode",{parentName:"p"},"url"),", but will perform some optimization operations"),(0,l.kt)("p",null,"The function supports two parameters, the first one for the new video url, the second is new video name"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n setTimeout(() => {\n art.switchUrl('/assets/sample/video.mp4?t=0', 'New video name');\n }, 3000);\n});\n")),(0,l.kt)("h2",{id:"switchquality"},"switchQuality"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Set the video quality address, like the ",(0,l.kt)("inlineCode",{parentName:"p"},"switchUrl"),", but will bring the previous play progress"),(0,l.kt)("p",null,"The function supports two parameters, the first one for the new video url, the second is new video name"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n setTimeout(() => {\n art.switchQuality('/assets/sample/video.mp4?t=0', 'New video name');\n }, 3000);\n});\n")),(0,l.kt)("h2",{id:"muted"},"muted"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Setting up and getting the video mute"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.muted);\n art.muted = true;\n console.info(art.muted);\n});\n")),(0,l.kt)("h2",{id:"currenttime"},"currentTime"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Number"))),(0,l.kt)("p",null,"Set and get the video current time, set time like the ",(0,l.kt)("inlineCode",{parentName:"p"},"seek"),", but it does not trigger additional events"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.currentTime);\n art.currentTime = 5;\n console.info(art.currentTime);\n});\n")),(0,l.kt)("h2",{id:"duration"},"duration"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Getter"))),(0,l.kt)("p",null,"Get video duration"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.duration);\n});\n")),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Tip")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Some videos are there is no duration, such as the live video or video is not decoded, the duration will be ",(0,l.kt)("inlineCode",{parentName:"p"},"0")))),(0,l.kt)("h2",{id:"screenshot"},"screenshot"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Download the current video frame screenshot"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n art.once('video:canplay', () => {\n art.screenshot();\n })\n});\n")),(0,l.kt)("h2",{id:"getdataurl"},"getDataURL"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Get the ",(0,l.kt)("inlineCode",{parentName:"p"},"base64")," url of the current video frame, return to a ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n art.getDataURL().then((url) => console.info(url));\n});\n")),(0,l.kt)("h2",{id:"getbloburl"},"getBlobUrl"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function"))),(0,l.kt)("p",null,"Get the ",(0,l.kt)("inlineCode",{parentName:"p"},"blob")," url of the current video frame, return to a ",(0,l.kt)("inlineCode",{parentName:"p"},"Promise")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.seek = 10;\n art.getBlobUrl().then((url) => console.info(url));\n});\n")),(0,l.kt)("h2",{id:"fullscreen"},"fullscreen"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Set and get a player window full screen"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreen: true,\n});\n\nart.on('ready', () => {\n art.fullscreen = true;\n\n setTimeout(() => {\n art.fullscreen = false;\n }, 3000);\n});\n")),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Tip")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Due to the browser security mechanism, the page must be exchanged before the window full screen, such as the user click on the page)"))),(0,l.kt)("h2",{id:"fullscreenweb"},"fullscreenWeb"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Setting up and get a player web page full screen"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreenWeb: true,\n});\n\nart.on('ready', () => {\n art.fullscreenWeb = true;\n\n setTimeout(() => {\n art.fullscreenWeb = false;\n }, 3000);\n});\n")),(0,l.kt)("h2",{id:"pip"},"pip"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Set and get player PIP Mode"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n fullscreenWeb: true,\n});\n\nart.on('ready', () => {\n art.pip = true;\n\n setTimeout(() => {\n art.pip = false;\n }, 3000);\n});\n")),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Tip")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Due to the browser security mechanism, the page must be exchanged first before the ",(0,l.kt)("inlineCode",{parentName:"p"},"PIP")," (such as user clicking over the page)"))),(0,l.kt)("h2",{id:"poster"},"poster"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Setting up and get a video poster, only the poster effect can only be seen before the video is played"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n poster: '/assets/sample/poster.jpg',\n});\n\nart.on('ready', () => {\n console.info(art.poster);\n art.poster = '/assets/sample/poster.jpg?t=0';\n console.info(art.poster);\n});\n")),(0,l.kt)("h2",{id:"mini"},"mini"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Set and get player mini mode"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.mini = true;\n});\n")),(0,l.kt)("h2",{id:"playing"},"playing"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Get the video is playing"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n muted: true,\n});\n\nart.on('ready', () => {\n console.info(art.playing);\n art.play();\n console.info(art.playing);\n});\n")),(0,l.kt)("h2",{id:"autosize"},"autoSize"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Set whether the video is adaptive, set to ",(0,l.kt)("inlineCode",{parentName:"p"},"true"),", it will only execute once"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.autoSize);\n art.autoSize = true;\n console.info(art.autoSize);\n});\n")),(0,l.kt)("h2",{id:"rect"},"rect"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Getter"))),(0,l.kt)("p",null,"Get the size and coordinate information of the player"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(JSON.stringify(art.rect));\n});\n")),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Tip")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Size and coordinate information is obtained by ",(0,l.kt)("inlineCode",{parentName:"p"},"getBoundingClientRect")))),(0,l.kt)("h2",{id:"flip"},"flip"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Set and get player flip, support ",(0,l.kt)("inlineCode",{parentName:"p"},"normal"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"horizontal"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"vertical")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.flip);\n art.flip = 'horizontal';\n console.info(art.flip);\n});\n")),(0,l.kt)("h2",{id:"rotate"},"rotate"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Number"))),(0,l.kt)("p",null,"Set and get player rotation, support ",(0,l.kt)("inlineCode",{parentName:"p"},"-270"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"-180"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"-90"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"0"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"90"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"180"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"270")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n autoSize: true,\n});\n\nart.on('ready', () => {\n console.info(art.rotate);\n art.rotate = 90;\n console.info(art.rotate);\n});\n")),(0,l.kt)("h2",{id:"playbackrate"},"playbackRate"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Number"))),(0,l.kt)("p",null,"Set and get player playback speed, support ",(0,l.kt)("inlineCode",{parentName:"p"},"0.5"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"0.75"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"1.0"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"1.25"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"1.5"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"1.75"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"2.0")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.playbackRate);\n art.playbackRate = 2;\n console.info(art.playbackRate);\n});\n")),(0,l.kt)("h2",{id:"aspectratio"},"aspectRatio"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Set and get the player long aspect, support ",(0,l.kt)("inlineCode",{parentName:"p"},"default"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"4:3"),", ",(0,l.kt)("inlineCode",{parentName:"p"},"16:9")),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.aspectRatio);\n art.aspectRatio = '16:9';\n console.info(art.aspectRatio);\n});\n")),(0,l.kt)("h2",{id:"loop"},"loop"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Array"))),(0,l.kt)("p",null,"Setting and getting the interval to play in seconds, unit seconds"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.loop);\n art.loop = [5, 10];\n console.info(art.loop);\n});\n")),(0,l.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,l.kt)("div",{parentName:"div",className:"admonition-heading"},(0,l.kt)("h5",{parentName:"div"},(0,l.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,l.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,l.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Tip")),(0,l.kt)("div",{parentName:"div",className:"admonition-content"},(0,l.kt)("p",{parentName:"div"},"Delete interval loop play, only need to set up ",(0,l.kt)("inlineCode",{parentName:"p"},"loop")," is ",(0,l.kt)("inlineCode",{parentName:"p"},"[]")))),(0,l.kt)("h2",{id:"autoheight"},"autoHeight"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Default: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"When the container has only width, you want the container height adapt to the player aspect ratio."),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.autoHeight);\n art.autoHeight = true;\n console.info(art.autoHeight);\n});\n")),(0,l.kt)("h2",{id:"attr"},"attr"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Dynamically get and set the properties of the video element"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.attr('playsInline'));\n art.attr('playsInline', true);\n console.info(art.attr('playsInline'));\n});\n")),(0,l.kt)("h2",{id:"title"},"title"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Dynamic get and set player title"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.title);\n art.title = 'New Title';\n console.info(art.title);\n});\n")),(0,l.kt)("h2",{id:"theme"},"theme"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Setter/Getter")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"String"))),(0,l.kt)("p",null,"Dynamic get and set player theme color"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n console.info(art.theme);\n art.theme = '#000';\n console.info(art.theme);\n});\n")),(0,l.kt)("h2",{id:"destroy"},"destroy"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"Type: ",(0,l.kt)("inlineCode",{parentName:"li"},"Function")),(0,l.kt)("li",{parentName:"ul"},"Parameter: ",(0,l.kt)("inlineCode",{parentName:"li"},"Boolean"))),(0,l.kt)("p",null,"Destroy the player"),(0,l.kt)("div",{className:"run-code"},"\u25b6 Run Code"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},"var art = new Artplayer({\n container: '.artplayer-app',\n url: '/assets/sample/video.mp4',\n});\n\nart.on('ready', () => {\n art.destroy();\n});\n")))}m.isMDXComponent=!0}}]);
Reference in new issue View Git Blame Copy Permalink