CODEWITHSUNDEEP
jqueryhtml5-videomediaelement.js
Pablini
Pablini

Reputation: 53

How to add more than one video source with JS?

EDIT: I think i haven't explained myself correctly.

I need to set (via javascript) more than one video source to my video.

For example set:

<source type="video/mp4" src="video.mp4"></source>
<source type="video/ogg" src="video.ogg"></source>

is there any way to do this? also if i only have a video that the currently web browser doesn't support will it fallback to flash?

Im using mediaelementjs (and jquery) (in a few words, what i need is to click an image and magically the browser supported video (another video) must load).

thanks!

Upvotes: 1

Views: 1375

Answers (1)

Rafael Verger
Rafael Verger

Reputation: 1771

Yeah man, you can set more than one source so, the browser will load just the supported source , and in case that it doesn't support HTML5 video, it will load the embed tag (flash)

Here an example:

<video poster="myvideo.jpg" controls>
 <source src="myvideo.m4v" type="video/mp4" />
 <source src="myvideo.ogg" type="video/ogg" />
 <embed src="/to/my/video/player"></embed>
</video>

--- edited ---

So, you wanna to add more source tags dynamically. Like an onclick function. You have some options:

  1. You can just change the src attribute in video element;
  2. You can change the src attribute of each source element;
  3. You can create more source elements and append all to the video element;

In any of these cases, you will need to run the load and play functions of video element after changes or add sources;

PS: remember that only one source will be played, the one that the browser can read. So you can't add a lot of videos (like different videos, instead differents extensions) and expect that a playlist will be created;

More questions about it:

Upvotes: 1

Related Questions