1"use strict";(self.webpackChunk_vime_docs=self.webpackChunk_vime_docs||[]).push([[132],{5914:function(e,t,n){var a=n(3810);t.Z=(0,a.ZP)((function(){return Promise.all([n.e(830),n.e(1137)]).then(n.bind(n,2430))}))},1610:function(e,t,n){n.r(t),n.d(t,{default:function(){return h},frontMatter:function(){return c},metadata:function(){return d},toc:function(){return v}});var a=n(7462),i=n(3366),s=(n(7294),n(3905)),o=n(1395),l=n(8215),r=n(5914),p=(0,n(3810).ZP)((function(){return Promise.all([n.e(532),n.e(830),n.e(8779)]).then(n.bind(n,9229))})),m=["components"],c={title:"User Interface",sidebar_label:"UI"},d={unversionedId:"getting-started/ui",id:"getting-started/ui",isDocsHomePage:!1,title:"User Interface",description:"UI components are visually displayed elements inside the media player that may be interactable",source:"@site/docs/getting-started/ui.md",sourceDirName:"getting-started",slug:"/getting-started/ui",permalink:"/getting-started/ui",editUrl:"https://github.com/vime-js/vime/edit/master/docs/docs/getting-started/ui.md",version:"current",sidebar_label:"UI",frontMatter:{title:"User Interface",sidebar_label:"UI"},sidebar:"docs",previous:{title:"Providers",permalink:"/getting-started/providers"},next:{title:"Controls",permalink:"/getting-started/controls"}},v=[],u={toc:v};function h(e){var t=e.components,n=(0,i.Z)(e,m);return(0,s.kt)("wrapper",(0,a.Z)({},u,n,{components:t,mdxType:"MDXLayout"}),(0,s.kt)("p",null,"UI components are visually displayed elements inside the media player that ",(0,s.kt)("em",{parentName:"p"},"may")," be interactable\nsuch as a playback control or slider, or they ",(0,s.kt)("em",{parentName:"p"},"may")," be simple visual feedback such as the length\nof the media (duration). It can be quite time consuming and challenging to setup an entire interface for a\nvideo player, so let's start by using the ",(0,s.kt)("a",{parentName:"p",href:"../components/ui/default-ui"},"default UI")," given to us out\nof the box..."),(0,s.kt)(o.Z,{groupId:"framework",defaultValue:"html",values:[{label:"HTML",value:"html"},{label:"React",value:"react"},{label:"Vue",value:"vue"},{label:"Svelte",value:"svelte"},{label:"Stencil",value:"stencil"},{label:"Angular",value:"angular"}],mdxType:"Tabs"},(0,s.kt)(l.Z,{value:"html",mdxType:"TabItem"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{16-18} title="player.html"',"{16-18}":!0,title:'"player.html"'},'\x3c!-- Notice we turned off controls? We\'re supplying our own, so we hide the native ones. --\x3e\n<vm-player>\n <vm-video\n cross-origin="true"\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </vm-video>\n\n \x3c!-- We\'ve replaced the `<vm-ui>` element. --\x3e\n \x3c!-- We can also turn off any features we don\'t want via properties. --\x3e\n <vm-default-ui no-click-to-play>\n \x3c!-- We can place our own UI components here to extend the default UI. --\x3e\n </vm-default-ui>\n</vm-player>\n'))),(0,s.kt)(l.Z,{value:"react",mdxType:"TabItem"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'{24-26} title="Player.tsx"',"{24-26}":!0,title:'"Player.tsx"'},'import React from \'react\';\nimport { Player, Video, DefaultUi } from \'@vime/react\';\n\nfunction Player() {\n return (\n {/* Notice we turned off controls? We\'re supplying our own, so we hide the native ones. */}\n <Player>\n <Video crossOrigin="" poster="https://files.vidstack.io/agent-327/poster.png">\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srcLang="en"\n label="English"\n />\n </Video>\n\n {/* We\'ve replaced the `<Ui />` component. */}\n {/* We can turn off any features we don\'t want via properties. */}\n <DefaultUi noClickToPlay>
1\n {/* We can place our own UI components here to extend the default UI. */}\n </DefaultUi>\n </Player>\n );\n}\n'))),(0,s.kt)(l.Z,{value:"vue",mdxType:"TabItem"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{17-19} title="Player.vue"',"{17-19}":!0,title:'"Player.vue"'},'<template>\n \x3c!-- Notice we turned off controls? We\'re supplying our own, so we hide the native ones. --\x3e\n <Player>\n <video\n crossorigin=""\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </video>\n\n \x3c!-- We\'ve replaced the `<Ui />` component. --\x3e\n \x3c!-- We can turn off any features we don\'t want via properties. --\x3e\n <DefaultUi noClickToPlay>\n \x3c!-- We can place our own UI components here to extend the default UI. --\x3e\n </DefaultUi>\n </Player>\n</template>\n\n<script>\n import { Player, Video, DefaultUi } from \'@vime/vue\';\n\n export default {\n components: {\n Player,\n Video,\n DefaultUi,\n },\n };\n<\/script>\n'))),(0,s.kt)(l.Z,{value:"svelte",mdxType:"TabItem"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{16-18} title="Player.svelte"',"{16-18}":!0,title:'"Player.svelte"'},'\x3c!-- Notice we turned off controls? We\'re supplying our own, so we hide the native ones. --\x3e\n<Player>\n <video crossorigin="" poster="https://files.vidstack.io/agent-327/poster.png">\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </video>\n\n \x3c!-- We\'ve replaced the `<Ui />` component. --\x3e\n \x3c!-- We can turn off any features we don\'t want via properties. --\x3e\n <DefaultUi noClickToPlay>\n \x3c!-- We can place our own UI components here to extend the default UI. --\x3e\n </DefaultUi>\n</Player>\n\n<script lang="ts">\n import { Player, Video, DefaultUi } from \'@vime/svelte\';\n<\/script>\n'))),(0,s.kt)(l.Z,{value:"stencil",mdxType:"TabItem"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'{24-26} title="player.tsx"',"{24-26}":!0,title:'"player.tsx"'},'class Player {\n // ...\n\n render() {\n return (\n {/* Notice we turned off controls? We\'re supplying our own, so we hide the native ones. */}\n <vm-player>\n <vm-video crossOrigin="" poster="https://files.vidstack.io/agent-327/poster.png">\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </vm-video>\n\n {/* We\'ve replaced the `<vm-ui>` component. */}\n {/* We can turn off any features we don\'t want via properties. */}\n <vm-default-ui noClickToPlay>\n {/* We can place our own UI components here to extend the default UI. */}\n </vm-default-ui>\n </vm-player>\n );\n }\n}\n'))),(0,s.kt)(l.Z,{value:"angular",mdxType:"TabItem"},(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{16-18} title="player.html"',"{16-18}":!0,title:'"player.html"'},'\x3c!-- Notice we turned off controls? We\'re supplying our own, so we hide the native ones. --\x3e\n<vm-player>\n <vm-video\n cross-origin="true"\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </vm-video>\n\n \x3c!-- We\'ve replaced the `<vm-ui>` element. --\x3e\n \x3c!-- We can also turn off any features we don\'t want via properties. --\x3e\n <vm-default-ui no-click-to-play>\n \x3c!-- We can place our own UI components here to extend the default UI. --\x3e\n </vm-default-ui>\n</vm-player>\n')))),(0,s.kt)("p",null,"Glorious! Here's the result so far \ud83e\udd41 ..."),(0,s.kt)(r.Z,{showDefaultUi:!0,defaultUiProps:{noClickToPlay:!0},mdxType:"BasicPlayer"}),(0,s.kt)("br",null),(0,s.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"}
1,(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,s.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,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"Remember to load the default player theme or you might see something you regret \ud83d\ude31"),(0,s.kt)("pre",{parentName:"div"},(0,s.kt)("code",{parentName:"pre",className:"language-html"},'<link\n rel="stylesheet"\n href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css"\n/>\n')))),(0,s.kt)("p",null,"Just like that we've setup an interface for audio/video/live media that looks good on both\nmobile/desktop and is ARIA friendly... not bad \ud83d\ude0e ","\xa0"),(0,s.kt)("p",null,"What if we want to put together our own UI? We can easily achieve this by mixing together predefined\ncomponents by Vime and creating our own. Let's say we only wanted to be able to click the player to toggle\nplayback, and to able to tap the sides to seek forward/backward. If we look through the components\nin the ",(0,s.kt)("inlineCode",{parentName:"p"},"Components > UI")," section in the sidebar (on your left), we see there is a\n",(0,s.kt)("a",{parentName:"p",href:"../components/ui/click-to-play"},(0,s.kt)("inlineCode",{parentName:"a"},"ClickToPlay"))," component which solves our first requirement, but\nnothing seems to match our second requirement. This calls for a custom component, so let's see\nhow we can go about putting this together..."),(0,s.kt)(o.Z,{groupId:"framework",defaultValue:"html",values:[{label:"HTML",value:"html"},{label:"React",value:"react"},{label:"Vue",value:"vue"},{label:"Svelte",value:"svelte"},{label:"Stencil",value:"stencil"},{label:"Angular",value:"angular"}],mdxType:"Tabs"},(0,s.kt)(l.Z,{value:"html",mdxType:"TabItem"},(0,s.kt)("div",{className:"admonition admonition-caution alert alert--warning"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z"}))),"caution")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"The following HTML example is not complete, feel free to contribute by helping us complete it \ud83d\ude42"),(0,s.kt)("p",{parentName:"div"},"Here's some links for you to learn about web components:"),(0,s.kt)("ul",{parentName:"div"},(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://developers.google.com/web/fundamentals/web-components/customelements"},"Google Developers - Web Components")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/en-US/docs/Web/Web_Components"},"MDN - Web Components")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://css-tricks.com/an-introduction-to-web-components/"},"CSS Tricks - Introduction to Web Components")),(0,s.kt)("li",{parentName:"ul"},(0,s.kt)("a",{parentName:"li",href:"https://www.robinwieruch.de/web-components-tutorial"},"Robinwieruch - Web Component Tutorial for Beginners"))))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{13-20}
1 title="player.html"',"{13-20}":!0,title:'"player.html"'},'<vm-player>\n <vm-video\n cross-origin="true"\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </vm-video>\n\n <vm-ui>\n \x3c!-- Vime components. --\x3e\n <vm-click-to-play></vm-click-to-play>\n <vm-spinner></vm-spinner>\n <vm-poster></vm-poster>\n \x3c!-- Custom web component. --\x3e\n <tap-sides-to-seek></tap-sides-to-seek>\n </vm-ui>\n</vm-player>\n'))),(0,s.kt)(l.Z,{value:"react",mdxType:"TabItem"},(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"You can view the custom ",(0,s.kt)("inlineCode",{parentName:"p"},"TapSidesToSeek")," component ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/vime-js/vime/blob/master/examples/react/src/TapSidesToSeek.tsx"},"here"),"."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'{19-26} title="Player.tsx"',"{19-26}":!0,title:'"Player.tsx"'},'import React from \'react\';\nimport { Player, Video, Ui, ClickToPlay, Spinner, Poster } from \'@vime/react\';\nimport TapSidesToSeek from \'./TapSidesToSeek\';\n\nfunction Player() {\n return (\n <Player>\n <Video\n crossOrigin=""\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srcLang="en"\n label="English"\n />\n </Video>\n\n <Ui>\n {/* Vime components. */}\n <ClickToPlay />\n <Spinner />\n <Poster />\n {/* Custom component. */}\n <TapSidesToSeek />\n </Ui>\n </Player>\n );\n}\n'))),(0,s.kt)(l.Z,{value:"vue",mdxType:"TabItem"},(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"You can view the custom ",(0,s.kt)("inlineCode",{parentName:"p"},"TapSidesToSeek")," component ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/vime-js/vime/blob/master/examples/vue/src/TapSidesToSeek.vue"},"here"),"."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{15-22} title="Player.vue"',"{15-22}":!0,title:'"Player.vue"'},'<template>\n \x3c!-- Notice we turned off controls? We\'re supplying our own, so we hide the native ones. --\x3e\n <Player>\n <video\n crossorigin=""\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </video>\n\n <Ui>\n \x3c!-- Vime components. --\x3e\n <ClickToPlay />\n <Spinner />\n <Poster />\n \x3c!-- Custom component. --\x3e\n <TapSidesToSeek />\n </Ui>\n </Player>\n</template>\n\n<script>\n import { Player, Video, Ui, ClickToPlay, Spinner, Poster } from \'@vime/vue\';\n import TapSidesToSeek from \'./TapSidesToSeek.vue\';\n\n export default {\n components: {\n Player,\n Video,\n Ui,\n ClickToPlay,\n Spinner,\n Poster,\n TapSidesToSeek,\n },\n };\n<\/script>\n'))),(0,s.kt)(l.Z,{value:"svelte",mdxType:"TabItem"},(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"}
1,(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"You can view the custom ",(0,s.kt)("inlineCode",{parentName:"p"},"TapSidesToSeek")," component ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/vime-js/vime/blob/master/examples/svelte/src/TapSidesToSeek.svelte"},"here"),"."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{13-20} title="Player.svelte"',"{13-20}":!0,title:'"Player.svelte"'},'<Player>\n <video crossorigin="" poster="https://files.vidstack.io/agent-327/poster.png">\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </video>\n\n <Ui>\n \x3c!-- Vime components. --\x3e\n <ClickToPlay />\n <Spinner />\n <Poster />\n \x3c!-- Custom component. --\x3e\n <TapSidesToSeek />\n </Ui>\n</Player>\n\n<script lang="ts">\n import {\n Player,\n Video,\n Ui,\n ClickToPlay,\n Spinner,\n Poster,\n } from \'@vime/svelte\';\n import TapSidesToSeek from \'./TapSidesToSeek.svelte\';\n<\/script>\n'))),(0,s.kt)(l.Z,{value:"stencil",mdxType:"TabItem"},(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"You can view the custom ",(0,s.kt)("inlineCode",{parentName:"p"},"<tap-sides-to-seek>")," component ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/vime-js/vime/tree/master/examples/stencil/src/components/tap-sides-to-seek"},"here"),"."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-tsx",metastring:'{21-28} title="player.tsx"',"{21-28}":!0,title:'"player.tsx"'},'class Player {\n // ...\n\n render() {\n return (\n <vm-player>\n <vm-video\n crossOrigin=""\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </vm-video>\n\n <vm-ui>\n {/* Vime components. */}\n <vm-click-to-play />\n <vm-spinner />\n <vm-poster />\n {/* Custom component. */}\n <tap-sides-to-seek />\n </vm-ui>\n </vm-player>\n );\n }\n}\n'))),(0,s.kt)(l.Z,{value:"angular",mdxType:"TabItem"},(0,s.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,s.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"info")),(0,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"You can view the custom ",(0,s.kt)("inlineCode",{parentName:"p"},"<tap-sides-to-seek>")," component ",(0,s.kt)("a",{parentName:"p",href:"https://github.com/vime-js/vime/tree/master/examples/angular/src/app/tap-sides-to-seek"},"here"),"."))),(0,s.kt)("pre",null,(0,s.kt)("code",{parentName:"pre",className:"language-html",metastring:'{13-20}
1 title="player.html"',"{13-20}":!0,title:'"player.html"'},'<vm-player>\n <vm-video\n cross-origin="true"\n poster="https://files.vidstack.io/agent-327/poster.png"\n >\n <source\n data-src="https://files.vidstack.io/agent-327/720p.mp4"\n type="video/mp4"\n />\n <track\n default\n kind="subtitles"\n src="https://files.vidstack.io/agent-327/subs/english.vtt"\n srclang="en"\n label="English"\n />\n </vm-video>\n\n <vm-ui>\n \x3c!-- Vime components. --\x3e\n <vm-click-to-play></vm-click-to-play>\n <vm-spinner></vm-spinner>\n <vm-poster></vm-poster>\n \x3c!-- Custom component. --\x3e\n <tap-sides-to-seek></tap-sides-to-seek>\n </vm-ui>\n</vm-player>\n')))),(0,s.kt)("p",null,"Glorious! Here's the result \ud83e\udd41 ..."),(0,s.kt)("div",{className:"admonition admonition-tip alert alert--success"},(0,s.kt)("div",{parentName:"div",className:"admonition-heading"},(0,s.kt)("h5",{parentName:"div"},(0,s.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,s.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,s.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,s.kt)("div",{parentName:"div",className:"admonition-content"},(0,s.kt)("p",{parentName:"div"},"Click the player anywhere in the center region to toggle playback, and click to the sides to\nseek forwards and backwards."))),(0,s.kt)(p,{mdxType:"ClickPlayer"}),(0,s.kt)("br",null),(0,s.kt)("p",null,"So far we've seen how to setup our player and provider, load the default Vime interface and\nhow to put together our own. It's important to keep in mind, that the examples so far have been\nkept simple on purpose, as they are focused mainly on getting you up and running... what you\ncreate and how far you take it is up to you."),(0,s.kt)("p",null,"\ud83d\ude82 ","\xa0","Let's move onto ",(0,s.kt)("a",{parentName:"p",href:"./controls"},"controls!")))}h.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.