【知识分享】vue3在video.js播放器控制栏增加一个自定义按钮

实现思路：

1.自定义一个js文件，自定义按钮。

2.将自定义按钮加入控制栏

实现代码案例：

1.自定义的js文件：我这里自定义的叫videojs-pan-tilt-control-button.js

import videojs from 'video.js';

const Button = videojs.getComponent('Button');

class PanTiltControlButton extends Button {

  constructor(player, options) {

    super(player, options);

    this.customCode = options.code || ''; // 默认值为空字符串

     this.controlText('云台控制');

  }

  buildCSSClass() {

    return `vjs-my-custom-button ${super.buildCSSClass()}`;

  }

  handleClick() {

   if (!this.customCode) {

  console.warn('Custom code is not set.');

  return;

}

const controlClassName = `yuntai-${this.customCode}`;

const elements = document.querySelectorAll(`.${controlClassName}`);

elements.forEach(element => {

  const currentDisplay = window.getComputedStyle(element).display;

  if (currentDisplay === 'none') {

    element.style.display = 'block';

  } else {

    element.style.display = 'none';

  }

});

  }

}

videojs.registerComponent('PanTiltControlButton', PanTiltControlButton);.

2.将上述自定义js引入并将自定义按钮加入控制栏

<template>

  <div class="video-container">

    <video-player ref="videoPlayerRef" :src="videoUrl" :options="playerOptions" :volume="0.6" />

    <PanTiltButton

      :code="props.code"

      @control-pan-tilt="handlePanTiltControl"

      class="pan-tilt-button"

    />

  </div>

</template>

<script lang="ts" setup>

import { request } from '@/core/utils/customRequest'

import PanTiltButton from './PanTiltButton.vue'

import { onMounted, ref, watch } from 'vue'

import '../../../utils/video/videojs-pan-tilt-control-button' // 引入自定义按钮类

import videojs from 'video.js'

const props = defineProps({

  src: {

    type: String,

    default: 'http://221.226.14.26:83/openUrl/KqRGHYc/live.m3u8'

  },

  code: {

    type: String

  }

})

// 视频播放器配置

let playerOptions = ref({

  playbackRates: [0.7, 1.0, 1.5, 2.0],

  autoplay: 'any', // 如果true,浏览器准备好时开始回放。

  muted: true, // 默认情况下将会消除任何音频。

  loop: true, // 导致视频一结束就重新开始。

  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）

  language: 'zh-CN',

  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

  notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。

  controls: true,

  controlBar: {

    timeDivider: true,

    durationDisplay: true,

    remainingTimeDisplay: false,

    fullscreenToggle: true, // 全屏按钮

    children: [

      'playToggle',

      'volumePanel',

      'currentTimeDisplay',

      'timeDivider',

      'durationDisplay',

      'fullscreenToggle',

      {

        name: 'PanTiltControlButton',

        code: props.code

      }

    ]

  }

})

const updateButtonCode = (player) => {

  const button = player.getChild('ControlBar').getChild('PanTiltControlButton')

  if (button) {

    button.customCode = props.code

    button.options_.code = props.code

  }

}

const videoUrl = ref()

const getVideoUrlByCode = () => {

  request({

    url: 'fast-dynamicview/web/MdVideo/getVideoUrlByCode?code=' + props.code,

    method: 'get',

    showLoading: true

  })

    .then((response: any) => {

      videoUrl.value = response.data.data.url

    })

    .catch(() => {})

}

const videoPlayerRef = ref()

onMounted(() => {

  if (props.code) {

    getVideoUrlByCode()

    const player = videojs(videoPlayerRef.value.$el)

    updateButtonCode(player)

  }

})

watch(

  () => props.code,

  (newValue, oldValue) => {

    getVideoUrlByCode()

    const player = videojs(videoPlayerRef.value.$el) // 获取播放器实例

    updateButtonCode(player)

  },

  { deep: true }

)

</script>

<style>

.vjs-my-custom-button {

  color: #fff; /* 按钮文本颜色 */

  background-color: #333; /* 按钮背景颜色 */

  border: 1px solid #555; /* 边框 */

  font-size: 14px;

  padding: 5px;

  cursor: pointer;

  opacity: 1; /* 确保按钮不透明 */

  transition: background-color 0.3s; /* 鼠标悬停效果 */

}

.video-js .vjs-my-custom-button {

  cursor: pointer;

  flex: none;

}

.vjs-my-custom-button .vjs-icon-placeholder:before {

  content: '\f109';

}

.video-container {

  position: relative; /* Set the parent container to relative positioning */

}

.pan-tilt-button {

  position: absolute; /* Set the button to absolute positioning */

  top: 10px; /* Adjust as needed to position it above the video player */

  left: 10px; /* Adjust as needed to position it horizontally */

  z-index: 10; /* Ensure it appears above other elements */

}

</style>

实现效果如下：

圈住的就是自定义添加进来的按钮。