Force update of html5 video source in angular js project

Question

I have a project where I've embedded an html5 video on a view.

I populate the source dynamically using $scope.

The initial video I populate the player with works fine.

At the end of the video, I try to change the src of the video to the next clip, until it ends.

My problem is that the video src does not update and just plays the initial clip.

Here's the html (pretty straight forward):

            <video style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
                <source ng-src="{{currentVideo}}" type="video/mp4">
            </video>

Here's the code that implements the change from the controller:

        if (videoId.currentTime >= videoId.duration - 1) {
            // $state.go('unit_1');

               $scope.currentVideo = myObj.units[1].lessonUrl; //set video
               videoId.play();
        }

FYI - videoId is the var for the video. It works fine, as I can play(), pause(), get currentTime, etc.

So I know I'm controlling the player and that I'm successfully loading the initial video.

I'm assuming that when the $scope changes the new video URL would, but obviously I'm wrong.

Any ideas?

Thanks!

Answer 1

If you want to change the src on the video's <source> element, you need to call videoId.load(); before videoId.play(); Otherwise just change the src attribute directly on the video element itself - then a load will not required:

<video ng-src="{{currentVideo}}" style="width:100%; height:100%; padding:0;" class="embed-responsive embed-responsive-16by9" id="myVideo" controls>
</video>