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

Question

我是 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 视频文件，但我仍然遇到同样的问题。

Answer 1

尝试在提交按钮绑定(bind)中添加 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();  
    });