点击和拖动，一步到位：vue-video-player 自定义按钮组件全屏切换指南

前端

2023-12-22 05:35:02

通过自定义按钮组件实现流畅的全屏视频播放

在当今快速发展的前端技术领域，善用成熟的第三方组件库可以节省大量开发时间，同时保证代码质量。本文将探讨如何在视频播放器中优雅地实现点击或拖动即可全屏播放的功能。

挑战：页面闪烁和视觉抖动

看似简单的功能，想要优雅地实现却并非易事。当点击按钮切换全屏时，页面往往会出现短暂的闪烁或跳动，尤其是在拖动视频窗口切换全屏时，更是如在屏幕上摩擦出火花。

解决方案：自定义按钮组件

定位问题后，发现根源在于按钮的点击事件监听。第三方组件库提供的 API 仅有按钮点击事件监听，并没有监听拖动事件。虽然监听拖动的解决方案并不复杂，但想要一劳永逸地解决问题，还需要额外的思考。

最终，我们选择了自定义按钮组件，发现此方法可行，但实现过程并非一帆风顺。

步骤：定义按钮组件

首先，我们需要定义按钮组件。代码如下：

<template>
  <button @click="toggleFullscreen" class="fullscreen-button">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M10 4H14V8H20V14H16V20H10V16H4V10H10Z" fill="#1E88E5"/>
      <path d="M4 4H8V8H14V14H8V20H4V16H0V10H4Z" fill="#1E88E5"/>
    </svg>
  </button>
</template>

<script>
export default {
  name: "FullscreenButton",
  methods: {
    toggleFullscreen() {
      if (document.fullscreenElement) {
        document.exitFullscreen();
      } else {
        this.$parent.$el.requestFullscreen();
      }
    },
  },
};
</script>

<style>
.fullscreen-button {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  margin: 10px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.fullscreen-button svg {
  width: 100%;
  height: 100%;
}
</style>

其中，toggleFullscreen() 方法用于切换全屏状态。

注册按钮组件

接下来，在 main.js 中注册按钮组件。代码如下：

import FullscreenButton from "./components/FullscreenButton.vue";

Vue.component("FullscreenButton", FullscreenButton);

使用按钮组件

最后，在视频播放器组件中使用按钮组件。代码如下：

<template>
  <div>
    <video-player :src="videoUrl">
      <fullscreen-button />
    </video-player>
  </div>
</template>

<script>
import VideoPlayer from "vue-video-player";
import FullscreenButton from "./components/FullscreenButton.vue";

export default {
  components: {
    VideoPlayer,
    FullscreenButton,
  },
  data() {
    return {
      videoUrl: "path/to/video.mp4",
    };
  },
};
</script>