Кнопка Onclick не отвечает на несколько нажатий - PullRequest
Новая
       1

Кнопка Onclick не отвечает на несколько нажатий

0 голосов
/ 08 мая 2019

Я получаю видео с aws S3 на onclick event.

Проблема 1: Каждый раз, когда я загружаю новое видео, мне приходится перезагружаться, чтобы снова использовать кнопку. Кнопка не реагирует на несколько нажатий

Проблема 2: старое видео воспроизводится, хотя я загружаю новое видео. Я пытался очистить куки. Ничего не работает. 

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

И мой сервер: 

import http from 'http';
import express from 'express'
import bodyParser from 'body-parser'
import get_video from './routes/main.route'

const app = express();

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(express.static(path.join(__dirname, '')));

app.get('/', (req, res)=> res.render('index', {title: 'My Homepage', msg: 'Hello World'}));
app.use('/clicked', get_video );

app.listen(5001, '0.0.0.0', ()=> console.log('Server running at http://127.0.0.1:5001/'))

1 Ответ

0 голосов
/ 08 мая 2019

Я полагаю, что вашу проблему можно решить, просто добавив временную метку к вашему запросу.Потому что обычно браузер редактирует ответ для / 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);
    });
 });

Дайте мне знать, решает ли это уже обе проблемы или, может быть, приведу небольшой рабочий пример.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...