surmon-china / videojs-player

@videojs player component for @vuejs(3) and React.
https://github.surmon.me/videojs-player
MIT License
5.25k stars 1.13k forks source link

The userAtions.click does not work #451

Open Tsingkai opened 1 year ago

Tsingkai commented 1 year ago

Describe the bug

I want to click videoplayer and pop up the control bar instead of toggle to play or pause.So I use the option userActions.click = false. But it does not work.

      // videojs options
      playerOptions: {
        autoplay: false,
        muted: false,
        preload: 'auto',
        language: 'zh-CN',
        // audioOnlyMode: false,
        // audioPosterMode: true,
        playbackRates: [0.75, 1.0, 1.25, 1.5, 2.0], // 播放速度
        aspectRatio: '16:9',
        fluid: true,//  当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        notSupportedMessage: '此视频暂无法播放,请刷新后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controls: true, // 下面的控制按钮
        bigPlayButton: false,
        controlBar: {
          playToggle: false, // 隐藏播放按钮
          timeDivider: false, // 时间分割线
          durationDisplay: false, // 总时间
          remainingTimeDisplay: false, // 剩余播放时间
          progressControl: true, // 进度条
          fullscreenToggle: false // 全屏按钮
        },
        // poster: 'https://ouch-cdn2.icons8.com/GUoFsq36flWB1EAwPTrM7Nj9t9c40PJY7s5OjeO7omM/rs:fit:256:248/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9zdmcvMzkv/OWI1OGE0YmEtZWU4/Ny00MmEwLWE5MzIt/ODJmOTIzZmE0OGVh/LnN2Zw.png', // 视频/音频封面
        sources: [{
          type: 'video/mp4',
          // mp4
          src: ''
          // webm
          // src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
        }],
        userActions: {
          click: false
        }
      }

Refer to https://videojs.com/guides/options/#userActions

Reproduction

<template>
  <video-player
    ref="videoPlayer"
    :options="playerOptions"
    :playsinline="false"
    @play="onPlayerPlay($event)"
    @pause="onPlayerPause($event)"
    @ended="onPlayerEnded($event)"
    @loadeddata="onPlayerLoadeddata($event)"
    @waiting="onPlayerWaiting($event)"
    @playing="onPlayerPlaying($event)"
    @timeupdate="onPlayerTimeupdate($event)"
    @canplay="onPlayerCanplay($event)"
    @canplaythrough="onPlayerCanplaythrough($event)"
    @ready="playerReadied"
    @statechanged="playerStateChanged($event)"
  />
</template>

<script>
import functionNames from '@/store/functionNames'
export default {
  name: 'videoComponent',
  props: {
    comSource: {
      type: Object,
      default: null,
      require: true
    },
  },
  data() {
    return {
      isPlayEnd: false,
      // videojs options
      playerOptions: {
        autoplay: false,
        muted: false,
        preload: 'auto',
        language: 'zh-CN',
        // audioOnlyMode: false,
        // audioPosterMode: true,
        playbackRates: [0.75, 1.0, 1.25, 1.5, 2.0], // 播放速度
        aspectRatio: '16:9',
        fluid: true,//  当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        notSupportedMessage: '此视频暂无法播放,请刷新后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controls: true, // 下面的控制按钮
        bigPlayButton: false,
        controlBar: {
          playToggle: false, // 隐藏播放按钮
          timeDivider: false, // 时间分割线
          durationDisplay: false, // 总时间
          remainingTimeDisplay: false, // 剩余播放时间
          progressControl: true, // 进度条
          fullscreenToggle: false // 全屏按钮
        },
        // poster: '', // 视频/音频封面
        sources: [{
          type: 'video/mp4',
          src: ''
        }],
        userActions: {
          click: false
        }
      }
    }
  }

</script>

System Info

--system Windows 10 
--npmPackages      "vue-video-player": "^5.0.2",
--browsers edge 108.0.1462.76

Used Package Manager

npm

Validations