Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The userAtions.click does not work #451

Open
4 tasks done
Tsingkai opened this issue Jan 10, 2023 · 0 comments
Open
4 tasks done

The userAtions.click does not work #451

Tsingkai opened this issue Jan 10, 2023 · 0 comments

Comments

@Tsingkai
Copy link

Tsingkai commented Jan 10, 2023

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

  • Read the the documentation in detail.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
  • The provided reproduction is a minimal reproducible example of the bug.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant