HTML5双播放列表视频播放器功能异常：初始选列表1无响应

问题原因 #

你的事件处理逻辑里加了个错误的判断：

if (!one || !two) return;

初始状态下List2的默认值是空字符串，第一次选List1时，two为空，触发这个判断直接终止代码，根本不会执行视频切换的change函数。只有选过List2让它有有效值后，再选List1才满足条件，才能正常切换。

修复方案 #

如果你需要选任意一个下拉框的视频都能切换播放，把事件处理逻辑改成只校验当前选中下拉框的值就行：

修改后的JavaScript代码：

$(document).ready(function() {
  $('select').on('change', function() {
    var selectedVal = $(this).val();
    if (selectedVal) {
      change(selectedVal);
    }
  });
});

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

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

额外优化 #

• 避免重复加载同一视频，可以在change函数里加个判断：

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

  // 如果当前已加载的就是要选的视频，直接返回
  if (source.src.endsWith(sourceUrl)) return;

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

• 给默认选项加disabled和selected，引导用户选择有效视频：

<option value="" disabled selected>- First List -</option>
<option value="" disabled selected>- Second List -</option>

内容的提问来源于stack exchange，提问作者mr. sulu