Javascript 如何在单页网站上随机更新背景视频？

我目前正在使用Bulma框架进行一个单页网站项目，我的网站目前有一个背景视频，当用户在网站上滚动时播放。然而，我想可能会添加一些更多的视频，并有一个不同的随机播放刷新。我发现JS代码可以工作，但它从互联网上提取视频，而我的则保存在一个文件夹中；当我输入文件名时，它不起作用

这是一开始对我有用的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代码完成了它的工作，那么有没有办法使用我保存在文件夹中的文件让它工作呢？

阅读注释。我想您的url没有加载，因为您提供了扩展。例如：

images/i\u know\u like.mp4

将成为

images/i\u like.mp4.mp4

或

images/i\u know\u 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);

---

也许您应该使用完整路径：

    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)

---

文件夹？它与您现在的URL有什么不同？它不是指向另一个站点的url，而是指向您站点上文件的url。@epascarello该JS代码中的视频不是我的，它们来自我在网上找到的代码。我确实尝试过在JS中更改URL，但对我来说没有效果。所以var videoStorage=[“images/i_know_like.mp4”等“不知道你是如何更改URL的？@epascarello var videoStorage=[“images/i_know_like.mp4”等]我忘了提到的一点是，我在刷新时也会随机化图像，所以当我尝试在JS中实现代码时，图像消失了。我现在在单独的文件夹中有图像和视频，所以现在要处理的主要问题是随机图像和视频之间的冲突。但是，视频在刷新时并没有随机化t、 您可以使用regExp检测扩展，并在适当时创建图像或视频元素。