multiple videojs players on same page with mouse over unmute/mute function

57 Views Asked by At

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.

0

There are 0 best solutions below