media-chrome
Custom elements (web components) for making audio and video player controls that look great in your website or app.
파일 탐색기
최종 버전 다운로드 (.zip)- 1-cd-tab.png
- 2-run-workflow.png
- 3-compare-tags.png
- cd.yml
- ci.yml
- claude.yml
- CODEOWNERS
- bottom-chrome.png
- centered-chrome.png
- clip-selector.png
- media-chrome-audio-player.png
- media-chrome-diagram-media-controller-id.png
- media-chrome-diagram-media-controller-nesting.png
- media-chrome-video-player.jpeg
- media-clip-selector.gif
- media-controller-slots.png
- middle-chrome.png
- mix-and-match.png
- responsive.png
- top-chrome.png
- favicon-256x256.png
- favicon-32x32.png
- favicon-48x48.png
- en-cc-mashup.vtt
- copy-code-block-to-clipboard.js
- favicon.ico
- make-scrollable-code-focusable.js
- media-chrome-logo-dark.svg
- media-chrome-logo-light.svg
- media-chrome-logo.svg
- og-image.png
- og-image.svg
- robots.txt
- AvatarList.astro
- Footer.astro
- AstroLogo.astro
- Header.astro
- LanguageSelect.css
- LanguageSelect.tsx
- Search.css
- Search.tsx
- SidebarToggle.tsx
- SkipToContent.astro
- ThemeToggleButton.css
- ThemeToggleButton.tsx
- LeftSidebar.astro
- CopyToClipboard.astro
- PageContent.astro
- MoreMenu.astro
- RightSidebar.astro
- TableOfContents.tsx
- HeadCommon.astro
- HeadSEO.astro
- MediaElementsList.astro
- Sandpack.jsx
- SandpackBase.jsx
- SandpackContainer.astro
- SandpackContainerReact.astro
- christian.md
- dylan.md
- steve.md
- wesley.md
- accessibility.md
- browser-apis-video.md
- html-hero.md
- next-generation-player.md
- player-context-ux.md
- player-face.md
- player-web-components.md
- caffeine.tv.png
- chibisage.moe.png
- internetcheckpoint.page.jpeg
- lume.nu.png
- mave.io.jpeg
- mux.com.png
- runwayml.com.jpeg
- syntax.fm.png
- ted.com.jpeg
- caffeine.tv.md
- chibisage.moe.md
- internetcheckpoint.page.md
- lume.nu.md
- mave.io.md
- mux.com.md
- runwayml.com.md
- syntax.fm.md
- ted.com.md
- config.ts
- ExternalLinkIcon.tsx
- ComponentLayout.astro
- ExamplesLayout.astro
- LandingLayout.astro
- MainLayout.astro
- MediaElementLayout.astro
- [...path].astro
- index.astro
- media-airplay-button.mdx
- media-audio-track-menu.mdx
- media-captions-button.mdx
- media-captions-menu.mdx
- media-cast-button.mdx
- media-context-menu.mdx
- media-control-bar.mdx
- media-controller.md
- media-duration-display.mdx
- media-fullscreen-button.mdx
- media-live-button.mdx
- media-loading-indicator.mdx
- media-loop-button.mdx
- media-mute-button.mdx
- media-pip-button.mdx
- media-play-button.mdx
- media-playback-rate-button.mdx
- media-playback-rate-menu.mdx
- media-poster-image.mdx
- media-preview-thumbnail.md
- media-rendition-menu.mdx
- media-seek-backward-button.mdx
- media-seek-forward-button.mdx
- media-settings-menu.mdx
- media-time-display.mdx
- media-time-range.mdx
- media-volume-range.mdx
- [...example].astro
- adding-language-support.mdx
- cloudflare-video.mdx
- dash-video.mdx
- hls-video.mdx
- jwplayer-video.mdx
- mux-video.mdx
- shaka-video.mdx
- spotify-audio.mdx
- videojs-video.mdx
- vimeo-video.mdx
- wistia-video.mdx
- youtube-video.mdx
- from-0.x-to-1.0.md
- from-1.x-to-2.0.md
- from-2.x-to-3.0.md
- from-3.x-to-4.0.md
- get-started.mdx
- hooks.mdx
- styling.astro
- ShowcaseCard.astro
- [...page].astro
- custom-slots.md
- handling-variables.md
- index.md
- responsive-themes.md
- share.md
- architecture.md
- audio-player.md
- design-principles.md
- development-principles.md
- get-started.mdx
- keyboard-shortcuts.md
- media-element.mdx
- position-controls.md
- prevent-layout-shift.md
- responsive-controls.mdx
- stream-type.md
- styling.mdx
- index.astro
- up-right-arrow.jsx
- x.jsx
- components-list.tsx
- cta.tsx
- description.tsx
- footer-content.tsx
- hero.tsx
- html-renderer.tsx
- media-chrome-html-renderer.tsx
- media-chrome-list-item-renderer.tsx
- player-panel.tsx
- source-panel.tsx
- toggle.tsx
- style-vars.tsx
- data.tsx
- index.tsx
- index.astro
- get-imported-urls.js
- index.css
- theme.css
- toggle.css
- index.d.ts
- mux-embed.d.ts
- config.ts
- env.d.ts
- languages.ts
- .gitignore
- astro.config.js
- DOCS_STYLE_GUIDE.md
- package-lock.json
- package.json
- README.md
- tailwind.config.js
- tsconfig.json
- vercel.json
- en-cc.vtt
- next.svg
- vercel.svg
- AudioMenuButton.tsx
- CaptionsButton.tsx
- CaptionsMenuButton.tsx
- ControlsContainer.tsx
- CurrentTimeDisplay.tsx
- DurationDisplay.tsx
- FullscreenButton.tsx
- LoadingBackdrop.tsx
- MuteButton.tsx
- PipButton.tsx
- PlaybackRateMenuButton.tsx
- PlayButton.tsx
- Player.tsx
- PlayerContainer.tsx
- RenditionsMenuButton.tsx
- SeekBackwardButton.tsx
- SeekBackwardGestureRegion.tsx
- Seekbar.tsx
- SeekForwardButton.tsx
- SeekForwardGestureRegion.tsx
- theme.ts
- TogglePausedGestureRegion.tsx
- Video.tsx
- VolumeSlider.tsx
- page.tsx
- page.tsx
- ReactPlayer.tsx
- page.tsx
- player.tsx
- styles.module.css
- favicon.ico
- globals.css
- layout.tsx
- page.tsx
- styles.module.css
- .eslintrc.json
- .gitignore
- next-env.d.ts
- next.config.mjs
- package-lock.json
- package.json
- postcss.config.js
- README.md
- tailwind.config.ts
- tsconfig.json
- media-audio-track-menu.html
- media-captions-menu.html
- media-chrome-menu.html
- media-clip-selector.html
- media-context-menu.html
- media-controller.html
- media-error-dialog.html
- media-playback-rate-menu.html
- media-rendition-menu.html
- media-settings-menu.html
- favicon-256x256.png
- favicon-32x32.png
- favicon-48x48.png
- spacebar.svg
- dash.html
- hls.html
- jwplayer.html
- media-playlist.html
- mux-video.html
- play-pause.html
- spotify.html
- videojs.html
- vimeo.html
- wistia.html
- youtube.html
- index.html
- pwa-manifest.json
- demuxed-2022-theme.html
- microvideo-theme.html
- minimal-theme.html
- tailwind-audio-theme.html
- winamp-theme.html
- youtube-theme.html
- captions.ar.vtt
- captions.de.vtt
- captions.en.vtt
- captions.ja.vtt
- captions.ru.vtt
- captions.sv.vtt
- chapters.vtt
- bbb-en-cc.vtt
- en-cc.vtt
- en-sub.vtt
- es-sub.vtt
- advanced.html
- animated-icons.html
- basic-audio.html
- basic-i18n.html
- basic-video.html
- basic.html
- casting.html
- components.html
- disabled.html
- iframe.html
- index.html
- internationalization.html
- memory-leak-tester.html
- mobile.html
- portrait.html
- responsive-attribute.html
- responsive.html
- slots-demo.html
- standalone-controls.html
- state-change-events-demo.html
- tooltips.html
- wrapper.html
- en-cc.vtt
- react.svg
- App.css
- App.tsx
- index.css
- main.tsx
- vite-env.d.ts
- .eslintrc.cjs
- .gitignore
- index.html
- package.json
- README.md
- tsconfig.json
- tsconfig.node.json
- vite.config.ts
- yarn.lock
- utils.js
- build.js
- cem-plugin-css-vars.js
- custom-elements-manifest.config.js
- index.ts
- index.ts
- labels.ts
- de.ts
- en.ts
- es.ts
- fr.ts
- pt.ts
- zh-CN.ts
- zh-TW.ts
- media-store.ts
- request-map.ts
- state-mediator.ts
- util.ts
- index.ts
- media-audio-track-menu-button.ts
- media-audio-track-menu.ts
- media-captions-menu-button.ts
- media-captions-menu.ts
- media-chrome-menu-button.ts
- media-chrome-menu-item.ts
- media-chrome-menu.ts
- media-context-menu-item.ts
- media-context-menu.ts
- media-playback-rate-menu-button.ts
- media-playback-rate-menu.ts
- media-rendition-menu-button.ts
- media-rendition-menu.ts
- media-settings-menu-button.ts
- media-settings-menu-item.ts
- media-settings-menu.ts
- media-store.tsx
- useSyncExternalStoreWithSelector.ts
- anchor-utils.ts
- attribute-token-list.ts
- captions.ts
- CustomElement.ts
- element-utils.ts
- Entry.ts
- events.ts
- fullscreen-api.ts
- i18n.ts
- platform-tests.ts
- Point.ts
- range-animation.ts
- Rect.ts
- resize-observer.ts
- server-safe-globals.ts
- template-parts.ts
- template-processor.ts
- TextTrackLike.ts
- time.ts
- utils.ts
- all.ts
- constants.ts
- index.ts
- media-airplay-button.ts
- media-captions-button.ts
- media-cast-button.ts
- media-chrome-button.ts
- media-chrome-dialog.ts
- media-chrome-range.ts
- media-container.ts
- media-control-bar.ts
- media-controller.ts
- media-duration-display.ts
- media-error-dialog.ts
- media-fullscreen-button.ts
- media-gesture-receiver.ts
- media-keyboard-shortcuts-dialog.ts
- media-live-button.ts
- media-loading-indicator.ts
- media-loop-button.ts
- media-mute-button.ts
- media-pip-button.ts
- media-play-button.ts
- media-playback-rate-button.ts
- media-poster-image.ts
- media-preview-chapter-display.ts
- media-preview-thumbnail.ts
- media-preview-time-display.ts
- media-seek-backward-button.ts
- media-seek-forward-button.ts
- media-text-display.ts
- media-theme-element.ts
- media-theme.ts
- media-time-display.ts
- media-time-range.ts
- media-tooltip.ts
- media-volume-range.ts
- airplay.svg
- captions.svg
- captions_off.svg
- cast.svg
- cast_exit.svg
- forward_30.svg
- fullscreen.svg
- fullscreen_exit.svg
- pause.svg
- pip.svg
- play.svg
- replay.svg
- replay_30.svg
- volume_down.svg
- volume_mute.svg
- volume_off.svg
- volume_up.svg
- smoke.spec.ts
- core-controls.spec.ts
- disabled.spec.ts
- i18n.spec.ts
- layout.spec.ts
- menus.spec.ts
- misc.spec.ts
- themes.spec.ts
- helpers.ts
- interactions.spec.ts
- playback.spec.ts
- smoke.spec.ts
- smoke.spec.ts
- request-map.spec.ts
- state-mediator.spec.ts
- util.spec.ts
- utils.spec.ts
- attribute-token-list.spec.ts
- captions.spec.ts
- element-utils.spec.ts
- time.spec.ts
- utils.spec.ts
- media-container.spec.ts
- media-controller.spec.ts
- media-error-dialog.spec.ts
- media-play-button.spec.ts
- media-playback-rate-button.spec.ts
- media-theme.spec.ts
- resolve-package-exports.spec.ts
- template-parts.spec.ts
- template-processor.spec.ts
- example-tests.config.ts
- ports.ts
- tsconfig.json
- web-test-runner.config.js
- .gitignore
- .prettierignore
- CHANGELOG.md
- CONTRIBUTING.md
- LICENSE
- middleware.ts
- package-lock.json
- package.json
- README.md
- tsconfig.json
- vercel.json
# 설치 가이드
1. 코드 내려받기
git clone https://github.com/muxinc/media-chrome
깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.
cd media-chrome
방금 내려받은 프로젝트 폴더 안으로 이동합니다.
2. Node.js
쉬움 추천사전 준비물
<script type="module" src="https://cdn.jsdelivr.net/npm/media-chrome@4/+esm"></script>
이 명령어를 터미널에 그대로 입력해 실행하세요.
명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.
이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.
// repository documentation
Was this content helpful?
(0 ratings)