random video generator in HTML

Question

I used a simple random number generator and named my mp4 files "1" "2" and "3" and my html page is blank

code:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Connor's video clock</title>
</head>

<body>
  <script>
    < div id = vid >
      < video width = "320"
    height = "240"
    controls >
      < source src = Math.floor((Math.random() * 3) + 1) + ".mp4" > Please update your browser < /source>
  </script>
</body>

</html>

score 0 · Accepted Answer · answered Jan 09 '16 at 07:38

You can't put html tags within script tags. Additionally, I think HTML tags should not have spaces between the angled bracket and the tag name. Try this instead:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Connor's video clock</title>
</head>

<body>
  <div id = "vid">
    <video width = "320"
    height = "240"
    controls>
      <source id="vsrc" />
      Please update your browser.
    </video>
  </div>
  
  <script>
    document.getElementById("vsrc").src = Math.floor((Math.random()*3)+1) + ".mp4";
  </script>
</body>

</html>

Here, the javascript fills in the src for the video by selecting that element (by using document.getElementById()) and then altering the src attribute.

Thank you so much! This actually worked! I thought you couldn't do `Math.floor((Math.random()*3)+1) + ".mp4"` but you actually can! Again, thanks! — Connor Hare, Jan 09 '16 at 15:14

score 0 · Answer 2 · edited May 23 '17 at 11:59

I guess what you want is to display a video where its source is assigned by your javascript function. The problem your code cannot run is you are not writing javascript in the script tag. What you have written inside are actually HTML tags. Attached an example for your reference. According to this changing source on html5 video tag , it may not be possible to change source from function. Change the src attribute in video tag instead.

<!DOCTYPE html>
<html>
    <head>
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
         <script type="text/javascript">
           $(document).ready(function() 
           {
               var srcLinkSuffix = Math.floor((Math.random() * 3) + 1);
               var video = document.getElementById('video');
               var srcLink = "video_"+srcLinkSuffix+".mp4";
               video.setAttribute("src", srcLink );
           });
        </script>
    </head>
    <body>
         <video width="320" height="240" controls src="" id="video" />
    </body>
</html>

random video generator in HTML

2 Answers2