Изменение <Video>SRC в зависимости от размера экрана с Javascript - PullRequest
Новая
       12

Изменение <Video>SRC в зависимости от размера экрана с Javascript

0 голосов
/ 21 января 2019

Я тестирую создание сайта локально на моей машине с помощью начальной загрузки.

У меня есть <video> вроде заголовка сайта.

Мне бы хотелось, чтобы это видео показывало полную ширину и высоту на мобильном телефоне, а также показало обрезанную / широкую версию видео на рабочем столе.Я попытался использовать встроенные медиазапросы в тегах <source>, чтобы src изменился, но ничего не получалось.

Поэтому я переключил передачи и использовал некоторый javascript, чтобы изменить его таким образом.

Так что сумасшедшая вещь в том, что мой скрипт работает.Когда я смотрю в chrome dev tools, src действительно изменяется, когда я изменяю размер экрана моего браузера, однако он не отражается на самом сайте, он сохраняет то, что src я установил в html, как будтоэто игнорирует мой сценарий.

Я перепробовал все, что мог придумать, и я просто застрял, не зная, что делать дальше.Мой код ниже:

HTML 

<video class="col-12" loop muted autoplay >
  <source id="hvid" src="media/test.mp4" type="video/mp4">
</video>

JS 

let homeVideo = document.getElementById('hvid')
console.log(homeVideo.src)


function myFunction(x) {
  if (x.matches) { // If media query matches
    homeVideo.src = "media/test.mp4";
  } else {
   homeVideo.src = "media/test-3.mp4";
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
;
console.log(homeVideo.src)

-Edits-

JS 

var w = window.matchMedia("(max-width: 700px)");
 var vid = document.getElementById("vid");
 var source = document.getElementById("hvid");


window.addEventListener("resize", function screenres(){
  if (w.matches) {
    vid.pause();
    source.src = "media/test.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "media/test-3.mp4";
    vid.load();
    vid.play();
  };

});

HTML 

  <div class="container">
      <div class="row">
          <video id="vid" class="col-12" loop muted autoplay>
            <source id="hvid" src="media/test.mp4" type="video/mp4">
          </video>
        </div>
    </div>

1 Ответ

0 голосов
/ 21 января 2019

Просто получите размер области просмотра, и на основе этого значения приостановите видео, измените ссылку src, загрузите новое видео и воспроизведите новое видео.

Но учтите, что вам нужно будет обновить страницу после изменения размера браузера, чтобы увидеть изменение видео.

Если вы хотите, чтобы видео изменялось при изменении размера экрана, а также при обновлении страницы, вам сначала нужно переместить вышеуказанный JavaScript-код в функцию и запустить его при возникновении события resize. Затем для загрузки страницы необходимо удалить элемент видео из HTML-кода и добавить его при загрузке страницы с помощью метода createElement () со значением атрибута src, также добавляемым в зависимости от ширины области просмотра.

Проверьте это JSFiddle или выполните следующий Фрагмент кода для практического примера того, что я описал выше: 

/* JavaScript */

  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  var source = document.createElement("source");
  source.id = "hvid";
  source.setAttribute("type", "video/mp4");
  vid.appendChild(source);
  
  if (w.matches) {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4");
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.removeAttribute("src");
    source.setAttribute("src", "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4");
    vid.load();
    vid.play();
  }

window.addEventListener("resize", function(){
  var w = window.matchMedia("(max-width: 700px)");
  var vid = document.getElementById("vid");
  var source = document.getElementById("hvid");
  
  if (w.matches) {
    vid.pause();
    source.src = "https://storage.googleapis.com/coverr-main/mp4/Love-Boat.mp4";
    vid.load();
    vid.play();
  } else {
    vid.pause();
    source.src = "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4";
    vid.load();
    vid.play();
  }
});
/* CSS */

html, body {margin: 0; padding:0; width: 100%; height: 100%;}.row{display: block !important;}
<!-- CDN Links -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<!-- HTML -->

<div class="container">
  <div class="row">
    <video id="vid" class="col-12" loop muted autoplay></video>
  </div>  
</div>
...