javascript html5 video player change src

How to Change a JavaScript HTML5 Video Player's Source Using Regular JavaScript

When creating interactive web applications that involve playing videos, it is sometimes necessary to change the source of the video player dynamically. This could be for various reasons such as when clicking video thumbnails in a gallery or playing a new video clip once the current video has reached its end.

In this article, we will explore how to change the source of an HTML5 video player using regular JavaScript. To achieve this, we need to first identify the elements that we want to manipulate. Specifically, we will be targeting the `video` element and its corresponding `source` element.

Identifying the Elements

To start with, let's add some IDs to our `video` and `source` elements so that we can easily target them using JavaScript. The code for this might look like this:

```html

```

Changing the Video Source

To change the source of our video player, we can simply use the `src` attribute on the `source` element directly. This method is better than modifying the source HTML as highlighted by the W3C.

Here's an example code snippet that demonstrates how to achieve this:

```javascript

var videobutton = document.getElementById('videolink1');

var newposter = 'images/video-cover.jpg';

var videosource = document.getElementById('mp4video');

var videocontainer = document.getElementById('videoclip');

// It is important to include this somewhere after the video tag and before the closing body tag, otherwise it will try and access elements in the DOM that haven't loaded yet.

// To change what is playing, just use the src attribute on the media element directly...

vidoebutton.addEventListener('click', function() {

videosource.src = 'new/video/path.mp4';

});

```

Why Use .mp4 Format?

As you might have noticed, we are using the `.mp4` format for our video. This is because it is one of the most widely supported HTML5 formats, compatible with the vast majority of modern browsers including Internet Explorer 9, IE 10, IE 11, FireFox, Chrome, and Safari along with Android devices and iOS.

In this article, we have demonstrated how to change the source of an HTML5 video player using regular JavaScript. We also discussed why it is important to use the `.mp4` format for our videos and provided some examples of how to achieve this using both JavaScript and jQuery.

I hope you found this article helpful! Let me know if you have any questions or need further clarification on any of the topics covered.

Javascript html5 video player change src