Change SRC of a video using JS or PHP = MediaElementJS

648 views javascript
-2

good afternoon. I am trying to change the video source of my video player MediaElement.Js when the user click on a div with a img, Example:

<a href="http://dns:port/hls/125.m3u8"><div id="change_channel><img src="https://www.example.com/img_chh/fox.png"></div></a>

I found some answers of other users that wanted to change the source of the html5 video but only with two stream. The problem that i have it is that i have +400 streams and the code line of the answers of the other users are not working any more...

I tried to run this code but it did not work:

<a href="http://dns:port/live/123.m3u8" onclick="
  playerObject.pause();
  playerObject.setSrc(this.href);
  playerObject.media.load();
  playerObject.load();
  return false
"><div id="change_channel><img src="https://www.example.com/img_chh/fox.png"></div></a>

I will leave the complete code in codepen to debug it easier than downloading all the files to run MediaElement.js. https://codepen.io/Hacker_D/pen/vzzKgM If someone knows how to fix this, i will be thankful. Regards, DiX

answered question

1 Answer

9

Well first, of course the given code won't work since playerObject is not referring to anything, and if it was meant to refer to the <video> element then the line playerObject.media.load(); is invalid since there is no such property on the Audio/Video DOM element. At least initialize it somewhere (give and id to your <video> tag and then do playerObject = document.getElementById(<the id of your video element>); somewhere.

As for he amount of videos, since you tagged php, just create a generic javascript function which takes the source and sets it to the player, and when generating the page, just put the correct source in each click handler.

posted this

Have an answer?

JD

Please login first before posting an answer.