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.