Question

我想对具有相同类名的每个视频使用此Fluid Player函数。我听说可以使用Array.forEach()方法来做到这一点，但是我不知道如何做到。

我也尝试过使用普通的for循环，并在每个数组元素上执行Fluid Player函数，但这没有用。

我在做什么错了？

<!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>

Answer 1

您的问题的措辞有点令人困惑

“我想对每个具有相同类名的视频使用此fluidplayer函数”

用每个类名做什么？

就forEach而言。

forEach是一种带有函数的方法，您可以向其传递一个函数以在目标数组的迭代中运行，也可以包括一个箭头函数或匿名函数，如下所示：

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

//如果array = [1,2,3,4]，则它将在单独的行上返回1 2 3和4。

'array'数组的每个元素都将被迭代，并且每个元素将被调用一次，然后将该元素作为'classname'传递到函数中，我们可以在其中进行任何需要的操作。您的数组称为“数组”，因此我们使用每个JavaScript数组上存在的原型方法forEach。我们不需要使用数组。尽管有一些方法可以这样工作（例如，Array.isArray（array）将返回true）

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

Answer 2

您要为Fluid Player使用的所有视频都具有相同的ID。除了不好的做法（元素ID应该是唯一的）外，Fluid Player仅使用ID，因此这些ID需要不同。您还使用了不存在的getElementByClassName()，则需要使用getElementsByClassName()。

getElementsByClassName()实际上并不返回数组，而是返回HTMLCollection，这并不完全相同。您想改用for x of y。

尝试一下：

<!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>

在JavaScript中使用Array.forEach进行迭代

2 个答案: