"use strict";(self.webpackChunkartplayer_document=self.webpackChunkartplayer_document||[]).push([[14],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},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 o(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 i(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 d=a.createContext({}),s=function(e){var t=a.useContext(d),n=t;return e&&(n="function"==typeof e?e(t):o(o({},t),e)),n},p=function(e){var t=s(e.components);return a.createElement(d.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,d=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),m=s(n),c=r,v=m["".concat(d,".").concat(c)]||m[c]||u[c]||l;return n?a.createElement(v,o(o({ref:t},p),{},{components:n})):a.createElement(v,o({ref:t},p))}));function c(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var l=n.length,o=new Array(l);o[0]=m;var i={};for(var d in t)hasOwnProperty.call(t,d)&&(i[d]=t[d]);i.originalType=e,i.mdxType="string"==typeof e?e:r,o[1]=i;for(var s=2;s<l;s++)o[s]=n[s];return a.createElement.apply(null,o)}return a.createElement.apply(null,n)}m.displayName="MDXCreateElement"},7733:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return i},contentTitle:function(){return d},metadata:function(){return s},toc:function(){return p},default:function(){return m}});var a=n(7462),r=n(3366),l=(n(7294),n(3905)),o=["components"],i={title:"Common events",sidebar_position:6,slug:"/events"},d=void 0,s={unversionedId:"en/Events",id:"en/Events",isDocsHomePage:!1,title:"Common events",description:"The event of the player is divided into two, a native event of a video, and another is a custom event. The native event comes from Video Elements, is the original event of the Video Element, in order to distinguish it and custom events, the native event adds a prefix video:",source:"@site/docs/en/Events.mdx",sourceDirName:"en",slug:"/events",permalink:"/document/events",tags:[],version:"current",sidebarPosition:6,frontMatter:{title:"Common events",sidebar_position:6,slug:"/events"},sidebar:"en",previous:{title:"Static propertys",permalink:"/document/class"},next:{title:"Third party librarys",permalink:"/document/libraries"}},p=[{value:"Native event",id:"native-event",children:[],level:2},{value:"Custom event",id:"custom-event",children:[{value:"ready",id:"ready",children:[],level:3},{value:"play",id:"play",children:[],level:3},{value:"pause",id:"pause",children:[],level:3},{value:"seek",id:"seek",children:[],level:3},{value:"volume",id:"volume",children:[],level:3},{value:"destroy",id:"destroy",children:[],level:3},{value:"focus",id:"focus",children:[],level:3},{value:"blur",id:"blur",children:[],level:3},{value:"hover",id:"hover",children:[],level:3},{value:"resize",id:"resize",children:[],level:3},{value:"mousemove",id:"mousemove",children:[],level:3},{value:"url",id:"url",children:[],level:3},{value:"fullscreen",id:"fullscreen",children:[],level:3},{value:"fullscreenWeb",id:"fullscreenweb",children:[],level:3},{value:"hotkey",id:"hotkey",children:[],level:3}],level:2}],u={toc:p};function m(e){var t=e.components,n=(0,r.Z)(e,o);return(0,l.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"The event of the player is divided into two, a ",(0,l.kt)("inlineCode",{parentName:"p"},"native event")," of a video, and another is a ",(0,l.kt)("inlineCode",{parentName:"p"},"custom event"),". The ",(0,l.kt)("inlineCode",{parentName:"p"},"native event")," comes from ",(0,l.kt)("inlineCode",{parentName:"p"},"Video Elements"),", is the original event of the ",(0,l.kt)("inlineCode",{parentName:"p"},"Video Element"),", in order to distinguish it and ",(0,l.kt)("inlineCode",{parentName:"p"},"custom events"),", the native event adds a prefix ",(0,l.kt)("inlineCode",{parentName:"p"},"video:")),(0,l.kt)("h2",{id:"native-event"},"Native event"),(0,l.kt)("p",null,"For more information, please read ",(0,l.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events"},"Mozilla Video Events")),(0,l.kt)("table",null,(0,l.kt)("thead",{parentName:"table"},(0,l.kt)("tr",{parentName:"thead"},(0,l.kt)("th",{parentName:"tr",align:null},"Event name"),(0,l.kt)("th",{parentName:"tr",align:null},"Fired When"))),(0,l.kt)("tbody",{parentName:"table"},(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:canplay")),(0,l.kt)("td",{parentName:"tr",align:null},"The 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.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:canplaythrough")),(0,l.kt)("td",{parentName:"tr",align:null},"The browser estimates it can play the media up to its end without stopping for content buffering.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:complete")),(0,l.kt)("td",{parentName:"tr",align:null},"The rendering of an OfflineAudioContext is terminated.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:durationchange")),(0,l.kt)("td",{parentName:"tr",align:null},"The duration attribute has been updated.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:emptied")),(0,l.kt)("td",{parentName:"tr",align:null},"The 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.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:ended")),(0,l.kt)("td",{parentName:"tr",align:null},"Playback has stopped because the end of the media was reached.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:loadeddata")),(0,l.kt)("td",{parentName:"tr",align:null},"The first frame of the media has finished loading.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:loadedmetadata")),(0,l.kt)("td",{parentName:"tr",align:null},"The metadata has been loaded.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:pause")),(0,l.kt)("td",{parentName:"tr",align:null},"Playback has been paused.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:play")),(0,l.kt)("td",{parentName:"tr",align:null},"Playback has begun.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:playing")),(0,l.kt)("td",{parentName:"tr",align:null},"Playback is ready to start after having been paused or delayed due to lack of data.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:progress")),(0,l.kt)("td",{parentName:"tr",align:null},"Fired periodically as the browser loads a resource.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:ratechange")),(0,l.kt)("td",{parentName:"tr",align:null},"The playback rate has changed.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:seeked")),(0,l.kt)("td",{parentName:"tr",align:null},"A seek operation completed.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:seeking")),(0,l.kt)("td",{parentName:"tr",align:null},"A seek operation began.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:stalled")),(0,l.kt)("td",{parentName:"tr",align:null},"The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:suspend")),(0,l.kt)("td",{parentName:"tr",align:null},"Media data loading has been suspended.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:timeupdate")),(0,l.kt)("td",{parentName:"tr",align:null},"The time indicated by the currentTime attribute has been updated.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:volumechange")),(0,l.kt)("td",{parentName:"tr",align:null},"The volume has changed.")),(0,l.kt)("tr",{parentName:"tbody"},(0,l.kt)("td",{parentName:"tr",align:null},(0,l.kt)("inlineCode",{parentName:"td"},"video:waiting")),(0,l.kt)("td",{parentName:"tr",align:null},"Playback has stopped because of a temporary lack of data")))),(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('video:play', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h2",{id:"custom-event"},"Custom event"),(0,l.kt)("h3",{id:"ready"},"ready"),(0,l.kt)("p",null,"Fired when the player is initialized, and the video can be 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});\n\nart.on('ready', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"play"},"play"),(0,l.kt)("p",null,"Fired after 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});\n\nart.on('play', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"pause"},"pause"),(0,l.kt)("p",null,"Fired after the video is 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});\n\nart.on('pause', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"seek"},"seek"),(0,l.kt)("p",null,"Fired when the video is time jump"),(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('seek', (...args) => {\n    console.info(args);\n});\n\nart.on('ready', (...args) => {\n    art.seek = 5;\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"},"Set the ",(0,l.kt)("inlineCode",{parentName:"p"},"art.currentTime")," will not fired the ",(0,l.kt)("inlineCode",{parentName:"p"},"seek")," event"))),(0,l.kt)("h3",{id:"volume"},"volume"),(0,l.kt)("p",null,"Fired when the video volume changes"),(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('volume', (...args) => {\n    console.info(args);\n});\n\nart.on('ready', (...args) => {\n    art.volume = 0.5;\n});\n")),(0,l.kt)("h3",{id:"destroy"},"destroy"),(0,l.kt)("p",null,"Fired when the player instance is destroyed"),(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('destroy', (...args) => {\n    console.info(args);\n});\n\nart.on('ready', (...args) => {\n    art.destroy();\n});\n")),(0,l.kt)("h3",{id:"focus"},"focus"),(0,l.kt)("p",null,"Fired when the player gets focus, if you click on 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('focus', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"blur"},"blur"),(0,l.kt)("p",null,"Fired when the player loses focus, such as the area other than 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('blur', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"hover"},"hover"),(0,l.kt)("p",null,"Fired when mouse moves 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('hover', (state) => {\n    // state for true, the mouse moves from the outside to the player\n    // state for false, the mouse moves from the player to the outside\n    console.info(state);\n});\n")),(0,l.kt)("h3",{id:"resize"},"resize"),(0,l.kt)("p",null,"Fired when the player is changed"),(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('resize', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"mousemove"},"mousemove"),(0,l.kt)("p",null,"Fired when the mouse is played, this and ",(0,l.kt)("inlineCode",{parentName:"p"},"hover")," is different, it will trigger multiple times"),(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('mousemove', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"url"},"url"),(0,l.kt)("p",null,"Fired when the video url changes"),(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('url', (...args) => {\n    console.info(args);\n});\n\nart.on('ready', (...args) => {\n    art.url = '/assets/sample/video.mp4?t=0';\n});\n")),(0,l.kt)("h3",{id:"fullscreen"},"fullscreen"),(0,l.kt)("p",null,"Fired when the player window is 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('fullscreen', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"fullscreenweb"},"fullscreenWeb"),(0,l.kt)("p",null,"Fired when player webpage 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('fullscreenWeb', (...args) => {\n    console.info(args);\n});\n")),(0,l.kt)("h3",{id:"hotkey"},"hotkey"),(0,l.kt)("p",null,"Trigger when hotkey are used"),(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('hotkey', (...args) => {\n    console.info(args);\n});\n")))}m.isMDXComponent=!0}}]);