Changing video source javascript

Question

My solution: http://jsfiddle.net/g7mrs/22/

function loadVideo(event) {
  videojs("myPlayer").src({ 
    type: "video/youtube",
    src: "https://youtu.be/ZSn3Tvc7jQU"
  });
  event.preventDefault();
}

I got a working solution, however I would like to have only 1 function instead of 4

Any ideas?

w3schools.com/js/js_function_parameters.asp or you can use data-src attribute on button, and get it with: event.target.dataset.src — Peter
– Peter, Commented Dec 5, 2017 at 20:58

hsz · Accepted Answer · 2017-12-05 21:00:39Z

1

You can pass YouTube URL as a parameter:

function loadVideo(url) {
    videojs("myPlayer").src({ type: "video/youtube", src: url});
    event.preventDefault();                  
}

And in HTML:

<a href="#" onClick="loadVideo('https://youtu.be/ZSn3Tvc7jQU')">video</a>
<a href="#" onClick="loadVideo('https://youtu.be/0BhSrfNgLxs')">video2</a>

answered Dec 5, 2017 at 21:00

hsz

153k63 gold badges268 silver badges320 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rabbi Shuki Gur · Accepted Answer · 2017-12-05 22:26:14Z

0

Adding on to @hsz answer, You can also add the first part of the url to the function, and just send the ID.

This will also help if you need to later on change your video provider, since you only will have to change the base (assuming that the id stays the same).

So your JS function:

var base = 'https://youtu.be/';

function loadVideo(id) {
    videojs("myPlayer").src({ type: "video/youtube", src: base + id });
    event.preventDefault();                  
}

end then in the HTML

<a href="#" onClick="loadVideo('ZSn3Tvc7jQU')">video</a>

answered Dec 5, 2017 at 22:26

Rabbi Shuki Gur

1,72620 silver badges37 bronze badges

Collectives™ on Stack Overflow

Changing video source javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related