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

50few1ms  于 5个月前  发布在  HTML5
关注(0)|答案(1)|浏览(85)

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

<label for="one">List1</label>
<select id="one">
  <option value="">- First List -</option>
  <option value="1.mp4">1</option>
  <option value="2.mp4">2</option>
  .......
</select>

<label for="two">List2</label>
<select id="two">
  <option value="">- Second List -</option>
  <option value="16.mp4">6</option>
  <option value="17.mp4">7</option>
.....
</select>

<br/><br/>

<video id="player" controls="true">
  <source id="mp4_src" src="1.mp4" type="video/mp4" />
</video>

字符串
js:

$(document).ready(function() {

  $('select').on('change', function() {
  var one = $('#one').val();
    var two = $('#two').val();
    if (!one || !two) return;
    change($(this).val());
  });

});

function change(sourceUrl) {
  var video = document.getElementById("player");
  var source = document.getElementById("mp4_src");

  video.pause();

  if (sourceUrl) {
    source.src = sourceUrl;
    video.load();
    video.play();
  }
}

nkkqxpd9

nkkqxpd91#

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

if (!one || !two) return;

字符串
更改为=>

if (!one && !two) return;


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

相关问题