Как можно рандомизировать фоновое видео на refre sh на веб-сайте на одну страницу? - PullRequest
Новая
       14

Как можно рандомизировать фоновое видео на refre sh на веб-сайте на одну страницу?

0 голосов
/ 05 марта 2020

В настоящее время я работаю над одностраничным проектом веб-сайта с использованием среды Bulma, и на моем сайте в настоящее время есть одно фоновое видео, которое воспроизводится, когда пользователь прокручивает сайт. Тем не менее, я хотел бы добавить еще несколько видео и воспроизводить другое случайно по refre sh. Я нашел JS код, который работает, но он извлекает видео из inte rnet, тогда как мои сохраняются в папке; когда я вставляю имена файлов, это не работает.

Вот код JS, который работал для меня сначала 

var videoStorage = [ 
'//media.w3.org/2010/05/sintel/trailer',
'//techslides.com/demos/sample-videos/small',
'//fat.gfycat.com/DazzlingCompleteAnkole',
'//zippy.gfycat.com/HeavyPlumpIvorybilledwoodpecker'
],
    video = document.querySelector('video'),
    // choose one random url from our storage as the active video
    activeVideoUrl = videoStorage[Math.round(Math.random() * (videoStorage.length - 1))];        

// check which file extension your browser can play and set the video source accordingly
if(video.canPlayType('video/webm')) {
    video.setAttribute('src', activeVideoUrl + '.webm');
} else if(video.canPlayType('video/mp4')) {
    video.setAttribute('src', activeVideoUrl + '.mp4');
}

Вот HTML, который у меня есть для одного видео до сих пор 

<section id="home" class="hero is-fullheight-with-navbar video">
    <div class="hero-video">
        <video id="bgvid" playsinline autoplay muted loop>
            <source src="images/i_know_what_i_like.mp4" type="video/mp4">
        </video>
    </div>

Поскольку этот код JS сделал свою работу, есть ли способ заставить его работать, используя файлы, которые я сохранил в папке?

Ответы [ 2 ]

0 голосов
/ 06 марта 2020

Возможно, вам следует использовать полный путь: 

    var videoStorage = [ 
     'https://example.com/videso/test1.mp4',
     'https://example.com/videso/test2.mp4',
     'https://example.com/videso/test3.mp4',
     'https://example.com/videso/test4.mp4',
     'https://example.com/videso/test5.mp4'
    ],
        video = document.querySelector('video'),
        // choose one random url from our storage as the active video
        activeVideoUrl = videoStorage[Math.round(Math.random() * (videoStorage.length - 1))];        

  video.setAttribute('src', activeVideoUrl)
0 голосов
/ 06 марта 2020

Читайте заметки. Я ожидаю, что ваш URL не загружается, потому что вы предоставляете расширение. Например: images/i_know_what_i_like.mp4 станет images/i_know_what_i_like.mp4.mp4 или images/i_know_what_i_like.mp4.webp, которые, вероятно, не являются существующими URL.

Одним из решений было бы не добавлять расширение с JS. 

// NOTE: make sure these are valid working urls.
var videoStorage = [ 
'images/i_know_what_i_like.mp4'
];
let video = document.querySelector('video');
// choose one random url from our storage as the active video
// NOTE: you don't want to use Math.round() here, use Math.floor() instead
let activeVideoUrl = videoStorage[Math.floor(Math.random() * videoStorage.length];        

// NOTE: you are providing the extension so no need to add it in JS
video.setAttribute('src', activeVideoUrl);
...