{"componentChunkName":"component---src-templates-post-template-js","path":"/zh-CN/plus/videoPlayer","result":{"data":{"current":{"frontmatter":{"title":"VideoPlayer 视频播放器","order":99,"brief":"用于播放视频","icon":"doc-videoplayer"},"fields":{"type":"plus"},"tableOfContents":{"items":[{"url":"#代码演示","title":"代码演示","items":[{"url":"#如何引入","title":"如何引入"},{"url":"#基本用法","title":"基本用法"},{"url":"#设置菜单栏功能","title":"设置菜单栏功能"},{"url":"#循环播放","title":"循环播放"},{"url":"#快进快退","title":"快进快退"},{"url":"#播放速率","title":"播放速率"},{"url":"#音量设置","title":"音量设置"},{"url":"#清晰度切换","title":"清晰度切换"},{"url":"#章节标记","title":"章节标记"},{"url":"#主题","title":"主题"},{"url":"#使用-ref-控制","title":"使用 ref 控制"},{"url":"#api","title":"API","items":[{"url":"#marker","title":"Marker"}]}]},{"url":"#设计变量","title":"设计变量"}]},"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\": \"zh-CN\",\n  \"category\": \"Plus\",\n  \"title\": \"VideoPlayer 视频播放器\",\n  \"width\": \"60%\",\n  \"icon\": \"doc-videoplayer\",\n  \"brief\": \"用于播放视频\"\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  }, \"\\u4EE3\\u7801\\u6F14\\u793A\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5982\\u4F55\\u5F15\\u5165\"), 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  }, \"\\u57FA\\u672C\\u7528\\u6CD5\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u57FA\\u672C\\u4F7F\\u7528\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u4F20\\u5165\\u89C6\\u9891\\u5730\\u5740\\uFF0C \\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"poster\"), \" \\u4F20\\u5165\\u89C6\\u9891\\u5C01\\u9762\\u5730\\u5740\"), 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        <VideoPlayer\\n            height={630} \\n            src={src}\\n            poster={poster}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u7F6E\\u83DC\\u5355\\u680F\\u529F\\u80FD\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"controlsList\"), \" \\u8BBE\\u7F6E\\u83DC\\u5355\\u680F\\u7684\\u5C55\\u793A\\u9879\\uFF0C\\u8BE5\\u9879\\u63A5\\u53D7\\u503C\\u4E3A\\u6570\\u7EC4\\uFF0C\\u9ED8\\u8BA4\\u503C\\u4E3A\", 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        <VideoPlayer\\n            height={630} \\n            src={src}\\n            poster={poster}\\n            controlsList={controlsList}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5FAA\\u73AF\\u64AD\\u653E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"loop\"), \" \\u8BBE\\u7F6E\\u5FAA\\u73AF\\u64AD\\u653E\"), 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        <VideoPlayer \\n            height={630}\\n            src={src}\\n            poster={poster}\\n            loop={true}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u5FEB\\u8FDB\\u5FEB\\u9000\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"seekTime\"), \" \\u8BBE\\u7F6E\\u5FEB\\u8FDB\\u5FEB\\u9000\\u65F6\\u95F4\\uFF0C\\u901A\\u8FC7\\u952E\\u76D8\\u5DE6\\u53F3\\u952E\\u6267\\u884C\\u5FEB\\u8FDB\\u5FEB\\u9000\"), 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        <div>\\n            <div>\\n                <span style={{ marginBottom: 10 }}>\\u8BF7\\u9009\\u62E9\\u5FEB\\u8FDB\\u5FEB\\u9000\\u65F6\\u95F4</span>\\n                <Select\\n                    value={seekTime}\\n                    style={{ width: 100, marginLeft: 10 }}\\n                    onChange={(value) => setSeekTime(value)}\\n                    optionList={[\\n                        { label: '5s', value: 5 },\\n                        { label: '10s', value: 10 },\\n                        { label: '15s', value: 15 },\\n                    ]}\\n                    placeholder='\\u8BF7\\u9009\\u62E9\\u5FEB\\u8FDB\\u5FEB\\u9000\\u65F6\\u95F4'\\n                />\\n            </div>\\n            <VideoPlayer \\n                height={630}\\n                style={{ marginTop: 10 }}\\n                src={src}\\n                poster={poster}\\n                seekTime={seekTime}\\n            />\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u64AD\\u653E\\u901F\\u7387\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"playbackRateList\"), \" \\u8BBE\\u7F6E\\u901F\\u7387\\u9009\\u62E9\\u5217\\u8868\"), 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        <VideoPlayer\\n            height={630} \\n            src={src}\\n            poster={poster}\\n            playbackRateList={playbackRateList}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u97F3\\u91CF\\u8BBE\\u7F6E\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"volume\"), \" \\u8BBE\\u7F6E\\u521D\\u59CB\\u97F3\\u91CF\\uFF0C\\u503C\\u533A\\u95F4\\u4E3A 0 - 100\\uFF0C \\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"muted\"), \" \\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \" \\u53EF\\u4EE5\\u9759\\u97F3\\u64AD\\u653E\"), 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        <VideoPlayer\\n            height={630} \\n            src={src}\\n            poster={poster}\\n            muted={true}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u6E05\\u6670\\u5EA6\\u5207\\u6362\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"qualityList\"), \" \\u8BBE\\u7F6E\\u6E05\\u6670\\u5EA6\\u9009\\u62E9\\u5217\\u8868\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultQuality\"), \" \\u8BBE\\u7F6E\\u521D\\u59CB\\u9009\\u62E9\\u7684\\u6E05\\u6670\\u5EA6\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onQualityChange\"), \" \\u8BBE\\u7F6E\\u70B9\\u51FB\\u540E\\u66F4\\u65B0\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u903B\\u8F91\\u3002\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u7EBF\\u8DEF\\u5207\\u6362\\u540C\\u7406\\uFF0C\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"routeList\"), \" \\u8BBE\\u7F6E\\u6E05\\u6670\\u5EA6\\u9009\\u62E9\\u5217\\u8868\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultRoute\"), \" \\u8BBE\\u7F6E\\u521D\\u59CB\\u9009\\u62E9\\u7684\\u7EBF\\u8DEF\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onRouteChange\"), \" \\u8BBE\\u7F6E\\u70B9\\u51FB\\u540E\\u66F4\\u65B0\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"src\"), \" \\u903B\\u8F91\\u3002\"), 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        <VideoPlayer \\n            height={630}\\n            src={src}\\n            poster={poster}\\n            defaultQuality={'1080p'}\\n            qualityList={[\\n                { label: '1080p', value: '1080p' },\\n                { label: '480p', value: '480p' },\\n            ]}\\n            onQualityChange={(quality) => {\\n                console.log('quality change', quality);\\n                updateVideoSource(quality);\\n            }}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u7AE0\\u8282\\u6807\\u8BB0\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"markers\"), \" \\u8BBE\\u7F6E\\u7AE0\\u8282\\u6807\\u8BB0\\u70B9\"), 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: '\\u7247\\u5934'\\n        },\\n        {\\n            start: 4,\\n            title: '\\u529F\\u80FD\\u4ECB\\u7ECD'\\n        },\\n        {\\n            start: 38,\\n            title: 'Figma Plugin'\\n        },\\n        {\\n            start: 51,\\n            title: '\\u7247\\u5C3E'\\n        }\\n    ];\\n\\n    return (\\n        <VideoPlayer\\n            height={630} \\n            src={src}\\n            poster={poster}\\n            markers={markers}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4E3B\\u9898\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme\"), \" \\u8BBE\\u7F6E\\u4E3B\\u9898\\uFF0C \\u4E3B\\u9898\\u4EC5\\u5F71\\u54CD\\u80CC\\u666F\\u8272\"), 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        <VideoPlayer \\n            src={src}\\n            poster={poster}\\n            height={630}\\n            theme={'light'}\\n        />\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"\\u4F7F\\u7528 ref \\u63A7\\u5236\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ref\"), \" \\u83B7\\u53D6\\u539F\\u751F video \\u5143\\u7D20\\uFF0C\\u53EF\\u4EE5\\u5B9E\\u73B0\\u66F4\\u7075\\u6D3B\\u7684\\u63A7\\u5236\\uFF0C\\u4F8B\\u5982\\u591A\\u4E2A\\u89C6\\u9891\\u540C\\u6B65\\u64AD\\u653E/\\u6682\\u505C\"), 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        <div>\\n            <div style={{ marginBottom: 12 }}>\\n                <Button onClick={handlePlayAll} style={{ marginRight: 8 }}>\\u540C\\u65F6\\u64AD\\u653E</Button>\\n                <Button onClick={handlePauseAll}>\\u540C\\u65F6\\u6682\\u505C</Button>\\n            </div>\\n            <div style={{ display: 'flex', gap: 12 }}>\\n                <VideoPlayer \\n                    ref={videoRef1}\\n                    src={src}\\n                    poster={poster}\\n                    height={315}\\n                    width=\\\"50%\\\"\\n                />\\n                <VideoPlayer \\n                    ref={videoRef2}\\n                    src={src}\\n                    poster={poster}\\n                    height={315}\\n                    width=\\\"50%\\\"\\n                />\\n            </div>\\n        </div>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"API\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"autoPlay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u81EA\\u52A8\\u64AD\\u653E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"captionsSrc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B57\\u5E55\\u8D44\\u6E90\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u540D\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"clickToPlay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u542F\\u7528\\u70B9\\u51FB\\u4EE5\\u64AD\\u653E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"controlsList\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BBE\\u7F6E\\u83DC\\u5355\\u680F\\u5C55\\u793A\\u63A7\\u4EF6\\uFF0C\\u9ED8\\u8BA4\\u5C55\\u793A\\u6240\\u6709\\u63A7\\u4EF6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"['play', 'next', 'time', 'volume', 'playbackRate', 'quality', 'route', 'mirror', 'fullscreen', 'pictureInPicture']\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"crossOrigin\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BE5\\u679A\\u4E3E\\u5C5E\\u6027\\u6307\\u660E\\u662F\\u5426\\u4F7F\\u7528 CORS \\u6765\\u83B7\\u53D6\\u76F8\\u5173\\u89C6\\u9891\\u3002\\u5141\\u8BB8 CORS \\u7684\\u8D44\\u6E90\\u53EF\\u5728 'canvas' \\u5143\\u7D20\\u4E2D\\u88AB\\u91CD\\u7528\\uFF0C\\u800C\\u4E0D\\u4F1A\\u88AB\\u6C61\\u67D3\\u3002\\u5141\\u8BB8\\u7684\\u503C\\u6709 'anonymous' \\u548C 'use-credentials'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'anonymous' \", \"|\", \"'use-credentials'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultPlaybackRate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u500D\\u7387\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultPlaybackRate\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u89C6\\u9891\\u6E05\\u6670\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultRoute\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u7EBF\\u8DEF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"forwardRef\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4F20\\u9012\\u539F\\u751F video \\u5143\\u7D20\\u7684 ref\\uFF0C\\u7528\\u4E8E\\u83B7\\u53D6\\u539F\\u751F video \\u5143\\u7D20\\u8FDB\\u884C\\u66F4\\u7075\\u6D3B\\u7684\\u63A7\\u5236\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"React.Ref\", \"<\", \"HTMLVideoElement\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"height\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9AD8\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"loop\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u542F\\u7528\\u5FAA\\u73AF\\u64AD\\u653E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"markers\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8282\\u70B9\\u6807\\u8BB0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Marker[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"muted\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u662F\\u5426\\u9759\\u97F3\\u64AD\\u653E\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPause\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6682\\u505C\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPlay\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u64AD\\u653E\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onQualityChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362\\u6E05\\u6670\\u5EA6\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(quality: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRateChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362\\u901F\\u7387\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(rate: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRouteChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5207\\u6362\\u7EBF\\u8DEF\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(route: string) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onVolumeChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8C03\\u6574\\u97F3\\u91CF\\u56DE\\u8C03\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(volume: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"playbackRateList\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u901F\\u7387\\u5217\\u8868\\uFF0C\\u9ED8\\u8BA4\\u5C55\\u793A 6 \\u79CD\\u64AD\\u653E\\u901F\\u7387\\uFF0C\\u5206\\u522B\\u4E3A 0.5\\uFF0C0.75\\uFF0C1.0\\uFF0C1.25\\uFF0C1.5 \\u548C 2.0\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<{ label: string; value: string }>\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"poster\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C01\\u9762\\u56FE\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"qualityList\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E05\\u6670\\u5EA6\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<{ label: string; value: string }>\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"routeList\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EBF\\u8DEF\\u5217\\u8868\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<{ label: string; value: string }>\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"seekTime\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5FEB\\u8FDB\\u5FEB\\u9000\\u65F6\\u95F4\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"10\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u89C6\\u9891\\u64AD\\u653E\\u5730\\u5740\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6837\\u5F0F\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"theme\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E3B\\u9898\\u8BBE\\u7F6E\\uFF0C\\u4E0D\\u540C\\u4E3B\\u9898\\u7EC4\\u4EF6\\u7684\\u80CC\\u666F\\u8272\\u4E0D\\u540C\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'dark' \", \"|\", \" 'light'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'dark'\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"volume\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u97F3\\u91CF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"100\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"width\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BBD\\u5EA6\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")))), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Marker\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5C5E\\u6027\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BF4\\u660E\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7C7B\\u578B\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9ED8\\u8BA4\\u503C\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"start\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8D77\\u59CB\\u65F6\\u95F4\\u70B9\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"title\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6807\\u9898\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"\\u8BBE\\u8BA1\\u53D8\\u91CF\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"zh-CN/plus/videoPlayer","next":{"fields":{"slug":"en-US/ai/aiComponent"},"id":"f6806420-f684-521f-a22d-94cad89ce456","frontmatter":{"title":"AI Ability Introduction","localeCode":"en-US","icon":"doc-aiComponent","showNew":true}},"previous":{"fields":{"slug":"en-US/plus/videoPlayer"},"id":"f3c4531a-81ef-561f-84a2-ee82aea2880e","frontmatter":{"title":"VideoPlayer","localeCode":"en-US","icon":"doc-videoplayer","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}