前端实验室 Chrome插件 2023-05-22

强烈推荐！无论什么框架都能用的视频组件

大家注意：因为微信最近又改了推送机制，经常有小伙伴说错过了之前被删的文章，或者一些限时福利，错过了就是错过了。所以建议大家加个星标，就能第一时间收到推送。大家好，我是「前端实验室」爱分享的了不起~

前端框架花样繁多，React,Vue,Angular、Svelte等等；框架不同，技术选型也不同，今天就给大家推荐一个视频播放器的组件，让你无论使用什么框架，都能够使用的媒体播放器——Vime

Vime

Vime是一个可定制，可扩展，可访问且与框架无关的媒体播放器。支持 HTML5、HLS、Dash、YouTube、Vimeo、Dailymotion…

特点

开箱即用
轻量级 – 独立约 25kB (gzip)，默认 Vime UI 约 47kB。
具有大量属性、方法和事件的综合播放器 API 。
使用 TypeScript 构建
国际化友好支持
适配移动端和桌面端
支持自定义构建组件并扩展 Vime
支持全屏和画中画
React、Vue、Svelte、Stencil 和 Angular 等框架都能使用，相同的API，学会一种全能使用

安装

使用CDN引入

<!-- Default theme. ~960B -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css"
/>

<!-- Optional light theme (extends default). ~400B -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/light.css"
/>

<!-- Library and all of its components are lazy loaded, so nothing to sweat about here. ~3kB -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@vime/core@^5/dist/vime/vime.esm.js"
></script>

React 安装

npm i @vime/core @vime/react

Vue 安装

# Vue 2
npm i @vime/core @vime/vue

# Vue 3
npm i @vime/core @vime/vue-next

使用

官方文档提供了demo示例，有React、Vue、Svelte、Stencil和Angular的绑定示例

<template>
  <Player
    theme="dark"
    style="--vm-player-theme: #e86c8b;"
  >
    <Video
      crossOrigin
      poster="https://media.vimejs.com/poster.png"
    >
      <source 
        data-src="https://media.vimejs.com/720p.mp4" 
        type="video/mp4"
      />
      <track 
        default 
        kind="subtitles" 
        src="https://media.vimejs.com/subs/english.vtt" 
        srclang="en" 
        label="English" 
      />
    </Video>

    <DefaultUi />
  </Player>
</template>
<script>
import { Player, Video, DefaultUi } from '@vime/vue';
export default {
  components: {
    Player,
    Video,
    DefaultUi,
  },

使用自定义UI

<!-- 我们在整个播放器中添加一点色彩。-->
<vime-player autoplay muted style="--vm-player-theme: #1873d3">
  <!-- 加载YouTube视频。-->
  <vime-youtube video-id="DyTCOwB0DVw" />
  <vime-ui>
    <vime-click-to-play />
    <vime-captions />
    <vime-poster />
    <vime-spinner />
    <vime-default-settings />
    <vime-controls pin="bottomLeft" active-duration="2750" full-width>
      <!-- 
        这些都是可以轻松自定义的预定义控件，你也可以完全从头构建自己的控件。
      -->
      <vime-playback-control tooltip-direction="right" />
      <vime-volume-control />
      <vime-time-progress />
      <vime-control-spacer />
      <vime-caption-control />
      <vime-pip-control keys="p" />
      <vime-settings-control />
      <vime-fullscreen-control keys="f" tooltip-direction="left" />
    </vime-controls>
  </vime-ui>
</vime-player>

设置

“设置” 是一个弹出式菜单，其中包含用于配置播放器和媒体播放的选项。就像控件一样，开箱即用的常见设置，如播放速率、质量和字幕；当然你也可以创建自定义设置内容

<template>
  <Player>
    <!-- ... -->

    <DefaultUi noSettings>
      <Settings>
        <MenuItem label="Menu Item 1" badge="BADGE" @click="onMenuItem1Click" />

        <MenuItem label="Menu Item 2" hint="Hint" @click="onMenuItem2Click" />

        <Submenu label="Submenu 1" :hint="value">
          <MenuRadioGroup :value="value" @vCheck="onCheck">
            <MenuRadio label="Option 1" value="1" />
            <MenuRadio label="Option 2" value="2" />
            <MenuRadio label="Option 3" value="3" />
          </MenuRadioGroup>
        </Submenu>

        <Submenu label="Submenu 2"> Random content in here. </Submenu>
      </Settings>
    </DefaultUi>
  </Player>
</template>

<script>
  export default {
    data: {
      value: '1',
    },
    methods: {
      onMenuItem1Click() {
        console.log('Clicked menu item 1');
      },
      onMenuItem2Click() {
        console.log('Clicked menu item 2');
      },
      onCheck(event) {
        const radio = event.target;
        this.value = radio.value;
      },
    },
  };
</script>