Блог

Главная - Вопросы по программированию - JS и HTML — как я могу встроить случайное видео?

JS и HTML — как я могу встроить случайное видео?

#javascript #html

#javascript #HTML

Вопрос:

Я хочу воспроизвести случайное видео на своем веб-сайте.Но я не знаю, как я могу это сделать, потому что я новичок в HTML и JSS. Я искал простой способ сделать это, но я не могу найти решение.

Это мой код на веб-сайте, где должны появляться разные видео:

 <div class="bg-video-wrapper" id="video-background-1">
     <div class="bg-video-overlay bg-dark-alfa-50"></div>
          </div>

И это мой код для «video-background-1»:

 var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
        "align": "centerXY",
        "width": 1920,
        "height": 1080,
        "path": "assets/videos/",
        "filename": "trailer3",
        "types": ["mp4", "ogg", "webm"],
        "autoplay": true,
        "loop": true

Можно ли добавить имя файла в «trailer3» с запятой или что-то в этом роде? Есть ли простой способ добавить видео, и оно выбирается случайным образом, какое из них воспроизводится?

Комментарии:

1. Вы можете использовать этот код, если я понимаю: ["file1", "file2", "file3"][Math.floor(Math.random()*3)] где file1 file2 и file3 — это имена файлов, а 3 — длина массива файлов (плюс один, потому что массивы js индексируются на 0)

Ответ №1:

Сколько у вас видео? Вы могли бы создать хэш-карту с помощью числового ключа <int, путь к видео>

затем используйте функцию случайного числа, например:

 Math.floor(Math.random() * 11); //gets 0-10

и используйте это число в качестве ключа для получения имени файла из hashmap для использования в запросе…

Комментарии:

1. могу ли я использовать это в «»filename»: «trailer3»? или где я должен использовать его с моими текущими настройками для видео?

Ответ №2:

Немного опираясь на ответ @ItGrunt (поддержите его тоже, если вы нашли мой полезным):

Вам нужно будет реализовать что-то вроде этого:

 var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
        "align": "centerXY",
        "width": 1920,
        "height": 1080,
        "path": "assets/videos/",
        "filename": ["trailer1", "trailer2", "trailer3"][Math.floor(Math.random()*3)],
        "types": ["mp4", "ogg", "webm"],
        "autoplay": true,
        "loop": true

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

 function random(a) {
  return a[Math.floor(Math.random()*(a.length))]
}
var videobackground_1 = new $.backgroundVideo($('#video-background-1'), {
        "align": "centerXY",
        "width": 1920,
        "height": 1080,
        "path": "assets/videos/",
        "filename": random(["trailer1", "trailer2", "trailer3"]),
        "types": ["mp4", "ogg", "webm"],
        "autoplay": true,
        "loop": true