Блог

Главная - Вопросы по программированию - меняйте видео на лету с помощью javascript и используйте bootstrap для воспроизведения в плавающем окне

меняйте видео на лету с помощью javascript и используйте bootstrap для воспроизведения в плавающем окне

#javascript #html #css #bootstrap-4

Вопрос:

Этот код воспроизводит видео в плавающих окнах с помощью начальной загрузки. Но я хочу изменить src видео с помощью javascript, чтобы у меня была динамическая видеосвязь. Я использую onClick (), чтобы изменить src видео, но это не сработало.

 function changevideo() {
  document.getElementById("source").src = "videos/projects/havoc/guide/guide_GOL_101_019_010.mp4";
} 
 <!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>

</head>

<body>
    <button width="200" data-bs-toggle="modal" data-bs-target="#video" class="img" onClick="changevideo()">click me
        1</button>

    <!-- Modal -->
    <div class="modal fade" id="video">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <video width="100%" autoplay loop>
                        <source id="source" src="">
                    </video>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Ответ №1:

Ты просто забыл нажать play .

 const video = document.getElementById("video-element");

const clear = (node) => {
    while (node.firstChild) {
        node.removeChild(node.lastChild);
    }
};


const changevideo = () => {
  const source = document.createElement('SOURCE');
  
  clear(video);
  
  source.type = "video/mp4";
  source.src = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
  
  video.appendChild(source);
  
  video.play();
} 
 <!DOCTYPE html>
<html lang="en">

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
    </script>

</head>

<body>
    <button width="200" data-bs-toggle="modal" data-bs-target="#video" class="img" onClick="changevideo()">click me
        1</button>

    <!-- Modal -->
    <div class="modal fade" id="video">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <video id="video-element" width="100%" loop>
                    </video>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Комментарии:

1. там не во что играть, видеосвязь прервана. Я не вижу никакого видео.

2. @andio фрагмент работает на меня. Не могли бы вы уточнить?

3. Я в замешательстве. Я запускаю фрагмент прямо здесь, и он просто показывает белый пробел. Там нет видео. Также попытался скопировать код в мой редактор и то же самое. Вы видели видео, когда запускали фрагмент?

4. @andio да… Я все еще просматриваю видео. Очистил кэш и все еще работает. Я использую Safari. У вас могут возникнуть проблемы с CORS. Попробуйте добавить оператор «воспроизведение» в свой собственный код с помощью собственного видео.

5. хорошо, я понял, это не работает в Google Chrome. я попробовал на сафари, и это работает. В Google chrome. Он ничего не воспроизводит, а просто белый пробел.

Метки: