使用JS或PHP = MediaElementJS更改视频的SRC

Question

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

Answer 1

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.

I forked the link you put int the question and fixed the javascript (https://codepen.io/anon/pen/gddogL), but since the video url is not valid it is not playing, but it does not have any javascript errors any more. So if you have valid video url's you can at least tinker with that.

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.