I manage to make a script where I can change the video source without reloading the whole page, but the problem is that after the new source is loaded, the player is not and I only get a black box.

HTML:

<link href="//vjs.zencdn/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn/4.12/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="850" height="400" data-setup='{"example_option":true}'>
  <source id="videoMP4" src=".mp4" type='video/mp4' />
</video>
<div class="menu1">menu1</div>
<div class="menu2">menu2</div>
<div class="menu3">menu3</div>
<div class="menu4">menu4</div>

JavaScript:

$(".menu1").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu2").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
$(".menu3").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu4").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});

Full code and example:

I manage to make a script where I can change the video source without reloading the whole page, but the problem is that after the new source is loaded, the player is not and I only get a black box.

HTML:

<link href="//vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.12/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay preload="auto" width="850" height="400" data-setup='{"example_option":true}'>
  <source id="videoMP4" src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
</video>
<div class="menu1">menu1</div>
<div class="menu2">menu2</div>
<div class="menu3">menu3</div>
<div class="menu4">menu4</div>

JavaScript:

$(".menu1").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu2").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});
$(".menu3").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/video-js.zencoder.com\/oceans-clip.mp4\" type='video\/mp4' \/>";
});
$(".menu4").click(function() {
  document.getElementById("example_video_1").innerHTML = "<source src=\"http:\/\/techslides.com\/demos\/sample-videos\/small.mp4\" type='video\/mp4' \/>";
});

Full code and example: http://codepen.io/BeBeINC/pen/PqydVM

• javascript
• jquery
• html
• video.js

5 Answers 5

Use the .load() function. You should pause it to prevent the audio from keeping on playing.

var video = document.getElementById('example_video');
var source = document.getElementById('videoMP4');
$("ELEMENT").click(function() {
    video.pause()
    source.setAttribute('src', 'NEW MP4');
    video.load();
    video.play();
});

You can do it like that

var player = videojs(document.querySelector('.video-js'));
  player.src({
                 src: 'videoURL,
                  type: 'video/mp4'/*video type*/
            });

  player.play();

You should change the video's source using the player's API, specifically the src() method:

yourPlayer.src("http://foo.com/bar.mp4");

just do it this after you filled other attributes by JS:

$('#player')[0].load();

I Faced Similar Problem But Solved it By Changing the Poster source dynamically first then accessing the vjs poster class and changing its style, have a look at code :

$('#videoPlayer video').attr('poster', "https://dummyimage.com/hd1080");

document.querySelector("vjs-poster")[0].style.backgroundImage = "https://dummyimage.com/hd1080";