Итерация с использованием Array.forEach в JavaScript - PullRequest
Новая
       0

Итерация с использованием Array.forEach в JavaScript

0 голосов
/ 28 декабря 2018

Я хочу использовать эту функцию 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>

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

У вас один и тот же идентификатор для всех видео, которые вы хотите использовать с Fluid Player.Помимо плохой практики (идентификаторы элементов должны быть уникальными), Fluid Player работает только с идентификатором, поэтому эти идентификаторы должны отличаться.Вы также используете несуществующий 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>
0 голосов
/ 28 декабря 2018

Формулировка вашего вопроса немного сбивает с толку

"Я хочу использовать эту функцию Fluidplayer для каждого видео с одинаковым именем класса"

, чтобы делать то, чтос каждым именем класса?

с точки зрения forEach.

forEach - это метод, который принимает функцию, вы можете либо передать ей функцию для запуска на итерациях целевого массива, либо включить функцию стрелки или анонимную функцию, например: 

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

// если массив = [1,2,3,4], то он вернет 1 2 3 и 4 в отдельных строках.

Каждый элемент массива 'array' будет повторяться, иФункция будет вызываться один раз для каждого элемента, передавая элемент в функцию как «имя класса», откуда мы можем делать с ним все, что захотим.Ваш массив называется «массив», поэтому мы используем метод-прототип forEach, который существует в каждом массиве javascript.Нам не нужно использовать массив.хотя есть некоторые методы, которые работают таким образом (например, Array.isArray (array) вернет true)

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...