userAction.click doesn't work

[strange-qwq]

Description

I set the execution function of the userActions.click event in the options, but it does not execute after I click the video box, how can I solve it?

In addition, I tried to add an error event to the ready function before, because I needed to deal with it after it failed to play, but it didn't take effect, so I can only change it to a waiting event now, however, It also will be executed when the network environment is poor. Is there any other event that can be replaced?

Reduced test case

No response

Steps to reproduce

this is a vite 3.0.3 project 1.create project 2.add component

<template>
    <div class="player-video overflow-x-hidden">
        <video :id="id" class="player-video-box">
            <source :src="url" type="application/x-mpegURL" />
        </video>
    </div>
</template>
<script>
import videojs from 'video.js';
import { onUnmounted, reactive, toRefs, watch } from 'vue';

export default {
    props: {
        isPlaying: {
            type: Boolean,
            default: false
        },
        id: {
            type: String,
            default: `player-video-box-${new Date().getTime()}`
        },
        height: {
            type: [Number, String],
            required: true
        },
        url: {
            type: String,
            required: true
        }
    },
    setup(props, { emit }) {
        const data = reactive({
            isMounted: false,
            player: null
        });
        watch(() => props.height, () => {
            if (props.height > 0)
                if (!data.isMounted) methods.setVideo(props.id, props.height);
                else data.player.height(props.height);
        });
        onUnmounted(() => {
            if(data.player) data.player.dispose();
        });
        const methods = {
            setVideo(id, height) {
                console.log(id);
                data.isMounted = true;
                data.player = videojs(id, {
                    height: height,
                    loop: true,
                    autoplay: true,
                    controls: false,
                    preload: 'auto',
                    notSupportedMessage: 'Play failed, please check your network connection and try again later',
                    userActions: {
                        doubleClick: false,
                        click: function(_) {
                            console.log('click', this);
                            if (this.isFullscreen()) this.exitFullscreen();
                            else this.requestFullscreen();
                        }
                    }
                }, function () {
                    this.on('playing', function () {
                        console.log('onplaying');
                        emit('update:isPlaying', true);
                    });
                    this.on('waiting', function () {
                        console.log('onwaiting');
                        emit('update:isPlaying', false);
                    });
                    this.on('error', function (e) {
                        console.log('onerror', e);
                    });
                });
            }
        };
        return { ...toRefs(data), ...methods, ...props };
    }
};
</script>
<style lang="scss" scoped>
.player-video {
  position: relative;
}

:deep(.vjs-control-text) {
  display: none;
}
</style>

3.using components

<template>
    <div class="sentry-video">
        <div
                v-for="(key, index) of liveList"
                :key="index"
        >
            <PlayerVideo v-model:isPlaying="key.isPlaying"
                         :id="`sentry-video-item-${index}`"
                         :url="key.url"
                         :height="videoHeight"
              />
        </div>
    </div>
</template>
...

Errors

nothing

What version of Video.js are you using?

7.20.2

Video.js plugins used.

No response

What browser(s) including version(s) does this occur with?

Microsoft Edge 105.0.1343.4 dev (x64)

What OS(es) and version(s) does this occur with?

Windows 11

[welcome[bot]]

👋 Thanks for opening your first issue here! 👋

If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

[gkatsev]

Seems to be working here https://videojs-preview.netlify.app/sandbox/useraction-click

Can you provide a live minimal test page for this? For example, codesandbox or codepen?

[strange-qwq]

Seems to be working here https://videojs-preview.netlify.app/sandbox/useraction-click

Can you provide a live minimal test page for this? For example, codesandbox or codepen?

https://codesandbox.io/s/video-js-issues-project-dvqzxc?file=/src/components/HelloWorld.vue

[gkatsev]

Thanks! Looks like the reason is that controls are turned off. Clicking on the video isn't available when controls: false is set. My first thought is that changing this to make non-default actions work could potentially break folks.

You should be able to add your own click handler, though, as we don't stopPropagation or preventDefault on the event.

[strange-qwq]

Thanks! Looks like the reason is that controls are turned off. Clicking on the video isn't available when controls: false is set. My first thought is that changing this to make non-default actions work could potentially break folks.

You should be able to add your own click handler, though, as we don't stopPropagation or preventDefault on the event.

OK, so that's the design, not issues?

[gkatsev]

Yes, not handling the click event when controls are false is expected behavior.

[strange-qwq]

Yes, not handling the click event when controls are false is expected behavior.

thanks, It is recommended to update this description in the document

[gkatsev]

Made a PR to the guides here https://github.com/videojs/videojs.com/pull/157