Question

我是javascript / jquery编程的新手，我知道这应该很简单，虽然我已经接近了，但最终还是很难（在搜索了SO和Google之后）。

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

这里是link。

问题：

当我从每个选择框中选择并单击提交按钮时，我看到视频的简短一瞥，然后一切都重置...选择框重置为默认值，视频很快被＆替换＃34;海报＆＃34;图片。

这里是表单的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日更新：因为我收到了＃34;没有支持格式和MIME类型的视频，并且＃34;视频显示区域出错，我认为这可能是视频编码的一个问题，所以我试着改为指向WebM视频文件，但我仍然遇到同样的问题。

Answer 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();  
    });

Answer 2

好的，我发现了这个问题。我没有提交按钮点击功能听取任何内容：

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

所以我确定该功能正在监听一个事件，即：

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

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

2 个答案: