video.js
video.js copied to clipboard
userActions click true not working on mobile devices
I have noticed that the videos do not recognise a click when viewed on a mobile device, even with controls set to true.
To emulate this, simply go to video.js on a mobile device, click to play the main video and then try to pause or resume the video by clicking on the video body (i.e not on the controls). From what I understand, the click action (or "tap" in this case) should toggle the play state.
Any suggestions?
My full code:
<video
id="my-video2"
class="video-js"
width="175px"
height="auto"
>
<source src="img/20240628_151819.mp4" type="video/mp4">
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
$(document).ready(function() {
var player1 = videojs('my-video1', {
controls: true,
autoplay: false,
preload: true,
userActions: {
click: true
}
});
});
Thanks / Luke
👋 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.
typically, I found a similar issue after posting mine and the solution posted there: https://github.com/videojs/video.js/issues/6956#issuecomment-1660886944, works very well.
This is by design, touch events are handled differently and don't reach the userActions as they're used to toggle the display of the control bar.
ok thanks @mister-ben , I didn't realise that was the default action on touch. I have come up with a workaround, in the linked thread above, that works for people like me that prefer a more youtube-esque interaction.