mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-05-01 12:38:12 +08:00
18 lines
24 KiB
JavaScript
18 lines
24 KiB
JavaScript
import{$ as e,B as t,P as n,_ as r,f as i,g as a,h as o,l as s}from"./runtime-core.esm-bundler-CZvn3YaB.js";import{t as c}from"./plugin-vue_export-helper-CxTVcLa7.js";var l=JSON.parse(`{"path":"/guide/embed/video/artplayer/","title":"ArtPlayer 视频 | 指南","lang":"zh-CN","frontmatter":{"title":"ArtPlayer 视频","icon":"icon-park-outline:video","createTime":"2024/12/21 16:13:54","permalink":"/guide/embed/video/artplayer/","description":"概述 主题提供嵌入 自定义来源视频 的功能。 该功能由 提供支持。 配置 该功能默认不启用。你需要在主题配置中开启。 .vuepress/config.ts 安装 该功能依赖于 artplayer 播放器实现,主题默认不安装该依赖,在启用 artPlayer 功能时,需要 进行手动安装 artPlayer 播放器默认支持 'mp4', 'mp3', '...","head":[["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"ArtPlayer 视频\\",\\"image\\":[\\"\\"],\\"dateModified\\":\\"2025-10-07T15:13:09.000Z\\",\\"author\\":[]}"],["meta",{"property":"og:url","content":"https://theme-plume.vuejs.press/guide/embed/video/artplayer/"}],["meta",{"property":"og:site_name","content":"Plume 主题"}],["meta",{"property":"og:title","content":"ArtPlayer 视频"}],["meta",{"property":"og:description","content":"概述 主题提供嵌入 自定义来源视频 的功能。 该功能由 提供支持。 配置 该功能默认不启用。你需要在主题配置中开启。 .vuepress/config.ts 安装 该功能依赖于 artplayer 播放器实现,主题默认不安装该依赖,在启用 artPlayer 功能时,需要 进行手动安装 artPlayer 播放器默认支持 'mp4', 'mp3', '..."}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:locale:alternate","content":"en-US"}],["meta",{"property":"og:updated_time","content":"2025-10-07T15:13:09.000Z"}],["meta",{"property":"article:modified_time","content":"2025-10-07T15:13:09.000Z"}],["link",{"rel":"alternate","hreflang":"en-us","href":"https://theme-plume.vuejs.press/en/guide/embed/video/artplayer/"}]]},"readingTime":{"minutes":1.92,"words":575},"git":{"createdTime":1734798481000,"updatedTime":1759849989000,"contributors":[{"name":"pengzhanbo","username":"pengzhanbo","email":"volodymyr@foxmail.com","commits":4,"avatar":"https://avatars.githubusercontent.com/pengzhanbo?v=4","url":"https://github.com/pengzhanbo"}],"changelog":[{"hash":"4d2361a7046214fe0f4e4af01831107fd00e38ad","time":1759849989000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(theme)!: add collections support (#704)"},{"hash":"0fd6cac57412002f4d72dc10378789b529adc357","time":1742063370000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"refactor(theme): improve types and flat config (#524)"},{"hash":"0e22ad0258891d4fec63bf584345d9f0854f048d","time":1734846194000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"perf(theme): improve <code><ArtPlayer/ ></code>"},{"hash":"bd4c3506dc23d42e8e5b5cbf2a7fc9128d2e43fe","time":1734798481000,"email":"volodymyr@foxmail.com","author":"pengzhanbo","message":"feat(plugin-md-power): add <code>artplayer</code> support (#393)"}]},"autoDesc":true,"filePathRelative":"guide/embed/artplayer.md","headers":[],"bulletin":false}`),u={name:`artplayer.md`},d={class:`code-block-title`,"data-title":`.vuepress/config.ts`},f={class:`code-block-title-bar`},p={class:`title`};function m(c,l,u,m,h,g){let _=t(`VPLink`),v=t(`VPIcon`),y=t(`CodeTabs`),b=t(`ArtPlayer`);return n(),i(`div`,null,[l[29]||=s(`h2`,{id:`概述`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#概述`},[s(`span`,null,`概述`)])],-1),l[30]||=s(`p`,null,`主题提供嵌入 自定义来源视频 的功能。`,-1),s(`p`,null,[l[1]||=a(`该功能由 `,-1),r(_,{href:`../../config/plugins/markdown-power.md`},{default:e(()=>[...l[0]||=[a(`vuepress-plugin-md-power`,-1)]]),_:1}),l[2]||=a(` 提供支持。`,-1)]),l[31]||=s(`h2`,{id:`配置`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#配置`},[s(`span`,null,`配置`)])],-1),l[32]||=s(`p`,null,`该功能默认不启用。你需要在主题配置中开启。`,-1),s(`div`,d,[s(`div`,f,[s(`span`,p,[r(v,{provider:`iconify`,name:`vscode-icons:file-type-typescript`}),l[3]||=a(`.vuepress/config.ts`,-1)])]),l[4]||=o(`<div class="language-ts" data-highlighter="shiki" data-ext="ts" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark has-diff vp-code"><code class="language-ts"><span class="line"><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">export</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;"> default</span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;"> defineUserConfig</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> theme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#59873A;--shiki-dark:#80A665;">plumeTheme</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">({</span></span>
|
||
<span class="line"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> markdown</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: {</span></span>
|
||
<span class="line diff add"><span style="--shiki-light:#998418;--shiki-dark:#B8A965;"> artPlayer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">: </span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">true</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">, </span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> },</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"> })</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">})</span></span></code></pre></div>`,1)]),l[33]||=s(`h2`,{id:`安装`,tabindex:`-1`},[s(`a`,{class:`header-anchor`,href:`#安装`},[s(`span`,null,`安装`)])],-1),l[34]||=s(`p`,null,[a(`该功能依赖于 `),s(`code`,null,`artplayer`),a(` 播放器实现,主题默认不安装该依赖,在启用 `),s(`code`,null,`artPlayer`),a(` 功能时,需要 进行手动安装`)],-1),r(y,{id:`0`,data:[{id:`pnpm`},{id:`yarn`},{id:`npm`}],"tab-id":`npm-to-pnpm-yarn-npm`},{title0:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-light-pnpm`}),l[5]||=s(`span`,null,`pnpm`,-1)]),title1:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-yarn`}),l[6]||=s(`span`,null,`yarn`,-1)]),title2:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`logos:npm-icon`}),l[7]||=s(`span`,null,`npm`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[8]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`pnpm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` artplayer`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[9]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`yarn`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` artplayer`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...l[10]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`npm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` i`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` artplayer`)])])])],-1)]]),_:1}),l[35]||=o(`<p>artPlayer 播放器默认支持 <code>'mp4'</code>, <code>'mp3'</code>, <code>'webm'</code>, <code>'ogg'</code> 格式的视频格式。</p><p>同时还支持扩展其他格式的支持。</p><p>如果您的视频格式为 <code>'mpd'</code>, <code>'dash'</code>, 还需要再手动安装 <code>dashjs</code> :</p>`,3),r(y,{id:`0`,data:[{id:`pnpm`},{id:`yarn`},{id:`npm`}],"tab-id":`npm-to-pnpm-yarn-npm`},{title0:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-light-pnpm`}),l[11]||=s(`span`,null,`pnpm`,-1)]),title1:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-yarn`}),l[12]||=s(`span`,null,`yarn`,-1)]),title2:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`logos:npm-icon`}),l[13]||=s(`span`,null,`npm`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[14]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`pnpm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` dashjs`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[15]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`yarn`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` dashjs`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...l[16]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`npm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` i`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` dashjs`)])])])],-1)]]),_:1}),l[36]||=s(`p`,null,[a(`如果您的视频格式为 `),s(`code`,null,`'m3u8'`),a(`, `),s(`code`,null,`'hls'`),a(`, 还需要再手动安装 `),s(`code`,null,`hls.js`),a(` :`)],-1),r(y,{id:`0`,data:[{id:`pnpm`},{id:`yarn`},{id:`npm`}],"tab-id":`npm-to-pnpm-yarn-npm`},{title0:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-light-pnpm`}),l[17]||=s(`span`,null,`pnpm`,-1)]),title1:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-yarn`}),l[18]||=s(`span`,null,`yarn`,-1)]),title2:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`logos:npm-icon`}),l[19]||=s(`span`,null,`npm`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[20]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`pnpm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` hls.js`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[21]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`yarn`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` hls.js`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...l[22]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`npm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` i`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` hls.js`)])])])],-1)]]),_:1}),l[37]||=s(`p`,null,[a(`如果您的视频格式为 `),s(`code`,null,`'ts'`),a(`, `),s(`code`,null,`'flv'`),a(`, 还需要再手动安装 `),s(`code`,null,`mpegts.js`),a(` :`)],-1),r(y,{id:`0`,data:[{id:`pnpm`},{id:`yarn`},{id:`npm`}],"tab-id":`npm-to-pnpm-yarn-npm`},{title0:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-light-pnpm`}),l[23]||=s(`span`,null,`pnpm`,-1)]),title1:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`vscode-icons:file-type-yarn`}),l[24]||=s(`span`,null,`yarn`,-1)]),title2:e(({value:e,isActive:t})=>[r(v,{provider:`iconify`,name:`logos:npm-icon`}),l[25]||=s(`span`,null,`npm`,-1)]),tab0:e(({value:e,isActive:t})=>[...l[26]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`pnpm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` mpegts.js`)])])])],-1)]]),tab1:e(({value:e,isActive:t})=>[...l[27]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`yarn`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` add`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` mpegts.js`)])])])],-1)]]),tab2:e(({value:e,isActive:t})=>[...l[28]||=[s(`div`,{class:`language-sh`,"data-highlighter":`shiki`,"data-ext":`sh`,style:{"--shiki-light":`#393a34`,"--shiki-dark":`#dbd7caee`,"--shiki-light-bg":`#ffffff`,"--shiki-dark-bg":`#121212`}},[s(`pre`,{class:`shiki shiki-themes vitesse-light vitesse-dark vp-code`},[s(`code`,{class:`language-sh`},[s(`span`,{class:`line`},[s(`span`,{style:{"--shiki-light":`#59873A`,"--shiki-dark":`#80A665`}},`npm`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` i`),s(`span`,{style:{"--shiki-light":`#B56959`,"--shiki-dark":`#C98A7D`}},` mpegts.js`)])])])],-1)]]),_:1}),l[38]||=o(`<h2 id="markdown-语法" tabindex="-1"><a class="header-anchor" href="#markdown-语法"><span>markdown 语法</span></a></h2><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">artPlayer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p>添加配置项:</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">artPlayer muted autoplay loop width="100%" height="400px" ratio="16:9"</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><ul><li><code>src</code>: 视频链接地址</li></ul><p><strong>配置项说明:</strong></p><ul><li><code>width</code>: 视频宽度</li><li><code>height</code>: 视频高度</li><li><code>ratio</code>: 视频比例,默认 <code>16:9</code></li><li><code>type</code>: 视频格式,默认从视频链接的文件地址中解析获取</li><li><code>autoplay</code>: 是否自动播放</li><li><code>muted</code>: 是否静音,autoplay 时,默认为 <code>true</code></li><li><code>volume</code>: 音量大小,范围为 <code>0 - 1</code></li><li><code>poster</code>:视频封面图链接地址</li><li><code>auto-mini</code>: 当播放器滚动到浏览器视口以外时,自动进入 <code>迷你播放</code> 模式</li></ul><h2 id="全局组件" tabindex="-1"><a class="header-anchor" href="#全局组件"><span>全局组件</span></a></h2><p>主题提供了全局组件 <code><ArtPlayer /></code> 以支持更灵活丰富的使用方式。</p><h3 id="props" tabindex="-1"><a class="header-anchor" href="#props"><span>Props</span></a></h3><table><thead><tr><th>字段</th><th>类型</th><th>描述</th></tr></thead><tbody><tr><td>src</td><td><code>string</code></td><td>必填,视频播放地址</td></tr><tr><td>type</td><td><code>string</code></td><td>选填,视频格式,默认从 <code>src</code> 中截取</td></tr><tr><td>width</td><td><code>string</code></td><td>选填, 宽度, 默认 <code>100%</code></td></tr><tr><td>height</td><td><code>string</code></td><td>选填,高度</td></tr><tr><td>ratio</td><td><code>string</code></td><td>选填,宽高比,默认 <code>16:9</code></td></tr></tbody></table><p>更多 <code>Props</code> 请参考 <a href="https://artplayer.org/document/start/option.html" target="_blank" rel="noopener noreferrer">artPlayer 文档</a> 主题支持所有选项。</p><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例"><span>示例</span></a></h2><div class="hint-container tip"><p class="hint-container-title">说明</p><p>示例中的视频资源来自 <a href="https://artplayer.org" target="_blank" rel="noopener noreferrer">artplayer.org</a> 。</p></div><p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#393A34;--shiki-dark:#DBD7CAEE;">@</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">[</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">artPlayer</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">](</span><span style="--shiki-light:#393A3490;--shiki-light-text-decoration:underline;--shiki-dark:#DEDCD590;--shiki-dark-text-decoration:underline;">https://artplayer.org/assets/sample/video.mp4</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">)</span></span></code></pre></div><p><strong>输出:</strong></p>`,17),r(b,{src:`https://artplayer.org/assets/sample/video.mp4`,fullscreen:``,flip:``,"playback-rate":``,"aspect-ratio":``,setting:``,pip:``,volume:.75,width:`100%`}),l[39]||=o(`<p><strong>输入:</strong></p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ArtPlayer</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fullscreen</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">/></span></span></code></pre></div><p><strong>输出:</strong></p>`,3),r(b,{src:`https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8`,fullscreen:``}),l[40]||=o(`<h2 id="说明" tabindex="-1"><a class="header-anchor" href="#说明"><span>说明</span></a></h2><p>markdown 语法 <code>@[artPlayer](src)</code> 在主题内部转换为了 <code><ArtPlayer /></code> 组件,它等价于</p><div class="language-md" data-highlighter="shiki" data-ext="md" style="--shiki-light:#393a34;--shiki-dark:#dbd7caee;--shiki-light-bg:#ffffff;--shiki-dark-bg:#121212;"><pre class="shiki shiki-themes vitesse-light vitesse-dark vp-code"><code class="language-md"><span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;"><</span><span style="--shiki-light:#1E754F;--shiki-dark:#4D9375;">ArtPlayer</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> src</span><span style="--shiki-light:#999999;--shiki-dark:#666666;">=</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span><span style="--shiki-light:#B56959;--shiki-dark:#C98A7D;">src</span><span style="--shiki-light:#B5695977;--shiki-dark:#C98A7D77;">"</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> fullscreen</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> flip</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> playback-rate</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> aspect-ratio</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> setting</span></span>
|
||
<span class="line"><span style="--shiki-light:#B07D48;--shiki-dark:#BD976A;"> pip</span></span>
|
||
<span class="line"><span style="--shiki-light:#999999;--shiki-dark:#666666;">/></span></span></code></pre></div>`,3)])}var h=c(u,[[`render`,m]]);export{l as _pageData,h as default}; |