Randomly changing video src with JS

I'm trying to randomly change the video src using JS, a miserable fail

Here's the code:

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>

and the 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;

Can someone please tell me why it doesn't load a new video? When I inspect, the src does change, but it just wont load.

I also get the "Uncaught TypeError: video.load is not a function" message in the console :(

I would also accept a random src each new time the page loads. Clicking the button would just make the video appear.

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";
}

Now what I get in the console is "Uncaught TypeError: video.createElement is not a function"

-_-"

Thank you for the attention

Solution

Some issues with your code:

Your div with id="Vid" is the one with style="display: none", yet in the oracleClicked function you are trying to set the video.style = "display: block"; on the video element, which is from querySelector("#OracleVid"). Remove the outer div, and put that style on the video and the button will make it show as it is now targeting the correct element.

The line var oracleVid = oracleVidArray[Math.floor(Math.random() * oracleVidArray.length)]; is not inside the oracleClicked function, so it is only being randomised once at page load. Move that line down into the function and the randomizer will work.

Button onClicks should be defined in the HTML, less error-prone and faster than using a query selector and adding it in the js.

Here's a fully working code snippet, with demo video files:

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>