Question

我正在Table table = getDynamoDB().getTable("yourTable"); Item item = table.getItem("id", "yourId"); Map map = item.asMap(); // map is holding in java the data present on Dynamodb // in the table yourTable with id yourId上从aws S3提取视频。

问题1：每次上传新视频时，我都必须重新加载才能再次使用该按钮。该按钮无法响应多次点击

问题2：即使正在获取新视频，旧视频仍在播放。我已经尝试清除Cookie。什么都没有。

onclick event

这是我的路线：

<body>
<button  id="getvideo">get video</button>
<video id="myVideo" width="320" height="240" controls><source type="video/mp4"></video>

<script type="text/javascript">
const button = document.getElementById("getvideo");
button.addEventListener("click", function(e) {
     console.log('button was clicked');
     fetch('/clicked', {method: 'GET'})
    .then(function(response) {
        if(response.ok) {
            var url = response.url;
            var data = url.substring(28)
            var video = document.getElementById('myVideo');
            document.querySelector("#myVideo > source").src = data;
            document.getElementById("myVideo").load();
            return;
        }
        throw new Error('Request failed.');
    })
    .catch(function(error) {
        console.log(error);
    });
 });
</script>
</body>

还有我的服务器：


    import express from 'express';
    import get_video from '../controllers/getVideo.controller';

    const router = express.Router();

    router.get('', (req, res) => {
        get_video.getVideo(req, (data) => {
            res.redirect('/?data=' + data);
        });
    });

Answer 1

我想您只需为请求添加时间戳即可解决您的问题。因为通常浏览器会为/ clicked响应。但是，如果url类似于“ clicked？ts = 2019005081030”，则仍应请求视频，但浏览器将始终从服务器再次调用数据，因为URL已更改。所以：

button.addEventListener("click", function(e) {
     console.log('button was clicked');
     //Date.now() added for current date in milliseconds
     fetch('/clicked?ts=' + Date.now(), {method: 'GET'})
    .then(function(response) {
        if(response.ok) {
            var url = response.url;
            var data = url.substring(28)
            var video = document.getElementById('myVideo');
            document.querySelector("#myVideo > source").src = data;
            document.getElementById("myVideo").load();
            return;
        }
        throw new Error('Request failed.');
    })
    .catch(function(error) {
        console.log(error);
    });
 });

让我知道这是否已经解决了这两个问题，或者给出了一些可行的例子。

Onclick按钮不响应多次单击

1 个答案: