Math.random javascript with .mp4

Question

I've got around 2-3 .mp4 files and I'd like them to show randomly on each page load. For example, if one were to visit my website, I'll try to pick 1 out of the 3 .mp4 files listed in my source. I was thinking I could use javascript in some way but I'm not too sure.

Here's what I've got so far

  #vid {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  opacity: 1;
  width: auto;
  height: auto;
  z-index: -100;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  overflow: hidden;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  background: #070915;
  background: rgba(7, 9, 21, .5);
  filter: brightness(62.5%);
  top: 50%;
  left: 50%

<video autoplay class="fadeIn" disablePictureInPicture disableRemotePlayback id="vid" loop playsinline>
      <source src="assets/media/video1.mp4" type="video/mp4" />
      <source src="assets/media/video2.mp4" type="video/mp4" />
      <script type="text/javascript">
      
        const video = document.currentScript.parentElement;
        video.volume = 0.15;

        function pause_resume() {
          const button = document.getElementById("pause_resume_button");

          if (video.paused) {
            video.play()
            button.textContent = "resume video";
          } else {
            video.pause()
            button.textContent = "pause video";
          }
        }
      </script>

    </video>
<div class="font-right-bottom animated fadeInUp">
  <a style="font-size:0.9em;" class="font-bold font-white" href="javascript:void(0);" onclick="pause_resume()" id="pause_resume_button">pause video</a>
  <p style="font-size: 0.9em;" class="font-light font-white no-margin">pog?</p>
  <br>
</div>

I think this question might be useful: https://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag — Abir Taheer, Sep 04 '20 at 07:17
But I recommend moving the script out of the video tag and just use `const video = document.getElementById("vid");` — mplungjan, Sep 04 '20 at 07:19

score 2 · Accepted Answer · answered Sep 04 '20 at 07:20

I'd move the sources into an array and dynamically set the source of the video from one of the items in the array using javascript.


<video autoplay class="fadeIn" disablePictureInPicture disableRemotePlayback id="vid" loop playsinline>
      <script type="text/javascript">
        const video = document.currentScript.parentElement;
    
        const sources = ["assets/media/video1.mp4", "assets/media/video2.mp4"];
        const sourceIndex = Math.floor(Math.random() * sources.length);
        const source = document.createElement("source");
        source.setAttribute("src", sources[sourceIndex]);
        video.appendChild(source);
    
        video.volume = 0.15;

        function pause_resume() {
          const button = document.getElementById("pause_resume_button");

          if (video.paused) {
            video.play()
            button.textContent = "resume video";
          } else {
            video.pause()
            button.textContent = "pause video";
          }
        }
      </script>

</video>

Math.random javascript with .mp4

1 Answers1