用JS随机改变视频src

Question

我正在尝试使用 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”

-_-"

感谢关注

Answer 1

您的代码存在一些问题：

您的 div 和 id="Vid" 是 style="display: none"，但是在 oracleClicked 函数中您试图在 video 元素，来自 querySelector("#OracleVid")。删除外部 div，并将该样式放在 video 上，按钮将显示它，因为它现在指向正确的元素。

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

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

这是一个完整的代码片段，带有演示视频文件：

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>

用JS随机改变视频src

Randomly changing video src with JS

javascript

html

video

src