@shixinde/vuepress-theme-init
Version:
168 lines (167 loc) • 48 kB
JavaScript
import{_ as s,c as n,o as a,a as e}from"./app-Dx9bNbfq.js";const t={},p=e(`<h1 id="vue-core-video-player-基于vue-js的视频播放器组件" tabindex="-1"><a class="header-anchor" href="#vue-core-video-player-基于vue-js的视频播放器组件"><span><a href="https://www.cnblogs.com/liuqingzheng/p/16204851.html" target="_blank" rel="noopener noreferrer">vue-core-video-player-基于vue.js的视频播放器组件</a></span></a></h1><h1 id="一-介绍" tabindex="-1"><a class="header-anchor" href="#一-介绍"><span>一 介绍</span></a></h1><p>一款基于 vue.js 的轻量级的视频播放器插件插件</p><ul><li>1.1 官方文档</li></ul><div class="language-python line-numbers-mode" data-highlighter="prismjs" data-ext="py" data-title="py"><pre class="language-python"><code><span class="line">https<span class="token punctuation">:</span><span class="token operator">//</span>core<span class="token operator">-</span>player<span class="token punctuation">.</span>github<span class="token punctuation">.</span>io<span class="token operator">/</span>vue<span class="token operator">-</span>core<span class="token operator">-</span>video<span class="token operator">-</span>player<span class="token operator">/</span>zh<span class="token operator">/</span>get<span class="token operator">-</span>started<span class="token punctuation">.</span>html</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h2 id="_1-2-安装和快速使用" tabindex="-1"><a class="header-anchor" href="#_1-2-安装和快速使用"><span>1.2 安装和快速使用</span></a></h2><h3 id="第一步-安装" tabindex="-1"><a class="header-anchor" href="#第一步-安装"><span>第一步：安装</span></a></h3><p><strong>NPM</strong></p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">--save</span> vue-core-video-player </span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>或者使用 <code>yarn</code></p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">yarn</span> <span class="token function">add</span> <span class="token parameter variable">-S</span> vue-core-video-player </span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="第二步-main-js引入" tabindex="-1"><a class="header-anchor" href="#第二步-main-js引入"><span>第二步：main.js引入</span></a></h3><p>默认英语，你如果想成中文就加一个<code>lang</code><code>en: 英语</code><code>zh-CN: 简体中文</code><code>jp: 日本</code></p><div class="language-php line-numbers-mode" data-highlighter="prismjs" data-ext="php" data-title="php"><pre class="language-php"><code><span class="line">import VueCoreVideoPlayer from <span class="token string single-quoted-string">'vue-core-video-player'</span></span>
<span class="line">Vue<span class="token operator">.</span><span class="token keyword">use</span><span class="token punctuation">(</span>VueCoreVideoPlayer<span class="token punctuation">)</span></span>
<span class="line"><span class="token comment">//或者</span></span>
<span class="line">Vue<span class="token operator">.</span><span class="token keyword">use</span><span class="token punctuation">(</span>VueCoreVideoPlayer<span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> lang<span class="token punctuation">:</span> <span class="token string single-quoted-string">'zh-CN'</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p><strong>Use custom language data</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">import</span> VueCoreVideoPlayer <span class="token keyword">from</span> <span class="token string">'vue-core-video-player'</span></span>
<span class="line"></span>
<span class="line"><span class="token keyword">const</span> kr <span class="token operator">=</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token operator">...</span></span>
<span class="line"> <span class="token string-property property">"dashboard"</span> <span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token string-property property">"btn"</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token operator">...</span><span class="token punctuation">.</span></span>
<span class="line"> <span class="token string-property property">"pause"</span><span class="token operator">:</span> <span class="token string">"일시적인"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string-property property">"fullscreen"</span><span class="token operator">:</span> <span class="token string">"전체화면"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token string-property property">"exitFullscreen"</span><span class="token operator">:</span> <span class="token string">"전체 화면 종료"</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line">Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueCoreVideoPlayer<span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">lang</span><span class="token operator">:</span> kr</span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">)</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="第三步-在组件中写入" tabindex="-1"><a class="header-anchor" href="#第三步-在组件中写入"><span>第三步：在组件中写入</span></a></h3><div class="language-xml line-numbers-mode" data-highlighter="prismjs" data-ext="xml" data-title="xml"><pre class="language-xml"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>player-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vue-core-video-player</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vue-core-video-player</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="第四步-本地路径问题" tabindex="-1"><a class="header-anchor" href="#第四步-本地路径问题"><span>第四步：本地路径问题</span></a></h3><p>外部路径： 非常简单！就是直接上！</p><div class="language-xml line-numbers-mode" data-highlighter="prismjs" data-ext="xml" data-title="xml"><pre class="language-xml"><code><span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vue-core-video-player</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://img.ksbbs.com/asset/Mon_1703/05cacb4e02f9d9e.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vue-core-video-player</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>本地路径： 不能直接<code>./assets/1.mp4</code>，无效的。需要使用<code>require("...")</code></p><div class="language-xml line-numbers-mode" data-highlighter="prismjs" data-ext="xml" data-title="xml"><pre class="language-xml"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vue-core-video-player</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vue-core-video-player</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"> export default{</span>
<span class="line"> data(){</span>
<span class="line"> return{</span>
<span class="line"> url:require("./assets/1.mp4")</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line"> }</span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="二-基本配置" tabindex="-1"><a class="header-anchor" href="#二-基本配置"><span>二 基本配置</span></a></h1><h2 id="_2-1-分辨率切换" tabindex="-1"><a class="header-anchor" href="#_2-1-分辨率切换"><span>2.1 分辨率切换</span></a></h2><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vue-core-video-player</span> <span class="token attr-name">:src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mp4_url<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vue-core-video-player</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"></span>
<span class="line"> <span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span><span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">mp4_url</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://rb1x3v1fm.sabkt.gdipper.com/%E8%87%B4%E5%91%BD%E8%AF%B1%E6%83%91320p.mp4'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">resolution</span><span class="token operator">:</span> <span class="token number">360</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://rb1x3v1fm.sabkt.gdipper.com/%E8%87%B4%E5%91%BD%E8%AF%B1%E6%83%91720p.mp4'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">resolution</span><span class="token operator">:</span> <span class="token number">720</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'http://rb1x3v1fm.sabkt.gdipper.com/%E8%87%B4%E5%91%BD%E8%AF%B1%E6%83%914k.mp4'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">resolution</span><span class="token operator">:</span> <span class="token string">'4k'</span><span class="token punctuation">,</span></span>
<span class="line"></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-2-不通浏览器播放不同文件" tabindex="-1"><a class="header-anchor" href="#_2-2-不通浏览器播放不同文件"><span>2.2 不通浏览器播放不同文件</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token keyword">const</span> videoSource <span class="token operator">=</span> <span class="token punctuation">[</span></span>
<span class="line"> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'https://media.vued.vanthink.cn/sparkle_your_name_am720p.webm'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'video/webm'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">src</span><span class="token operator">:</span> <span class="token string">'https://media.vued.vanthink.cn/sparkle_your_name_am720p.mp4'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'video/mp4'</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">]</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-3-底部控制栏" tabindex="-1"><a class="header-anchor" href="#_2-3-底部控制栏"><span>2.3 底部控制栏</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">// 底部控制栏 controls 属性 可以用来控制底部控制栏的显示隐藏</span></span>
<span class="line"></span>
<span class="line"><span class="token comment">// 1 String 类型</span></span>
<span class="line"><span class="token string">'fixed'</span> 表示底部导航栏会一直固定显示；</span>
<span class="line"><span class="token string">'auto'</span> 表示底部导航栏在用户未产生任何交互操作后自动消失，默认的形式；</span>
<span class="line"></span>
<span class="line"><span class="token comment">// 2 Boolean 类型</span></span>
<span class="line"><span class="token boolean">false</span> 表示始终不显示导航栏；</span>
<span class="line"><span class="token boolean">true</span> 默认值；它和设置 <span class="token string">'auto'</span> 形式类似；</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-4-自动播放" tabindex="-1"><a class="header-anchor" href="#_2-4-自动播放"><span>2.4 自动播放</span></a></h2><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token comment">//如果你设置了 autoplay, 播放器会尝试自动播放视频；</span></span>
<span class="line"><span class="token comment">//由于不同的浏览器对自动播放行为的限制不一样；</span></span>
<span class="line"><span class="token comment">//如果播放器自动播放失败会显示播放按钮，方便用户手动触发</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="_2-5-视频播放控制" tabindex="-1"><a class="header-anchor" href="#_2-5-视频播放控制"><span>2.5 视频播放控制</span></a></h2><p>组件保持了和原生 <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" target="_blank" rel="noopener noreferrer">HTML Video</a> 属性配置的对接</p><table><thead><tr><th>Props</th><th style="text-align:center;">Type</th><th style="text-align:left;">Example</th><th style="text-align:left;">Description</th></tr></thead><tbody><tr><td>volume</td><td style="text-align:center;">number</td><td style="text-align:left;"><code>0.5</code></td><td style="text-align:left;">控制视频音量(0-1)</td></tr><tr><td>muted</td><td style="text-align:center;">boolean</td><td style="text-align:left;"><code>true</code></td><td style="text-align:left;">设置为 <code>true</code>, 视频会静音</td></tr><tr><td>cover</td><td style="text-align:center;">string</td><td style="text-align:left;"><code>'./cover.png'</code></td><td style="text-align:left;">显示视频的封面，如果设置 autoplay，自动播放成功后，不会显示</td></tr><tr><td>title</td><td style="text-align:center;">string</td><td style="text-align:left;"><code>'your title'</code></td><td style="text-align:left;">展示视频的标题，方便 SEO</td></tr><tr><td>logo</td><td style="text-align:center;">string</td><td style="text-align:left;"><code>'./logo.png'</code></td><td style="text-align:left;">显示播放器的 logo</td></tr><tr><td>loop</td><td style="text-align:center;">boolean</td><td style="text-align:left;"><code>true</code></td><td style="text-align:left;">会循环播放当前视频</td></tr><tr><td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" target="_blank" rel="noopener noreferrer">preload</a></td><td style="text-align:center;">string</td><td style="text-align:left;"><code>'metadata'</code></td><td style="text-align:left;"><code>'none'</code> 表示不会预加载视频; <code>'metadata'</code> 表示只加载视频 metadata 信息部分</td></tr><tr><td>cover</td><td style="text-align:center;">string</td><td style="text-align:left;">图片地址</td><td style="text-align:left;">预览图</td></tr></tbody></table><p><strong>案例</strong></p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token operator"><</span>vue<span class="token operator">-</span>core<span class="token operator">-</span>video<span class="token operator">-</span>player <span class="token operator">:</span>src<span class="token operator">=</span><span class="token string">"mp4_url"</span></span>
<span class="line"> <span class="token operator">:</span>muted<span class="token operator">=</span><span class="token string">"true"</span></span>
<span class="line"> <span class="token operator">:</span>autoplay<span class="token operator">=</span><span class="token string">"false"</span></span>
<span class="line"> title<span class="token operator">=</span><span class="token string">"致命诱惑"</span></span>
<span class="line"> preload<span class="token operator">=</span><span class="token string">"nona"</span></span>
<span class="line"> <span class="token operator">:</span>loop<span class="token operator">=</span><span class="token string">"true"</span></span>
<span class="line"> controls<span class="token operator">=</span><span class="token string">"auto"</span></span>
<span class="line"> cover<span class="token operator">=</span><span class="token string">'https://img1.wxzxzj.com/vpc-example-cover-your-name-c.png'</span></span>
<span class="line"><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>vue<span class="token operator">-</span>core<span class="token operator">-</span>video<span class="token operator">-</span>player<span class="token operator">></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="三-事件" tabindex="-1"><a class="header-anchor" href="#三-事件"><span>三 事件</span></a></h1><h3 id="_3-1-基本事件" tabindex="-1"><a class="header-anchor" href="#_3-1-基本事件"><span>3.1 基本事件</span></a></h3><p><code>VueCoreVideoPlayer</code>遵循<code>W3C</code>标准的媒体事件<code>API</code>,你可以前往<code>MDN</code>获取这些细节，下面罗列一些非常常用的事件：</p><ul><li>play 表示当播放器开始播放或者通过 play() 方法从暂停状态恢复。</li><li>pause 当播放器停止播放的时候触发。</li><li>progress 当播放器正在下载媒体资源。</li><li>loadeddata 当播放器开始加载第一帧时候触发。</li><li>canplay 当加载足够数据可以满足基本播放后触发.。</li><li>durationchange 当媒体获取一定数据，并且完整的解析出 metadata 信息。</li><li>ended 当媒体播放结束时候触发。</li><li>timeupdate 当播放的媒体 currenttime 发生改变时候触发。</li><li>seeked 当用户 seek 操作完成触发。</li></ul><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js" data-title="js"><pre class="language-javascript"><code><span class="line"><span class="token operator"><</span>template<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"player-container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>vue<span class="token operator">-</span>core<span class="token operator">-</span>video<span class="token operator">-</span>player @loadedmetadata<span class="token operator">=</span><span class="token string">"loaded"</span> @play<span class="token operator">=</span><span class="token string">"playFunc"</span> @pause<span class="token operator">=</span><span class="token string">"pauseFunc"</span> src<span class="token operator">=</span><span class="token string">"./videos/your_video.mp4"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>vue<span class="token operator">-</span>core<span class="token operator">-</span>video<span class="token operator">-</span>player<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token operator"><</span>template<span class="token operator">></span></span>
<span class="line"></span>
<span class="line"><span class="token operator"><</span>script<span class="token operator">></span></span>
<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token function">loaded</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// your code</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">playFunc</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token comment">// your code</span></span>
<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"> <span class="token function">pauseFunc</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> </span>
<span class="line"> <span class="token comment">// your code</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_3-2-播放错误" tabindex="-1"><a class="header-anchor" href="#_3-2-播放错误"><span>3.2 播放错误</span></a></h3><p>播放错误偶有发生， 我们提供了播放错误码方便开发者或者用户了解一些原因.</p><div class="language-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><code><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>player-container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>vue-core-video-player</span> <span class="token attr-name">@error</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>errorHandle<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>./videos/your_video.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>vue-core-video-player</span><span class="token punctuation">></span></span></span>
<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span></span>
<span class="line"></span>
<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span></span>
<span class="line">export default {</span>
<span class="line"> methods: {</span>
<span class="line"> errorHandle (e) {</span>
<span class="line"> // handle error</span>
<span class="line"> },</span>
<span class="line"> }</span>
<span class="line">}</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="四-播放-hls" tabindex="-1"><a class="header-anchor" href="#四-播放-hls"><span>四 播放 HLS</span></a></h1><p><strong>HLS</strong>（HTTP Live Streaming）——基于HTTP的自适应码率流媒体传输协议。HLS描述了一组通过互联网提供音视频服务的工具和程序。一个视频可以被分割成多个视频切片，这些切片的传送位置和顺序在一组被称为播放列表的XML文件中，该文件以文件扩展名m3u8结尾。人们可以使用兼容了HLS的播放器播放视频</p><p><a href="https://github.com/core-player/playcore-hls" target="_blank" rel="noopener noreferrer">playcore-hls</a> 是一款 HLS 解码插件，方便支持 HLS 的播放。</p><h2 id="_4-1-快速开始" tabindex="-1"><a class="header-anchor" href="#_4-1-快速开始"><span>4.1 快速开始</span></a></h2><div class="language-python line-numbers-mode" data-highlighter="prismjs" data-ext="py" data-title="py"><pre class="language-python"><code><span class="line">$ npm install @core<span class="token operator">-</span>player<span class="token operator">/</span>playcore<span class="token operator">-</span>hls <span class="token operator">-</span><span class="token operator">-</span>save</span>
<span class="line"><span class="token operator"><</span>template<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>div <span class="token builtin">id</span><span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"player-container"</span><span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span>vue<span class="token operator">-</span>core<span class="token operator">-</span>video<span class="token operator">-</span>player <span class="token punctuation">:</span>core<span class="token operator">=</span><span class="token string">"HLSCore"</span> src<span class="token operator">=</span><span class="token string">"your_file.m3u8"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>vue<span class="token operator">-</span>core<span class="token operator">-</span>video<span class="token operator">-</span>player<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span></span>
<span class="line"><span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span></span>
<span class="line"><span class="token operator"><</span>script<span class="token operator">></span></span>
<span class="line"><span class="token keyword">import</span> VueCoreVideoPlayer <span class="token keyword">from</span> <span class="token string">'vue-core-video-player'</span></span>
<span class="line"><span class="token keyword">import</span> HLSCore <span class="token keyword">from</span> '@core<span class="token operator">-</span>player<span class="token operator">/</span>playcore<span class="token operator">-</span>hls</span>
<span class="line"></span>
<span class="line">Vue<span class="token punctuation">.</span>use<span class="token punctuation">(</span>VueCoreVideoPlayer<span class="token punctuation">)</span></span>
<span class="line"></span>
<span class="line">export default <span class="token punctuation">{</span></span>
<span class="line"> name<span class="token punctuation">:</span> <span class="token string">'App'</span><span class="token punctuation">,</span></span>
<span class="line"> data <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line"> <span class="token keyword">return</span> <span class="token punctuation">{</span></span>
<span class="line"> HLSCore</span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"> <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span>
<span class="line"><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>作者：liuqingzheng</p><p>出处：https://www.cnblogs.com/liuqingzheng/p/16204851.html</p>`,52),l=[p];function o(i,c){return a(),n("div",null,l)}const u=s(t,[["render",o],["__file","视频播放插件.html.vue"]]),d=JSON.parse('{"path":"/vue%E7%AC%94%E8%AE%B0%E5%8F%8A%E5%91%A8%E8%BE%B9%E7%94%9F%E6%80%81/%E8%A7%86%E9%A2%91%E6%92%AD%E6%94%BE%E6%8F%92%E4%BB%B6.html","title":"视频播放插件","lang":"zh-CN","frontmatter":{"title":"视频播放插件","date":"2022-12-29T00:00:00.000Z","tags":["视频播放","笔记"],"categories":["自学篇"]},"headers":[{"level":2,"title":"1.2 安装和快速使用","slug":"_1-2-安装和快速使用","link":"#_1-2-安装和快速使用","children":[{"level":3,"title":"第一步：安装","slug":"第一步-安装","link":"#第一步-安装","children":[]},{"level":3,"title":"第二步：main.js引入","slug":"第二步-main-js引入","link":"#第二步-main-js引入","children":[]},{"level":3,"title":"第三步：在组件中写入","slug":"第三步-在组件中写入","link":"#第三步-在组件中写入","children":[]},{"level":3,"title":"第四步：本地路径问题","slug":"第四步-本地路径问题","link":"#第四步-本地路径问题","children":[]}]},{"level":2,"title":"2.1 分辨率切换","slug":"_2-1-分辨率切换","link":"#_2-1-分辨率切换","children":[]},{"level":2,"title":"2.2 不通浏览器播放不同文件","slug":"_2-2-不通浏览器播放不同文件","link":"#_2-2-不通浏览器播放不同文件","children":[]},{"level":2,"title":"2.3 底部控制栏","slug":"_2-3-底部控制栏","link":"#_2-3-底部控制栏","children":[]},{"level":2,"title":"2.4 自动播放","slug":"_2-4-自动播放","link":"#_2-4-自动播放","children":[]},{"level":2,"title":"2.5 视频播放控制","slug":"_2-5-视频播放控制","link":"#_2-5-视频播放控制","children":[{"level":3,"title":"3.1 基本事件","slug":"_3-1-基本事件","link":"#_3-1-基本事件","children":[]},{"level":3,"title":"3.2 播放错误","slug":"_3-2-播放错误","link":"#_3-2-播放错误","children":[]}]},{"level":2,"title":"4.1 快速开始","slug":"_4-1-快速开始","link":"#_4-1-快速开始","children":[]}],"git":{"updatedTime":1755347964000,"contributors":[{"name":"袁果锅","email":"2914310412@qq.com","commits":1}]},"filePathRelative":"vue笔记及周边生态/视频播放插件.md","excerpt":"\\n<h1>一 介绍</h1>\\n<p>一款基于 vue.js 的轻量级的视频播放器插件插件</p>\\n<ul>\\n<li>1.1 官方文档</li>\\n</ul>\\n<div class=\\"language-python\\" data-highlighter=\\"prismjs\\" data-ext=\\"py\\" data-title=\\"py\\"><pre class=\\"language-python\\"><code><span class=\\"line\\">https<span class=\\"token punctuation\\">:</span><span class=\\"token operator\\">//</span>core<span class=\\"token operator\\">-</span>player<span class=\\"token punctuation\\">.</span>github<span class=\\"token punctuation\\">.</span>io<span class=\\"token operator\\">/</span>vue<span class=\\"token operator\\">-</span>core<span class=\\"token operator\\">-</span>video<span class=\\"token operator\\">-</span>player<span class=\\"token operator\\">/</span>zh<span class=\\"token operator\\">/</span>get<span class=\\"token operator\\">-</span>started<span class=\\"token punctuation\\">.</span>html</span>\\n<span class=\\"line\\"></span></code></pre></div>"}');export{u as comp,d as data};