Open Tsingkai opened 1 year ago
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.
userActions.click = 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: '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 } }
<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 Windows 10 --npmPackages "vue-video-player": "^5.0.2", --browsers edge 108.0.1462.76
npm
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.Refer to https://videojs.com/guides/options/#userActions
Reproduction
System Info
Used Package Manager
npm
Validations