我这边需要一个视频播放器,有两个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();
}
}
型
1条答案
按热度按时间nkkqxpd91#
我认为你是从列表1中选择一个选项,并期望该视频源应根据该选择更新.但这不会发生,除非你选择从列表2的东西.如果我理解你的问题正确,那么这里是一个解决方案-
字符串
更改为=>
型
这里onChange listener将返回只有当user选择了list 1和list 2中的默认选项时。所以现在即使你只选择了List 1中的一些东西,它也应该反映在视频播放器中。
希望这能回答你的问题。