html5视频播放器第二播放列表

50few1ms  于 2024-01-04  发布在  HTML5
关注(0)|答案(1)|浏览(316)

我这边需要一个视频播放器,有两个paylisten获取,但不运行。如果你选择一个视频从列表一开始,什么都不工作,从列表二选择一个视频后,列表一工作。
html:

  1. <label for="one">List1</label>
  2. <select id="one">
  3. <option value="">- First List -</option>
  4. <option value="1.mp4">1</option>
  5. <option value="2.mp4">2</option>
  6. .......
  7. </select>
  8. <label for="two">List2</label>
  9. <select id="two">
  10. <option value="">- Second List -</option>
  11. <option value="16.mp4">6</option>
  12. <option value="17.mp4">7</option>
  13. .....
  14. </select>
  15. <br/><br/>
  16. <video id="player" controls="true">
  17. <source id="mp4_src" src="1.mp4" type="video/mp4" />
  18. </video>

字符串
js:

  1. $(document).ready(function() {
  2. $('select').on('change', function() {
  3. var one = $('#one').val();
  4. var two = $('#two').val();
  5. if (!one || !two) return;
  6. change($(this).val());
  7. });
  8. });
  9. function change(sourceUrl) {
  10. var video = document.getElementById("player");
  11. var source = document.getElementById("mp4_src");
  12. video.pause();
  13. if (sourceUrl) {
  14. source.src = sourceUrl;
  15. video.load();
  16. video.play();
  17. }
  18. }

nkkqxpd9

nkkqxpd91#

我认为你是从列表1中选择一个选项,并期望该视频源应根据该选择更新.但这不会发生,除非你选择从列表2的东西.如果我理解你的问题正确,那么这里是一个解决方案-

  1. if (!one || !two) return;

字符串
更改为=>

  1. if (!one && !two) return;


这里onChange listener将返回只有当user选择了list 1和list 2中的默认选项时。所以现在即使你只选择了List 1中的一些东西,它也应该反映在视频播放器中。
希望这能回答你的问题。

相关问题