该所有者的项目
(vue-plyr
一个用于 plyr 视频和音频播放器的 Vue 组件。
当你想在你的 Vue 应用程序中使用一个漂亮的视频播放器时，这很有用。
它使用 sampotts 开发的 plyr v3 作为播放器。
支持的播放器类型。HTML5 视频，HTML5 音频，YouTube（div & progressive enhancement）和 Vimeo（div & progressive enhancement）。
安装
yarn add vue-plyr plyr # or npm i vue-plyr plyr
Module
// 在您的主 vue 文件中 -- 您创建初始 vue 的那个文件中。
import Vue from 'vue'
import VuePlyr from 'vue-plyr'
// 第二个参数是可选的，为每个玩家设置默认配置值。
Vue.use(VuePlyr, {
plyr: {
fullscreen: { enabled: false }
},
emit: ['ended']
})
SSR（详见下文）
对于 SSR，你可以导入 SSR 优化模块，在 ./dist/vue-plyr.ssr.js 找到。下面有一个更深入的描述如何使用它和 nuxt。
浏览器
在浏览器中，你可以像包含其他软件包一样包含它：用 unpkg。
<script type="text/javascript" src="https://unpkg.com/vue"></script> <script type="text/javascript" src="https://unpkg.com/plyr"></script> <script type="text/javascript" src="https://unpkg.com/vue-plyr"></script>
使用方法
一旦安装完毕，它就可以在模板中使用，如下所示：
<!-- video element -->
<vue-plyr>
<video poster="poster.png" src="video.mp4">
<source src="video-720p.mp4" type="video/mp4" size="720">
<source src="video-1080p.mp4" type="video/mp4" size="1080">
<track kind="captions" label="English" srclang="en" src="captions-en.vtt" default>
</video>
</vue-plyr>
<!-- audio element -->
<vue-plyr>
<audio>
<source src="audio.mp3" type="audio/mp3"/>
<source src="audio.ogg" type="audio/ogg"/>
</audio>
</vue-plyr>
<!-- youtube iframe with progressive enhancement (extra queries after the url to optimize the embed) -->
<vue-plyr>
<div class="plyr__video-embed">
<iframe
src="https://www.youtube.com/embed/bTqVqk7FSmY?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
allowfullscreen allowtransparency allow="autoplay">
</iframe>
</div>
</vue-plyr>
<!-- youtube div element -->
<vue-plyr>
<div data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY"></div>
</vue-plyr>
<!-- vimeo iframe with progressive enhancement (extra queries after the url to optimize the embed) -->
<vue-plyr>
<div class="plyr__video-embed">
<iframe
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
allowfullscreen allowtransparency allow="autoplay">
</iframe>
</div>
</vue-plyr>
<!-- vimeo div element -->
<vue-plyr>
<div data-plyr-provider="vimeo" data-plyr-embed-id="76979871"></div>
</vue-plyr>
Player Instance（播放器实例）
<template>
<vue-plyr ref="plyr"></vue-plyr>
</template>
<script>
export default {
name: 'Component',
computed: {
player () {
return this.$refs.plyr.player
}
},
mounted () {
console.log(this.player)
}
}
</script>
要访问播放器实例，你可以使用 refs 属性。
事件
如果你想从 plyr 实例中捕获事件，有几种选择。
首选的方法是通过 ref 属性访问播放器实例，并使用该对象来获取事件，就像使用普通 plyr 实例一样。
有效的事件在这里。
<template>
<vue-plyr ref="plyr"></vue-plyr>
</template>
<script>
export default {
name: 'Component',
computed: {
player () {
return this.$refs.plyr.player
}
},
mounted () {
this.player.on('event', () => console.log('event fired'))
}
</script>
另一种方法是只传递要发出的事件数组。
<vue-plyr :emit="['timeupdate','exitfullscreen']" @timeupdate="videoTimeUpdated" @exitfullscreen="exitedFullScreen">
选项
对于自定义选项，你可以传递一个选项道具，它是一个对象，将被传递给新的 Plyr() 创建。这里有可用的选项。我添加了一个额外的选项 (hideYouTubeDOMError)，它可以隐藏销毁 YouTube 播放器时记录的错误。它的默认值为 true，你可以将其设置为 false 来禁用它并查看错误。
SSR
Nuxt
这应该是支持 SSR 的开箱即用。对于 nuxt，在你的插件文件夹中创建一个名为 vue-plyr.js 的文件，其中只包含这三个语句。
import Vue from 'vue'
import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'
// The second argument is optional and sets the default config values for every player.
Vue.use(VuePlyr, {
plyr: {
fullscreen: { enabled: false }
},
emit: ['ended']
})
然后在你的 nuxt.config.js文件中添加 '~/plugins/vue-plyr' 到插件数组中。vue-plyr 元素现在应该是全局注册的。
你还需要在同一个文件中添加 plyr/dist/plyr.css 到你的 css 数组。
nuxt.config.js 文件至少应该包括这个。
export default {
plugins: [
'~/plugins/vue-plyr'
],
css: [
'plyr/dist/plyr.css'
]
}
作者
vue-plyr © RedXTech, Released under the MIT License.