Итерировать с использованием Array.forEach в JavaScript
Я хочу использовать эту функцию 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>в массиве, который я сделал с помощью функции getElementByClassName
Немного непонятно, о чем вы спрашиваете, может, поможет документация по для каждого ..?
Так возможно ли это сделать так, как я сейчас использую?
Можете ли вы объяснить, какое действие вы хотите выполнять на каждой итерации цикла?
Да, это возможно, но мы не знаем, что вы хотите делать в итерационном цикле.
Я хочу также выполнять функцию Fluidplayer для каждого видео, чтобы воспроизводить их в настраиваемом видеоплеере. Имя класса видео будет храниться в массиве, который я создал с помощью getElementByClassName.
Ваш текущий вызов fluidPlayer(, похоже, не принимает никаких аргументов, связанных с элементами, хотя ...
Затем вы передаете ссылку на эту функцию: array.forEach(fluidplayer); Обратите внимание, маленькая буква «a» в «массиве», т.е. вы должны выполнить метод forEach для самого объекта, а не с помощью функции конструктора массива. Кроме того, еще раз, getElementsByClassName не возвращает массив, он возвращает объект.
Насколько я знаю, я могу активировать функцию fluidPlayer (), указав идентификатор видео, который я установил (в данном случае я использую «short»). Он активирует только одно видео для воспроизведения в пользовательском плеере, а остальные воспроизводятся в глухом проигрывателе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Формулировка вашего вопроса немного сбивает с толку
«Я хочу использовать эту функцию Fluidplayer для каждого видео с одним и тем же именем класса»
что делать с каждым именем класса?
с точки зрения forEach.
forEach - это метод, который принимает функцию, вы можете либо передать ему функцию для выполнения на итерациях целевого массива, либо вы можете включить стрелочную функцию или анонимную функцию, например:
array.forEach(classname => console.info(classname))
// если array = [1,2,3,4], тогда это вернет 1, 2, 3 и 4 в отдельных строках.
Каждый элемент массива array будет повторяться, и функция будет вызываться один раз для каждого элемента, передавая элемент в функцию как classname, откуда мы можем делать с ним все, что захотим. Ваш массив называется «массив», поэтому мы используем метод прототипа forEach, который существует в каждом массиве javascript. Нам не нужно использовать массив. хотя есть некоторые методы, которые работают таким образом (например, Array.isArray (array) вернет true)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
У вас одинаковый идентификатор для всех видео, которые вы хотите использовать с 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>
Я получил это сообщение в журнале консоли Uncaught TypeError: vidArray.forEach не является функцией
Можете ли вы попробовать еще раз с обновленным именем класса videoClass в getElementsByClassName()?
Извините, но я не понимаю, что вы имеете в виду. Я использую то же имя класса в getElementsByClassName (), что и в тегах HTML для видео.
Ах, моя ошибка, getElementsByClassName не возвращает массив, он возвращает HTMLCollection, что не то же самое, что точно. Вместо этого вы хотите использовать let x of y - я обновлю свой ответ.
Хорошо, теперь он работает. Большое спасибо за вашу помощь :)
@ F.Hand Нет проблем. Просто примечание - атрибуты ID никогда не должны быть одинаковыми во всем документе, поскольку они обычно используются как идентификатор для определенного элемента.
Эээ ... можешь сказать нам, что ты хочешь сделать в итерации? Кроме того,
getElementByClassNameне возвращает массив, он возвращает объект HTMLCollection. Хотя в современных браузерах этот объект имеет методforEach.