How to dynamically play video based on the button to clicked

Question

Hello I have a 2 buttons trailer and movie, I want to play the video based on the button I clicked.

For example I choose Trailer then it should play trailer and vice versa

here is my button

 <button class="btn btn-sm btn-dark" id="trailer" data-toggle="modal" data-target="#myModal2">Trailer</button>

 <button class="btn btn-sm btn-dark" id="movieNoads" data-toggle="modal" data-target="#myModal2">Movie</button>

here is my video player and its javascript codes

 <video controls playsinline id="player" width="100%">

      <script type="text/javascript">

        var video = document.getElementById('video');
        var source = document.createElement('source');

         document.getElementById('trailer').onclick = function () {

            source.setAttribute('src', '../inflightapp/storage/app/public/trailer_videos/<?php echo ''.$row2['trailer_video'].''; ?>');
            video.appendChild(source);
            video.play();

          }


          document.getElementById('movieNoads').onclick = function () {
              source.setAttribute('src', '../inflightapp/storage/app/public/movie_videos/<?php echo ''.$row2['movie_video'].''; ?>');
            video.appendChild(source);
            video.play();
          }

      </script>

    </video>

Answer 1

Welcome to Stack Overflow. You could try something along the lines of the following:

I used jQuery and Bootstrap (as I noticed you used Bootstrap HTML elements).

//Custom function to populate a modal. This could be expanded on to even add a destination parameter in order to use seperate modals (e.g. function videoModal(destination, source) and replace #myModal2 with the `destination` parameter).
function videoModal(source) {
  $("#myModal2 .modal-body").html($("video#player").clone());
  //Add your second source:
  $("#myModal2 video#player > source").attr("src", source);
  $("#myModal2 .modal-body video#player").css("display", "block");
}

$(document).ready(function() {
  //On init, save current loaded state of modal
  let modalInit = $("#myModal2 .modal-body").html();

  //On interaction with a control
  $("body").on("click", "button#trailer", function() {
    //Populate modal
    videoModal("https://www.w3schools.com/tags/movie.mp4");
  });

  $("body").on("click", "button#movieNoads", function() {
    //Populate modal
    videoModal("https://www.w3schools.com/html/mov_bbb.mp4")
  });

  //Reset modal on close
  $("#myModal2").on('hidden.bs.modal', function(e) {
    $("#myModal2 .modal-body").html(modalInit);
  });
});

video#player {
  display: none;
  margin-left: auto;
  margin-right: auto;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<video id="player" controls autoplay loop>
  <source src="" type="video/mp4">
</video>

<!-- Button trigger modal -->
<button type="button" id="trailer" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
  Trailer
</button>

<button type="button" id="movieNoads" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">
  Movie
</button>

JSFiddle

This way you could also load the videos inside modals (as I noticed you were trying to use modal buttons). No refreshes are required.

Answer 2

You can have a look at this.

<button class="btn btn-sm btn-dark" id="trailer">Trailer</button>

<button class="btn btn-sm btn-dark" id="movieNoads">Movie</button>

<script type="text/javascript"> 

    var trailer = document.getElementById('trailer');
    trailer.setAttribute('data-toggle', 'modal'); 
    trailer.setAttribute('data-target', '#myModal2');

   var movieNoads = document.getElementById('movieNoads');
   movieNoads.setAttribute('data-toggle', 'modal'); 
   movieNoads.setAttribute('data-target', '#myModal2');
</script>
 
 <video controls playsinline id="player" width="100%">

      <script type="text/javascript">

        var video = document.getElementById('player');

         document.getElementById('trailer').onclick = function () {
            document.getElementById("player").style.display = "block";
            video.setAttribute('src', 'YouVideoURLHere');
            video.play();

          }


          document.getElementById('movieNoads').onclick = function () {               document.getElementById("player").style.display = "block";
            video.setAttribute('src', 'YourVideoURLHere');
            video.play();
          }
      document.getElementById("player").style.display = "none";

      </script>

    </video>

Answer 3

You Can try this

function setvideo(src) {
    document.getElementById('div_video').innerHTML = '<video autoplay controls id="video_ctrl" style=" width: 100%;"><source src="'+src+'" type="video/mp4"></video>';
    document.getElementById('video_ctrl').play();
}

<!DOCTYPE html>
<html>
<body>

<div id="div_video"> </div>
<button onClick="setvideo('movie.mp4')"> Trailer</button>
<button onClick="setvideo('mov_bbb.mp4')"> Movie</button>




</body>
</html>

Answer 4

You forgot to load the video

"use strict";

console.clear();

const video = document.getElementById("player");
const source = document.createElement("source");

function loadVideo(element, src) {
  source.src = src;
  element.appendChild(source);
  element.load();
  element.play();
}

document.getElementById("trailer").addEventListener(
  'click',
  () => loadVideo(
    video,
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/lego.mp4"
  )
)

document.getElementById("movieNoads").addEventListener(
  'click',
  () => loadVideo(
    video,
    "https://s3-us-west-2.amazonaws.com/s.cdpn.io/96344/abstract-001.mp4"
  )
)

<button class="btn btn-sm btn-dark" id="trailer" data-toggle="modal" data-target="#myModal2">Trailer</button>

<button class="btn btn-sm btn-dark" id="movieNoads" data-toggle="modal" data-target="#myModal2">Movie</button>

<video controls playsinline id="player" width="100%" loop></video>