JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<table>
  <td>
    <video id="video" poster="img_dam/dam070.jpg" controls style="position: absolute; top: 10px; left: 200px;
width:350px; height:auto; border: 4px solid green;
border-radius: 10px; box-shadow: 6px 6px 6px gray">
      <source>
    </video>
  </td>
  <td>
    <br>
    <ul>
      <li> <a href="#" class="play-video" data-video-url="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4"> video 1</a>
        <li> <a href="#" class="play-video" data-video-url="http://media.w3.org/2010/05/sintel/trailer.mp4"> video 2</a>
          <span id="debug"></span>
    </ul>

JavaScript

$('.play-video').click(function(e) {
  // per prevenire che quando clicchi ti porta all'href dell'elemento <a>
  e.preventDefault();
  // salva in una variabilie temporanea il valore dell'url del video preso dall'attributo data-video-url
  var videoUrl = $(this).attr('data-video-url');
  // assegna alla source l'attributo src = videoUrl
  $('video source').attr('src', videoUrl);
  // carica il video
  $('video')[0].load();
  // play
  $('video')[0].play();
})