Iterate using Array.forEach in JavaScript

Question

I want to use this Fluid Player function for each video with the same class name. I heard that I can do it using the Array.forEach() method, but I have no idea how.

I have also tried using a normal for loop, and executing the Fluid Player function on every array element but it didn't work.

What am I doing wrong?

<!DOCTYPE html>
<html>

<body>
	 <link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
	<script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
	<video class = "classname" id="short" height="225" loop  controls> 
  			<source src="deja vu.mp4" type="video/mp4"/>
	</video>
	<video class = "classname" id="short" height="225" loop  controls> 
  			<source src="deja vu.mp4" type="video/mp4"/>
	</video>
	<video class = "classname" id="short" height="225" loop  controls> 
  			<source src="deja vu.mp4" type="video/mp4"/>
	</video>

</body>

<script type="text/javascript">
var array = document.getElementByClassName('classname');
Array.forEach(); 
</script>

<script type="text/javascript">
	 var myFP = fluidPlayer(
        'short',
        {
            layoutControls: {
    fillToContainer: false,
    primaryColor: false,
    posterImage: false,
    autoPlay: false,
    playButtonShowing: true,
    playPauseAnimation: true,
    mute: false,
    logo: {
      imageUrl: null,
      position: 'top left',
      clickUrl: null,
      opacity: 1,
      mouseOverImageUrl: null,
      imageMargin: '2px',
      hideWithControls: false,
      showOverAds: false
    },
    htmlOnPauseBlock: {
      html: null,
      height: null,
      width: null
    },
    allowDownload: false,
    allowTheatre: false,
    playbackRateEnabled: false,
    controlBar: {
      autoHide: true,
      autoHideTimeout: 1,
      animated: false
    },
            },
            vastOptions: {
            }
        }
    );
</script>
</html>

Ehh ... can you tell us what you want to do in the iteration? Also, getElementByClassName doesn't return an array, it returns a HTMLCollection object. Though that object has forEach method in modern browsers. — Teemu
– Teemu, Commented Dec 28, 2018 at 20:44
It's a bit unclear what you're asking, maybe documentation of forEach helps ..? — Teemu
– Teemu, Commented Dec 28, 2018 at 20:48
Your current fluidPlayer( call doesn't seem to take any arguments related to elements, though... — CertainPerformance
– CertainPerformance, Commented Dec 28, 2018 at 20:55

Happy Machine · Accepted Answer · 2018-12-28 20:53:21Z

The wording of your question is a bit confusing

"I want to use this fluidplayer function to every video with the same class name"

to do what with every classname?

in terms of forEach.

forEach is a method that takes a function, you can either pass it a function to run on the iterations of the target array or you can include an arrow function or anonymous function like this:

array.forEach(classname => console.log(classname))

// if array = [1,2,3,4] then this will return 1 2 3 and 4 on seperate lines.

Each element of the 'array' array will be iterated over and the function will be called once for each element, passing the element into the function as 'classname' from where we can do whatever we want with it. Your array is called 'array' so we are using the prototype method forEach that exists on every javascript array. We don't need to use Array. although there are some methods that work this way (Array.isArray(array) for example would return true)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

markmoxx · Accepted Answer · 2018-12-28 21:24:48Z

0

You've got the same ID for all videos which you want to use with Fluid Player. Aside from being bad practice (element IDs should be unique), Fluid Player only works with the ID so these IDs need to be different. You're also using the non-existant getElementByClassName(), you need to use getElementsByClassName().

getElementsByClassName() doesn't actually return an array, it returns a HTMLCollection, which isn't exactly the same. You want to use for x of y instead.

Try this:

<!DOCTYPE html>
<html>

<body>
     <link rel="stylesheet" href="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.css" type="text/css"/>
    <script src="https://cdn.fluidplayer.com/v2/current/fluidplayer.min.js"></script>
    <video class="videoClass" id="short1" height="225" loop  controls> 
        <source src="deja vu.mp4" type="video/mp4"/>
    </video>
    <video class="videoClass" id="short2" height="225" loop  controls> 
        <source src="deja vu.mp4" type="video/mp4"/>
    </video>
    <video class="videoClass" id="short3" height="225" loop  controls> 
        <source src="deja vu.mp4" type="video/mp4"/>
    </video>
</body>

<script type="text/javascript">
var vidCollection = document.getElementsByClassName('videoClass');
for (let vidElement of vidCollection) {
    fluidPlayer(
        vidElement.id,
        {
            layoutControls: {
                fillToContainer: false,
                primaryColor: false,
                posterImage: false,
                autoPlay: false,
                playButtonShowing: true,
                playPauseAnimation: true,
                mute: false,
                logo: {
                  imageUrl: null,
                  position: 'top left',
                  clickUrl: null,
                  opacity: 1,
                  mouseOverImageUrl: null,
                  imageMargin: '2px',
                  hideWithControls: false,
                  showOverAds: false
                },
                htmlOnPauseBlock: {
                  html: null,
                  height: null,
                  width: null
                },
                allowDownload: false,
                allowTheatre: false,
                playbackRateEnabled: false,
                controlBar: {
                  autoHide: true,
                  autoHideTimeout: 1,
                  animated: false
                },
            },
            vastOptions: {}
        }
    );
}
</script>
</html>

edited Dec 28, 2018 at 21:24

answered Dec 28, 2018 at 21:00

markmoxx

1,5521 gold badge11 silver badges23 bronze badges

6 Comments

F.Hand Over a year ago

I got this king of message in console log Uncaught TypeError: vidArray.forEach is not a function

markmoxx Over a year ago

Can you try it again with the updated class name of videoClass in getElementsByClassName()?

F.Hand Over a year ago

Sorry but i cant understand what you mean by it. Im using same class name in getElementsByClassName() as in video html tags.

markmoxx Over a year ago

Ah - my mistake, getElementsByClassName doesn't return an array, it returns a HTMLCollection, which isn't exactly the same. You want to use let x of y instead - I'll update my answer.

F.Hand Over a year ago

Nice, it's working now. Thanks you very nuch for your help :)

|

Collectives™ on Stack Overflow

Iterate using Array.forEach in JavaScript

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related