用JS随机改变视频src答案

【问题标题】：Randomly changing video src with JS用JS随机改变视频src
【发布时间】：2020-07-20 20:21:29
【问题描述】：

我正在尝试使用JS随机更改视频src，惨败

代码如下：

HTML

<body style="width: 720px; height: 480px; overflow: hidden;">

<div id="mainBox">
  <div id="Vid" style="display: none">
    <video autoplay muted loop id="OracleVid" width="720" height="480">
      <source id="OracleVidSRC" src="css/cabenca9sClips_HD/cabenca9sClipHD_001.mp4" type="video/mp4">
    </video>

<button id="OracleButton"> Oracle </button>
  </div>

和 JS

var oracleButton = document.querySelector('#OracleButton');
var clip = document.querySelector('#OracleVidSRC');
var video = document.querySelector('#OracleVid');

var oracleVidArray = [
  "css/clips/video_001.mp4",
  "css/clips/video_002.mp4",
  "css/clips/video_003.mp4",
]

function oracleClicked() {
  var oracleVid = 
oracleVidArray[Math.floor(Math.random()*oracleVidArray.length)];
  clip.src = oracleVid;
  video.style = "display: block";
  video.load();
}

oracleButton.onclick = oracleClicked;

谁能告诉我为什么它不加载新视频？当我检查时，src 确实发生了变化，但它不会加载。

我还在控制台中收到“Uncaught TypeError: video.load is not a function”消息:(

每次新页面加载时，我都会接受一个随机的 src。点击按钮只会显示视频。

Update: I have also tried this Clicked function

function oracleClicked() {
  var oracleVid = 
oracleVidArray[Math.floor(Math.random()*oracleVidArray.length)];
  var oracleVidSrc = video.createElement("source");
  oracleVidSrc.src = oracle
  clip.src = oracleVid;
  video.style = "display: block";
}

现在我在控制台中得到的是“Uncaught TypeError: video.createElement is not a function”

-_-"

感谢您的关注

【问题讨论】：

好吧，如果您希望它在每次点击时都是随机的，那么您需要在每次点击时随机选择它。您目前只是在脚本第一次呈现时选择它。
您好，谢谢。我试过添加 'oracleVid=oracleVidArray[Math.floor(Math.random()*oracleVidArray.length)];'到 Clicked 函数的行，但它无论如何都不会加载
var oracleVid = oracleVidArray.... 必须在函数中
有道理，我会将其添加到代码中，但我仍然收到“未捕获的 TypeError：video.load 不是函数”

标签： javascript html video src

【解决方案1】：

您的代码存在一些问题：

您的div 和id="Vid" 是带有style="display: none" 的那个，但在oracleClicked 函数中，您试图在video 元素上设置video.style = "display: block";，该元素来自querySelector("#OracleVid")。移除外部 div，并将该样式放在 video 上，按钮将使其显示，因为它现在针对正确的元素。

var oracleVid = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)]; 行不在oracleClicked 函数内，因此它只会在页面加载时随机化一次。将该行向下移动到函数中，随机发生器将起作用。

按钮onClicks 应该在 HTML 中定义，比使用查询选择器并在 js 中添加它更不容易出错并且更快。

这是一个完整的工作代码 sn-p，带有演示视频文件：

var clip = document.querySelector("#OracleVidSRC");
var video = document.querySelector("#OracleVid");

var oracleVidArray = [
  "https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm",
  "https://ia600209.us.archive.org/20/items/ElephantsDream/ed_1024_512kb.mp4",
  "https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
];

function oracleClicked() {
  clip.src = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)];;
  video.style = "display: block";
  video.load();
}

<video autoplay muted loop id="OracleVid" style="display: none" width="720" height="480">
  <source id="OracleVidSRC"/>
</video>

<button id="OracleButton" onClick="oracleClicked()">Oracle</button>

【讨论】：