使用 ajax 更新视频标签的来源

Question

我有一个 html 页面，其中有一个日历、一个视频标签和一个按钮。当用户单击按钮时，根据时间戳，来自 Django 的视频文件的路径被发送并由 ajax 调用接收。当第一次打开或刷新页面并选择日期和时间然后按下按钮时，该日期和时间对应的视频将显示在页面上并可以播放。

但是，当我更改日期和时间时，之前打开的相同视频文件会显示在页面上，但是从 django 返回的视频文件的路径是根据新的日期和时间。

HTML 代码

<div style="margin-left: 10%">

<button type="submit" class="btn btn-secondary btn-lg" id="recorded" name="btn_submit" value="Play Recorded Videos" onclick="record()" >Play Recorded Videos</button>

</div>



<div id="videoDiv" class="container" style="margin-left: 10%; margin-top: 1%; align-items: center; display: none ">
    <video id='storedVideoId' width='100%' controls >
    </video>
    <br><br>
</div>

Javascript 代码

 <script type="text/javascript">

        var dateNow = new Date();
             dateNow.setDate(dateNow.getDate());

             var timer

            $(function () {
                $('#datetimepicker1').datetimepicker({ defaultDate:dateNow  });

            });


            function getDataFromServer() {
                getVideoFile()
            }

            function getSelectedDate() {
                var from_date = $("#datetimepicker1").data("date")

                return {'from_date':from_date}          
            }

            function getVideoFile(){

                selectedDate = getSelectedDate()

                   $.ajax({
                    url: "/video/getVideoFile/",
                    dataType: "json",
                    data : {"from_date":selectedDate.from_date},

                    success: function(result){

                        if (result.result === "SUCCESS") {
                              var res =  result.videoFilePath;
                            source =  document.createElement('source');
                            source.setAttribute('src', res);
                            source.setAttribute('type', 'video/mp4')
                            $('#storedVideoId').html(source)

                            $('#videoDiv').show()
                        } else {
                            $('#videoDiv').hide()
                            $('#videoDiv').empty()
                        }


                    }
                });
            } 

   </script>

我正在使用的以下 javascript 函数更改了文本和属性，因此当用户想要播放视频时，按钮上的文本应该是播放录制的视频，当停止它时，文本应该是停止录制的视频以及它隐藏了 div。

<script>
    function record(){

        var recorded = document.getElementById("recorded").getAttribute('value');
        var text;

        if (recorded === "Play Recorded Videos"){

            getDataFromServer();
            text = document.getElementById("recorded").innerHTML = "Stop Recorded Videos";
            document.getElementById("recorded").setAttribute('value',"Stop Recorded Videos");
                } 
        else if (recorded === "Stop Recorded Videos") {

            $('#videoDiv').hide();

            document.getElementById("recorded").innerHTML = "Play Recorded Videos";
            document.getElementById("recorded").setAttribute('value',"Play Recorded Videos");
        }

        else {
            getDataFromServer();
        }


        }
</script>

但是没有出现错误消息，即使更改了视频文件名对应的日期和时间，也只会显示页面刷新或加载时首先显示的视频文件。

Answer 1

未经测试，但您可以在success: function(result) 部分尝试此设置：

success: function(result)
{

    if (result.result === "SUCCESS") 
    {
        var res =  result.videoFilePath;
        alert("NEW video path : " + res); //should be a valid path eg: https://example.com/myvideo.mp4

        source =  document.getElementById('storedVideoId');
        source.setAttribute('src', res);
        source.setAttribute('type', 'video/mp4')

        source.play(); //test playback of new video

        $('#videoDiv').show()
    } 
    else 
    {
        $('#videoDiv').hide(); $('#videoDiv').empty();
    }

}