Показать видео в модальном - PullRequest
Новая
       7

Показать видео в модальном

0 голосов
/ 01 февраля 2019

Я ищу способ динамического отображения видео в модальном всплывающем окне без встраивания в YouTube. 

$(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoSRCauto = videoSRC + "";
    $(theModal + ' source').attr('src', videoSRCauto);
    $(theModal + ' button.close').click(function () {
      $(theModal + ' source').attr('src', videoSRC);
    });
  });
});
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<button class="btn btn-lg video" data-video="https://clienti.dk/media/1140/friheden-video.mp4" data-toggle="modal" data-target="#videoModal">Play Video</button>

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <video controls>
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>

YouTube Iframe - Рабочий пример со встроенным видео YouTube в iframe

Обычное видео - Здесь я попытался использовать html-видео.Видео получает правильное значение src, но это может быть проблемой с синхронизацией загрузки.

Кто-нибудь может мне помочь?

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Все выглядит хорошо, вы просто скучаете $(theModal + ' video').load();.Вы должны загрузить внешнее видео, если вы устанавливаете src runtime.

См. Фрагмент ниже: 

$(function() {
  $(".video").click(function () {
    var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoSRCauto = videoSRC + "";
    $(theModal + ' source').attr('src', videoSRCauto);
    $(theModal + ' video').load();
    $(theModal + ' button.close').click(function () {
      $(theModal + ' source').attr('src', videoSRC);
    });
  });
});
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<button class="btn btn-lg video" data-video="https://clienti.dk/media/1140/friheden-video.mp4" data-toggle="modal" data-target="#videoModal">Play Video</button>

  <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <video controls width="100%">
            <source src="" type="video/mp4">
          </video>
        </div>
      </div>
    </div>
  </div>

Вы можете проверить это здесь

0 голосов
/ 01 февраля 2019

Проблема в том, что вы устанавливаете src для исходного элемента.Установите его прямо на элемент видео.Если вы измените его на $(theModal + ' video').attr('src', videoSRCauto);, тогда он будет работать так, как вы ожидаете.В качестве альтернативы вы, возможно, захотите создать исходный элемент с уже установленным src.

...