1

I am working on my portfolio site to make it more ADA compliant when I noticed a lot of redundant code that I want to optimize. I have seven videos on the screen and each have a onmouseover and onmouseout event attributes. I wanted to create a JavaScript that just assigned these event handlers to all video tags on the screen in one function run on startup.

This worked using html code 

 <video class="nlm-marque-video"  id="aerialVideo">
     <source src="videos/aerial-view-of-san-diego.mp4" 
     onmouseover = "playVid(this);"
     onmouseout ="pauseVid(this);"
     type="video/mp4">
 </video>

<script>
/*
* get reference of all video tags on page
* set the video attributes to same defaults
* start videos automatically the first time with muted
 */
   function videoEnhance(){
        let vid = document.getElementsByTagName("video");
        for (i=0;i<vid.length; i++) {
            vid[i].autoplay = true;
            vid[i].muted = true;
            vid[i].controls = true;
            vid[i].addEventListener("onmouseover", playVid(this));
            vid[i].addEventListener("onmouseout", pauseVid(this));
        }
    }
   /*
   * function to play video event
    */
    function playVid(vidObj) {
       vidObj.play();
       console.log("video is playing");
   }


/*
* function to pause video on event
 */
   function pauseVid(vidObj) {
       vidObj.pause();
       console.log("video is paused");
   }

</script>

index.php:346 Uncaught TypeError: vidObj.play is not a function
    at playVid (index.php:346)
    at videoEnhance (index.php:338)
    at onload (index.php:24)
playVid @ index.php:346
videoEnhance @ index.php:338
onload @ index.php:24

The videos runs, but do not respond to the mouseover and mouseout events.

Bruno Gois
  • 80
  • 2
  • 11
Norman
  • 9
  • 2

1 Answers1

0

I think that your simplest solution would probably be to just use the event to play and pause things. 


 function videoEnhance(){
        let vid = document.getElementsByTagName("video");
        for (i=0;i<vid.length; i++) {
            vid[i].autoplay = true;
            vid[i].muted = true;
            vid[i].controls = true;
            vid[i].addEventListener("mouseover", playVid); //Don't pass in param here.
            vid[i].addEventListener("mouseout", pauseVid); //Or here
        }

   function playVid(e) {
       e.target.play(); //use the event
       console.log("video is playing");
   }

   function pauseVid(e) {
       e.target.pause(); //use the event
       console.log("video is paused");
   }
    }
Ryan
  • 150
  • 6
  • what does the "e" stand for element? and is this a reference to the video object itself? ("this") thank you so much for getting back to me so quickly. – Norman Sep 06 '19 at 17:36
  • [This SO Question](https://stackoverflow.com/questions/10323392/in-javascript-jquery-what-does-e-mean) covers the topic in-depth. And yes, in this case `e.target` will be the video element. – Ryan Sep 06 '19 at 17:44
  • read some doc about passing a object instead of a function call so I get the 2nd parameter being passed with no "()". No more console errors but the functions are not being called now when the event occurs – Norman Sep 06 '19 at 18:04
  • There _are_ other methods you can use, but in my personal opinion they are all more complex than simply using the event. If it were me, I would just use the example above unless I had a compelling reason/specific use case that justified making things more complex. – Ryan Sep 06 '19 at 18:26