I currently have a page where I am trying to get 4 video players to auto-play muted video and then unmute the video when I mouse over them. I was successful in doing that for the first player.
<video id="live_stream" class="video-js vjs-theme-fantasy vjs-16-9 vjs-big-play-centered" controls
preferFullWindow="true" muted preload="auto" autoplay="true" width="" height="720"
poster="/images/RDMCHANNEL1.jpg" data-setup='{}'>
<source src="/dirka/evil1/index.m3u8" type="application/x-mpegURL">
<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' rel="noopener noreferrer">supports
HTML5
video</a>
</p>
</video>
<script>
// Targeting video element
let clip = document.querySelector(".video-js")
/* Applying mouseover event on video clip
and then we call play() function to play
the video when the mouse is over the video */
clip.addEventListener("mouseover", function (e) {
player.muted(false);
})
/* Applying mouseout event on video clip
and then we call pause() function to stop
the video when the mouse is out the video */
clip.addEventListener("mouseout", function (e) {
player.muted(true);
})
</script>
When I add this script on the 2nd video player. I get an error "Error object: SyntaxError: Identifier 'clip' has already been declared" Which I understand because the first player is the declared player. My question is, how can I get this script to target the video id and not the class?
I am learning as I go and have no training at all. Thanks for any help.
I have tried various ways to call the video id "live_stream" on the script with no success. I have been working on this particular issue for a few days now and figured I would reach out to see if anyone can help.