时间戳

首页 > 解决方案 > 使用 Javascript 在页面加载时随机化背景视频

javascript - 使用 Javascript 在页面加载时随机化背景视频

问题描述

我想在页面加载时随机加载视频。我在本地存储了三个视频，我想在它们之间交替，但除了第一个播放之外，似乎找不到其他任何视频。我对 Javascript 非常陌生，对需要修复的内容非常迷茫……感谢您的帮助！

<script type="text/javascript" src="jquery-3.3.1.js"></script>
  <script type="text/javascript">
    var videoStorage = [
      '/vid/background-video-1.mp4',
      '/vid/background-video-2.mp4',
      '/vid/background-video-3.mp4'
    ],
      video = document.querySelector('video'),
      activeVideoUrl = videoStorage[Math.round(Math.random() * (videoStorage.length - 1))];
  </script>
</head>

<body>
  <div class="overlay">
    <video autoplay muted loop id="background-video">
      <source src="/vid/background-video-1.mp4" type="video/mp4">
      <source src="/vid/background-video-2.mp4" type="video/mp4">
      <source src="/vid/background-video-3.mp4" type="video/mp4">
    </video></div>

标签： javascript

解决方案

您activeVideoUrl只在页面加载时设置一次。尝试使用setInterval更新 的值activeVideoUrl。

推荐阅读