ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: fd0e987e90
ブランチ タグ
nutui
/
3.1.5
/
doc.0372edc9.js

doc.0372edc9.js 13 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as n}from"./vendor.92dabd7f.js";const t={class:"markdown-body"},p=[n('<h1>video 视频播放器</h1><h3>介绍</h3><p>原生video实现的视频播放器</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Video } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Video);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-video</span>\n  <span class="hljs-attr">:source</span>=<span class="hljs-string">&quot;source&quot;</span>\n  <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span>\n  @<span class="hljs-attr">play</span>=<span class="hljs-string">&quot;play&quot;</span>\n  @<span class="hljs-attr">pause</span>=<span class="hljs-string">&quot;pause&quot;</span>\n  @<span class="hljs-attr">playend</span>=<span class="hljs-string">&quot;playend&quot;</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-video</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">source</span>: {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&quot;https://storage.jd.com/about/big-final.mp4?Expires=3730193075&amp;AccessKey=3LoYX1dQWa6ZXzQl&amp;Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D&quot;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&quot;video/mp4&quot;</span>,\n      },\n      <span class="hljs-attr">options</span>: {\n        <span class="hljs-attr">controls</span>: <span class="hljs-literal">true</span>,\n      },\n    });\n    <span class="hljs-keyword">const</span> play = <span class="hljs-function">(<span class="hljs-params">elm: any</span>) =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#39;play&#39;</span>, elm);\n    <span class="hljs-keyword">const</span> pause = <span class="hljs-function">(<span class="hljs-params">elm: any</span>) =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#39;pause&#39;</span>, elm);\n    <span class="hljs-keyword">const</span> playend = <span class="hljs-function">(<span class="hljs-params">elm: any</span>) =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#39;playend&#39;</span>, elm);\n\n    <span class="hljs-keyword">return</span> { play, pause, playend, ...toRefs(state) };\n}\n</code></pre><h3>自动播放</h3><p>autoplay 属性设置视频自动播放</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-video</span> <span class="hljs-attr">:source</span>=<span class="hljs-string">&quot;source&quot;</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-video</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">source</span>: {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&#39;https://storage.jd.com/about/big-final.mp4&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;video/mp4&#39;</span>\n      },\n      <span class="hljs-attr">options</span>: {\n        <span class="hljs-attr">autoplay</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">muted</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">controls</span>: <span class="hljs-literal">true</span>\n      },\n    });\n\n    <span class="hljs-keyword">return</span> { ...toRefs(state) };\n}\n</code></pre><h3>初始化静音</h3><p>muted属性设置视频初始化静音</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-video</span> <span class="hljs-attr">:source</span>=<span class="hljs-string">&quot;source&quot;</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-video</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">source</span>: {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&#39;https://storage.jd.com/about/big-final.mp4&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;video/mp4&#39;</span>\n      },\n      <span class="hljs-attr">options</span>: {\n        <span class="hljs-attr">muted</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">controls</span>: <span class="hljs-literal">true</span>\n      },\n    });\n\n    <span class="hljs-keyword">return</span> { ...toRefs(state) };\n}\n</code></pre><h3>视频封面海报设置</h3><p>poster 属性设置视频海报</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-video</span> <span class="hljs-attr">:source</span>=<span class="hljs-string">&quot;source&quot;</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-video</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">source</span>: {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&#39;https://storage.jd.com/about/big-final.mp4&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;video/mp4&#39;</span>\n      },\n      <span class="hljs-attr">options</span>: {\n        <span class="hljs-attr">controls</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">poster</span>: <span class="hljs-string">&#39;https://img12.360buyimg.com/ling/s345x208_jfs/t1/168105/33/8417/54825/603df06dEfcddc4cb/21f9f5d0a1b3dad4.jpg.webp&#39;</span>\n      },\n    });\n\n    <span class="hljs-keyword">return</span> { ...toRefs(state) };\n}\n</code></pre><h3>行内播放</h3><p>playsinline 属性设置移动端视频行内播放，阻止新打开页面播放（兼容 ios，兼容部分安卓机）</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-video</span> <span class="hljs-attr">:source</span>=<span class="hljs-string">&quot;source&quot;</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-video</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">source</span>: {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&#39;https://storage.jd.com/about/big-final.mp4&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;video/mp4&#39;</span>\n      },\n      <span class="hljs-attr">options</span>: {\n        <span class="hljs-attr">playsinline</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">controls</span>: <span class="hljs-literal">true</span>,\n      },\n    });\n\n    <span class="hljs-keyword">return</span> { ...toRefs(state) };\n}\n</code></pre><h3>视频背景图</h3><p>当设置视频为背景图时需要将 muted 静音、 disabled 禁止操作、loop 循环播放、autoplay 自动播放设置为 true，移动端需要设置 playsinline 行内展示</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-video</span> <span class="hljs-attr">:source</span>=<span class="hljs-string">&quot;source&quot;</span> <span class="hljs-attr">:options</span>=<span class="hljs-string">&quot;options&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-video</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">source</span>: {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&#39;https://storage.jd.com/about/big-final.mp4&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;video/mp4&#39;</span>\n      },\n      <span class="hljs-attr">options</span>: {\n        <span class="hljs-attr">controls</span>: <span class="hljs-literal">false</span>,\n        <span class="hljs-attr">autoplay</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">muted</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">playsinline</span>: <span class="hljs-literal">true</span>,\n        <span class="hljs-attr">loop</span>: <span class="hljs-literal">true</span>\n      },\n    });\n\n    <span class="hljs-keyword">return</span> { ...toRefs(state) };\n}\n</code></pre><h3>视频切换</h3><p>当视频地址发生变化时，重置视频</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-video</span> <span class="hljs-attr">:source</span>=<span class="hljs-string">&quot;source&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-video</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;primary&quot;</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;changeVideo&quot;</span>&gt;</span>切换视频<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> state = reactive({\n      <span class="hljs-attr">source</span>: {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&#39;https://storage.jd.com/about/big-final.mp4&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;video/mp4&#39;</span>\n      },\n    });\n    <span class="hljs-keyword">const</span> changeVideo = <span class="hljs-function">() =&gt;</span> {\n      state.source1 = {\n        <span class="hljs-attr">src</span>: <span class="hljs-string">&#39;https://vjs.zencdn.net/v/oceans.mp4&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;video/mp4&#39;</span>\n      };\n    };\n\n    <span class="hljs-keyword">return</span> { ...toRefs(state), changeVideo };\n}\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>source</td><td>视频地址和类型设置</td><td>Object</td><td>-</td></tr><tr><td>options</td><td>控制视频播放属性</td><td>Object</td><td>required</td></tr><tr><td>options.autoplay</td><td>是否自动播放</td><td>Boolean</td><td>false</td></tr><tr><td>options.poster</td><td>海报设置</td><td>String</td><td>-</td></tr><tr><td>options.loop</td><td>是否循环播放</td><td>Boolean</td><td>false</td></tr><tr><td>options.controls</td><td>是否展示操作栏</td><td>Boolean</td><td>true</td></tr><tr><td>options.muted</td><td>是否静音</td><td>Boolean</td><td>false</td></tr><tr><td>options.volume</td><td>音量控制</td><td>Number</td><td>0.5</td></tr><tr><td>options.disabled</td><td>禁用操作（如循环播放的背景图，禁止操作）</td><td>Boolean</td><td>false</td></tr><tr><td>options.playsinline</td><td>是否设置为行内播放元素（解决安卓兼容问题）</td><td>Boolean</td><td>false</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名称</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>play</td><td>播放</td><td>–</td></tr><tr><td>pause</td><td>暂停</td><td>–</td></tr><tr><td>playend</td><td>播放完成回调</td><td>–</td></tr></tbody></table>',38)],l={setup:(n,{expose:l})=>(l({frontmatter:{}}),(n,l)=>(a(),s("div",t,p)))};export{l as default};
    2.