@160over90/vue-plyr-video 中文文档教程

Question

PlyrVideo

Features

Plyr 视频播放器的 Vue 包装器。 只支持视频播放器，不支持音频播放器。

如果你没有 yarn，你可以在这里下载它。

Instructions for global registration

yarn add @160over90/vue-plyr-video

包含在 main.js（app 入口点）

import PlyrVideo from '@160over90/vue-plyr-video';

Vue.use(PlyrVideo);

Instructions for editing this package

yarn install

Compiles and hot-reloads for development

yarn run serve

Examples

中的最简单的例子。 使用所有默认设置为链接中的视频创建播放器。

<PlyrVideo videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"/>

当 Plyr 视频准备就绪时使用事件触发方法的示例。

<PlyrVideo
  videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"
  @ready="ready"
/>
...
methods: {
  ready() {
    // Do something
  },
},

与之前访问 DOM 事件的示例类似。 要访问原始 DOM 事件，请使用特殊的 $event 变量。

<PlyrVideo
  videoUrl="https://www.youtube.com/watch?v=WaawXXqXExo"
  @ready="ready($event)"
/>
...
methods: {
  ready(event) {
    console.log('ready', event);
  },
},

Events

所有 Plyr 事件都已实施。 如需事件列表，请参考 Plyr 文档。

Props

所有 Plyr 选项都可以作为道具传递。 有关选项列表，请参考 Plyr 文档。 以下是所有不是 Plyr 选项的道具。

videoUrl（字符串，必需） 视频的 URL。 选项包括 YouTube 网址、Vimeo 网址或自托管网址/路径。

海报（字符串，默认值：未定义） 海报图片的 URL。

类型（字符串，默认值：未定义） 对于不是使用 Vimeo 或 YouTube 托管的视频，这是视频元素上的类型属性。 如果适用，建议使用此选项。 示例：'video/mp4'

background（布尔值，默认值：false） 一组预设，可轻松将视频用作背景视频。 删除所有控件，启用自动播放，禁用点击播放，完全禁用全屏功能，启用循环，并且视频静音。 具体设置如下，不能被覆盖。

controls: [],
autoplay: true,
clickToPlay: false,
fullscreen: { enabled: false, fallback: false, iosNative: false },
loop: true,
muted: true,

Methods

大多数 Plyr 方法已经实现。 有关方法列表，请参考 Plyr 文档。 使用下面详述的全屏方法名称有一些变化。 此外，回调方法尚未实现。 相反，使用 Vue 事件挂钩来实现相同的功能。

fullscreen.enter() 方法可以与 enterFullscreen() 一起使用。 fullscreen.exit() 方法可以与 exitFullscreen() 一起使用。 fullscreen.toggle() 方法可以与 toggleFullscreen() 一起使用。

Polyfill

Plyr 使用的 ES6 尚未在所有浏览器中得到支持。 这意味着某些功能需要填充才能可用，否则您会遇到问题。 我们选择不给 90% 支持这些功能的用户增加额外的 JS 负担，而是让 polyfilling 留给你根据你的需要来解决。 我发现的最简单的方法是使用 polyfill.io，它提供基于用户代理的 polyfill。 这是演示使用的方法。

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

License

麻省理工学院