{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/plus/videoPlayer","result":{"data":{"current":{"frontmatter":{"title":"VideoPlayer","order":99,"brief":"Used to play video","icon":"doc-videoplayer"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#set-controls-list","title":"Set controls list"},{"url":"#loop-playback","title":"Loop playback"},{"url":"#fast-forward-and-rewind","title":"Fast forward and rewind"},{"url":"#playback-rate","title":"Playback rate"},{"url":"#volume-setting","title":"Volume setting"},{"url":"#clarity-switching","title":"Clarity switching"},{"url":"#chapter-markers","title":"Chapter markers"},{"url":"#theme","title":"Theme"},{"url":"#using-ref-for-control","title":"Using ref for control"},{"url":"#api","title":"API","items":[{"url":"#marker","title":"Marker"}]}]},{"url":"#design-token","title":"Design Token"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"order\": 99,\n \"localeCode\": \"en-US\",\n \"category\": \"Plus\",\n \"title\": \"VideoPlayer\",\n \"width\": \"60%\",\n \"icon\": \"doc-videoplayer\",\n \"brief\": \"Used to play video\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { VideoPlayer } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"For basic usage, pass the video address through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src\"), \" and pass the video cover address through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"poster\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Set controls list\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set the display items of the menu bar through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"controlsList\"), \". The accepted value is an array. The default value is \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"['play', 'next', 'time', 'volume', 'playbackRate', 'quality', 'route', 'mirror', 'fullscreen', 'pictureInPicture']\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n const controlsList = ['play', 'time', 'volume', 'playbackRate', 'fullscreen'];\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Loop playback\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"loop\"), \" to set loop playback\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Fast forward and rewind\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"seekTime\"), \" to set the fast forward and rewind time, and use the left and right keys on the keyboard to fast forward and rewind.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer, Select } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [seekTime, setSeekTime] = useState(5);\\n\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n return (\\n \\n Please select the fast forward and rewind time\\n setSeekTime(value)}\\n optionList={[\\n { label: '5s', value: 5 },\\n { label: '10s', value: 10 },\\n { label: '15s', value: 15 },\\n ]}\\n placeholder='Please select the fast forward and rewind time'\\n />\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Playback rate\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set the rate selection list through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"playbackRateList\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const playbackRateList = [\\n { label: '0.5x', value: 0.5 },\\n { label: '1.0x', value: 1 },\\n { label: '1.5x', value: 1.5 },\\n { label: '2.0x', value: 2 },\\n ];\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Volume setting\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"volume\"), \" to set the initial volume, the value range is 0 - 100, set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"muted\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"true\"), \" to play silently\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Clarity switching\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"qualityList\"), \" to set the clarity selection list, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultQuality\"), \" to set the initial selected clarity, and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onQualityChange\"), \" to set the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src\"), \" logic to be updated after clicking.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Similarly for route switching, use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"routeList\"), \" to set the clarity selection list, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"defaultRoute\"), \" to set the initial selected route, and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"onRouteChange\"), \" to set the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"src\"), \" logic to be updated after clicking.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [src, setSrc] = useState('https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4');\\n\\n const playList = [\\n {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4',\\n quality: '1080p',\\n },\\n {\\n src: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/video/vchart-show-video-480p.mp4',\\n quality: '480p',\\n },\\n ];\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n\\n const updateVideoSource = (quality) => {\\n const source = playList.find((item) => item.quality === quality);\\n setSrc(source.src);\\n };\\n\\n return (\\n {\\n console.log('quality change', quality);\\n updateVideoSource(quality);\\n }}\\n />\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Chapter markers\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set chapter markers via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"markers\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n const markers = [\\n {\\n start: 0,\\n title: 'Start'\\n },\\n {\\n start: 4,\\n title: 'Function Introduction'\\n },\\n {\\n start: 38,\\n title: 'Figma Plugin'\\n },\\n {\\n start: 51,\\n title: 'Ending'\\n }\\n ];\\n\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Theme\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Set the theme via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"theme\"), \", the theme only affects the background color\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { VideoPlayer } from '@douyinfe/semi-ui';\\n\\n() => {\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n return (\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Using ref for control\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Get the native video element via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ref\"), \" for more flexible control, such as synchronized playback/pause of multiple videos\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useRef } from 'react';\\nimport { VideoPlayer, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n const videoRef1 = useRef();\\n const videoRef2 = useRef();\\n const src = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/vchart/landingPage/vchart-show-video.mp4\\\";\\n const poster = \\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/poster2.jpeg\\\";\\n \\n const handlePlayAll = () => {\\n const v1 = videoRef1.current;\\n const v2 = videoRef2.current;\\n if (v1) v1.play();\\n if (v2) v2.play();\\n };\\n \\n const handlePauseAll = () => {\\n const v1 = videoRef1.current;\\n const v2 = videoRef2.current;\\n if (v1) v1.pause();\\n if (v2) v2.pause();\\n };\\n \\n return (\\n \\n
\\n \\n \\n
\\n
\\n \\n \\n
\\n