根据两个选择框更新html视频，加载但不播放视频答案

【问题标题】：Update html video based on two select boxes, loads but doesn't play the video根据两个选择框更新html视频，加载但不播放视频
【发布时间】：2015-10-24 05:39:05
【问题描述】：

我是 javascript/jquery 编程的新手，我知道这应该很容易，虽然我很接近，但我最终难住了（在 SO 和 Google 上进行了大量搜索之后）。

我有一个包含两个选择框、一个提交按钮和一个视频的 html 表单的简单网页。基本上，用户从每个选择框中进行选择（选择年份和分水岭），然后单击“播放”按钮，然后播放视频。

这是link。

问题：

当我从每个选择框中进行选择并单击提交按钮时，我看到了视频的简短一瞥，然后一切都重置了……选择框重置为默认值，视频很快被“海报”的形象。

这是表单、选择框、提交按钮和视频的 html：

<section class="select-bar">
    <form>
        <select id="select-year" name="select-year">
            <option value="None">Select a year</option>
            <option value="2011">2011</option>
            <option value="2012">2012</option>
            <option value="2013">2013</option>
        </select>
        <select id="select-basin" name="select-basin">
            <option value="assets/png/display.png">Select a basin</option>
            <option value="Asotin">Asotin</option>
            <option value="Entiat">Entiat</option>
            <option value="JohnDay">John Day</option>
            <option value="Lemhi">Lemhi</option>
            <option value="Methow">Methow</option>
            <option value="SouthForkSalmon">South Fork Salmon</option>
            <option value="Tucannon">Tucannon</option>
            <option value="UpperGrandeRonde">Upper Grande Ronde</option>
            <option value="Wenatchee">Wenatchee</option>
        </select>
        <button id="submit-button" type="submit">Play</button>
    </form>
</section>
<section class="vid-section">
    <video id="vid" width=600 poster="assets/png/display.png" controls>
        <source id="mp4vid" src="#" type="video/mp4" />
</section>

这是根据选择框中的值切换视频的 Jquery 代码：

<script type="text/javascript">
    $(document).ready(function(e){
        e.preventDefault();
        var videoID = 'vid';
        var sourceID = 'mp4vid';
        $('#submit-button').click(function(){
            var yr = $('#select-year').val();
            var basin = $('#select-basin').val();
            var newsrc = 'assets/mp4/' + basin + yr + '.mp4';
            $('#' + sourceID).attr('src', newsrc);
            $('#' + videoID).get(0).load();
            $('#' + videoID).get(0).play();  
        });
    });
</script>

我在这里明显做错了什么？

2015 年 10 月 23 日更新：因为我在视频的显示区域收到“没有找到支持格式和 MIME 类型的视频”错误，我认为这可能是视频编码问题，所以我尝试指向 WebM 视频文件，但我仍然遇到同样的问题。

【问题讨论】：

您是否阻止表单默认操作？点击表单中的提交按钮将导致它发布。
我不确定您所说的阻止是什么意思。该表单未设置为发布。

标签： javascript jquery html video html5-video

【解决方案1】：

尝试在提交按钮绑定中添加e.preventDefault()

    $('#submit-button').click(function(e){
        e.preventDefault();
        var yr = $('#select-year').val();
        var basin = $('#select-basin').val();
        var newsrc = 'assets/webm/' + basin + yr + '.webm';
        $('#' + sourceID).attr('src', newsrc);
        $('#' + videoID).get(0).load();
        $('#' + videoID).get(0).play();  
    });

【讨论】：

谢谢你，但现在我什至看不到视频的简短一瞥（我认为这是“负载”）。选择框恢复默认，不播放视频。

【解决方案2】：

好的，我找到了问题所在。我没有监听任何东西的提交按钮点击功能：

$('#submit-button').click(function() {

所以我只是确保该函数正在侦听一个事件，即：

$('#submit-button').click(function(event) {

【讨论】：