CODEWITHSUNDEEP
javascripthtmlarraysfor-loop
F.Hand
F.Hand

Reputation: 83

Iterate using Array.forEach in JavaScript

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>

Upvotes: 0

Views: 231

Answers (2)

markmoxx
markmoxx

Reputation: 1532

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>

Upvotes: 0

Happy Machine
Happy Machine

Reputation: 1163

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

Upvotes: 1

Related Questions