How to update Video.js player after changing video src?-CodePudding

I am fairly new to js and html. I am building my own Video Portfolio Website.

I have multiple videos and update their src, depending on which video is clicked. I use the video.js player to play my m3u8 and mpd files. The problem is that, for some reason video.js can't update the src of the video and fails to play any video at all.

You can download my website here

I've been trying to solve this problem for a couple weeks now, but couldn't manage to do so.

I hope someone here can help!

Thanks in advance!!

CodePudding user response：

I had the same issue before but I fixed it ,hope this script could help or at least give you a hint...

-> when you click on "submit" button it will play the next video

HTML : 
<div>
<video  width="500" height="340" controls id="myVideo">
    <source src='vedio_1.mp4' type='video/mp4' id='video'> 
</video>

<input type="button" name="" id="btn_submit" value="submit"  >
</div>

<script>
let arrayvd = ["vedio_1", "vedio_2", "vedio_3", "vedio_4"];

let video = document.getElementsByTagName('video')[0];

let counter = 1;
document.getElementById("btn_submit").addEventListener("click", function () {
  if (counter > 3) {
    counter = 0;
  }
  let source = document.getElementsByTagName("source");

  source[0].src = `${arrayvd[counter]}.mp4`;

  video.load();

  counter  ;
   })
   </script>

CodePudding user response：

When you're using Video.js (or any comparable player) you shouldn't try to directly interact with the underlying <video> or <source> elements, you need to use Video.js's API.

Loading a new video is accomplished by passing a source or array of sources to the player's src() method.

videojs.getPlayer('my_player').src({
  type: 'application/x-mpegurl',
  src: 'https://example.com/video.m3u8'
});

See e.g. https://videojs.com/guides/player-workflows/