I am currently utilizing video.js to develop a player that is compatible with various devices. One crucial feature I have included is a custom "return to menu" button located in the top right corner of the video player. The challenge I am facing is dynamically adding or removing the vjs-fade-out class to this button based on user interactions, such as mouseover, mouseout, tap, play, pause, and more. However, my current implementation has some bugs...
The HTML structure looks like this:
<div class="menu-btn">
<a href="../index.html">
<img src="../img/back.svg" width="50">
</a>
</div>
<video id="myPlayer" class="video-js vjs-sublime-skin" width="1024px" height="768px" controls autoplay preload data-setup='{"nativeControlsForTouch": false}'>
<source src="../video/test.mp4" type='video/mp4' />
<track class="caption" kind="captions" src="../video/test.vtt" type="text/plain" srclang="en" label="English" default />
</video>
The corresponding CSS code is as follows:
.menu-btn {
z-index: 1000;
position: absolute;
top: 10px;
left: 10px;
}
Furthermore, here is the jQuery script responsible for handling user interactions:
videojs("myPlayer").on('mouseout', function() {
$(".menu-btn").addClass('vjs-fade-out');
});
videojs("myPlayer").on('mouseover', function() {
$(".menu-btn").removeClass('vjs-fade-out');
});
videojs("myPlayer").on('tap', function() {
if (videojs("myPlayer").userActive()) {
$(".menu-btn").removeClass('vjs-fade-out');
} else {
//do nothing
}
}, 1500);
My aim is to simplify the script using the userActive method as shown below:
$(document).ready(function() {
if (videojs("myPlayer").userActive()) {
$(".menu-btn").removeClass('vjs-fade-out');
} else {
$(".menu-btn").addClass('vjs-fade-out');
}
});