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

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

javascript

使用Javascript在页面加载时随机化背景视频,javascript,Javascript,我想在页面加载中随机加载视频。我有三个本地存储的视频，我想在它们之间切换，但除了第一个视频外，似乎没有其他视频可以播放。我对Javascript非常陌生，对需要修复的内容非常迷茫……感谢您的帮助 <script type="text/javascript" src="jquery-3.3.1.js"></script> <script type="text/javascript"> var

我想在页面加载中随机加载视频。我有三个本地存储的视频，我想在它们之间切换，但除了第一个视频外，似乎没有其他视频可以播放。我对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>


var视频存储=[
“/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））；

您的

activeVideoUrl

仅在页面加载时设置一次。尝试使用

setInterval

更新

activeVideoUrl

的值您必须从此

activeVideoUrl

随机选择

url

设置

src

，您可以设置视频

类型

和

播放

你可以试试这个

var视频存储=[
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4'
],
视频=document.querySelector（“#背景视频”）；
//页面加载时的默认播放
随机播放（）；
//随机播放函数
函数随机播放（）{
让activeVideoUrl=视频存储[
Math.round（Math.random（）*（videoStorage.length-1））
];
video.type=“视频/mp4”；
video.src=activeVideoUrl；
video.play（）；
}

随机播放

需要添加

文档。addEventListener（“DOMContentLoaded”，函数（）

document.addEventListener（“DOMContentLoaded”，函数（）{
var视频存储=[
“/vid/background-video-1.mp4”，
“/vid/background-video-2.mp4”，
“/vid/background-video-3.mp4”
],
视频=document.querySelector（“#背景视频”），
activeVideoUrl=视频存储[
Math.floor（Math.random（）*（videoStorage.length））
];
video.type=“视频/mp4”；
video.src=activeVideoUrl；
});
```

删除源HTML元素并通过JS设置

src

属性？这很有帮助，但我想在页面加载时加载并播放视频，因此我不确定是否需要

randomPlay（）

。好的函数是即插即用的，很方便，或者您可以将该代码放在函数的外部。

    document.addEventListener("DOMContentLoaded", function () {
      var videoStorage = [
        '/vid/background-video-1.mp4',
        '/vid/background-video-2.mp4',
        '/vid/background-video-3.mp4'
      ],
        video = document.querySelector('#background-video'),
        activeVideoUrl = videoStorage[
          Math.floor(Math.random() * (videoStorage.length))
        ];
      video.type = "video/mp4";
      video.src = activeVideoUrl;
    });
  </script>```