Question 201861 in Html Question posted in
Some basic documentation can be found here.

Html – playing random new video when refreshing page

I am trying to make a website with only one video displayed (covering the whole page because it’s supposed to be opened with a phone). But when refreshing the page a random new video appears. I have 8 mp4 videos (with a dropbox link) and Im trying to get the video to randomise between these 8 videos when refreshing the page. I hope this makes sense.

I am new to coding and would really appreciate help 🙂 Thankyou in advanced!

Here is what I have done so far – its not working unfortunately

I think it might have to do with the url I am using.

HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
    <script src="function.js"></script>
<title>untitled page</title>
</head>
<body>
    <video id="videoItem">
    <source src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" type="video/mp4" />
 
</video>
</body>
</html>

JavaScript:

// JavaScript Document
document.getElementById(videopage)
<script> 
function getRandomInt(min, max) {         
return Math.floor(Math.random() * array.length);
    target = document.getElementById('videoItem');
     var sources = video.getElementsByTagName('source');
     var videoUrl=["https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1", "https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1", "https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1", "https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1", "https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1", "https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"];
     var random_nr = getRandomInt(0, videoUrlsMp4.length-1);
     sources[0].src = videoUrlsMp4[random_nr ];
     video.load(); </script>
Tags:

2

Answers


  1. 0

    Check out the following code. You seem to have a lot of typos and unmatched braces.

    // JavaScript Document
const video = document.getElementById('videopage')

target = document.getElementById('videoItem');
var sources = video.getElementsByTagName('source');
var videoUrls = ["https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1", "https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1", "https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1", "https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1", "https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1", "https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"];

sources[0].src = videoUrls[Math.floor(Math.random() * videoUrls.length)];

console.log(sources[0].src)
video.load();
    <video id='videopage' controls autopaly><source /></video>
    Login or Signup to reply.
  2. 0

    Below is a minimal implementation that loads a new video on every page load.

    Note that you do not need a <source>-element, instead the shown solution adds a src-attribute to the <video>-element itself.

    Also note that I have added the muted and playsinline attributes to the <video>-element, otherwise mobile clients may/will refuse to play the video since loading it wasn’t triggered by a user gesture.

    var videoEl = document.querySelector('#videoItem');

var videoUrls = [
  "https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1", 
  "https://www.dropbox.com/s/qnmb9s5b0vho328/film%203.mp4?raw=1", 
  "https://www.dropbox.com/s/ey4a07703h8henq/film%205.mp4?raw=1", 
  "https://www.dropbox.com/s/et157quhjel6mcu/film%206.mp4?raw=1", 
  "https://www.dropbox.com/s/e0nrb47fetotcsw/film%207.mp4?raw=1", 
  "https://www.dropbox.com/s/npj70zhxzecs4lp/film%208.mp4?raw=1"
];


videoEl.addEventListener('canplay', function () {
  videoEl.play();
});

videoEl.src = videoUrls[Math.floor(Math.random() * videoUrls.length)];
    <video id="videoItem" src="https://www.dropbox.com/s/s7nfpv6g65gjumc/film%202.mp4?raw=1" muted playsinline>
</video>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search