Nano Hash - криптовалюты, майнинг, программирование

Видео html5 не будет отображаться в сафари, но работает в хроме

У меня есть видео слайдер на моей странице. вот сайт http://shekleung.com/projects.html Код отлично работает на хроме и ios сафари, но не рабочий стол. При осмотре сайта в сафари видео присутствует на странице в html и даже подсвечивается синим цветом там, где оно должно быть. Я знаю, что слайдер работает, потому что текстовый элемент меняется в зависимости от отображаемого фильма. Я смущен тем, как это вообще не отображается в сафари. Могу только подозревать, что размер не тот? Я использую vanilla js и css для создания слайдера. Он хорошо отображается, и слайдер работает даже на iPhone.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link rel="stylesheet" href="/css/normalize.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />
   <link rel="stylesheet" href="/css/style.css">
   <link rel='stylesheet' href='css/mobile.css' />
   <title>Shek Leung</title>
</head>

<body class="animate__animated animate__fadeIn">
   <section class="projects-container">
      <nav>
         <div class="proj__nav">
            <a href="#archiveFilms" data-tab-target="#archiveFilms" class="archiveFilms active-proj">Archive Films</a>
            <a href="#soundDY" data-tab-target="#soundDY" class="dearYou link-color">Sound: Dear You</a>
            <a href="#soundDS" data-tab-target="#soundDS" class="directorSt link-color">Sound: Final Director's
               Statement</a>
         </div>
         <a href="/index.html" class="proj__back link-color">Back</a>
      </nav>

      <main class="projects-main">
         <div id="archiveFilms">
            <div class="carousel">
               <button class="carousel__button carousel__button--left">←</button>
               <div class="carousel__track-container">
                  <ul class="carousel__track">
                     <li class="carousel__slide current-slide">

                        <video class="carousel__video" id="blue" src="/img/Projects/blue-research-film.mp4"
                           preload="metadata"></video>
                     </li>
                     <li class="carousel__slide">

                        <video id="lvproj" class="carousel__video"
                           src="/img/Projects/lv-project.mp4" preload="metadata"></video>
                     </li>
                     <li class="carousel__slide">

                        <video id="walking" class="carousel__video"
                           src="/img/Projects/we-create-paths-by-walking.mp4" preload="metadata"></video>
                     </li>
                  </ul>
               </div>
               <button class="carousel__button carousel__button--right">→</button>

               <div class="vid-nav">
                  <p class="carousel__slide-text">BLUE → Research Film (2015)</p>
                  <span class="play">▶</span>
                  <span class="audio">♩</span>
               </div>
            </div>
         </div>
         <div id="soundDY">
            <div class="container__sound">
               <div class="container__audio">
                  <p class="container__header">"Dear You" Sound (2018)</p>
                  <audio controls>
                     <source src="/img/Projects/Dear You (2018).mp3" type="audio/mp3">
                  </audio>
               </div>
               <div class="container__credit">
                  <p>Collaboration for BA Collection→<br><br>
                     Concept by Samson Leung<br>
                     Music composed by Zacharias Wolfe<br>
                     <br>Performed by the following:
                     <br><br>Alto Saxophone solo - Theo Hillborg
                     <br>Violins - Abel Puustinen, Pierpaolo Casamassima, Claire Edwards,
                     Elisabeth Turmo, Ismael Jarmouni Gómez & Esther Park
                     <br>Viola - Georgie Davis & Tiffany Cheng
                     <br>Cello - Shizuku Tatsuno & Meera Priyanka Raja
                     <br>Bass - Peter Farthing
                     <br>Studio engineer and mix - Luke Knott
                     <br>Final mix and editing - Oliver Buckland</p>
               </div>
            </div>
         </div>
         <div id="soundDS">
            <div class="container__sound">
               <div class="container__audio">
                  <p class="container__header">“Final Director's Statement Sound" (2020)
                  </p>
                  <audio controls>
                     <source src="/img/Projects/Final Director's Statement (2020).mp3" type="audio/mp3">
                  </audio>
               </div>
               <div class="container__credit">
                  <p>Collaboration for MA Collection→<br><br>
                     Concept by Samson Leung<br>
                     Music composed by Zacharias Wolfe<br>
                  </p>
               </div>
            </div>
         </div>
      </main>
   </section>
   <script src="js/projects.js"></script>
</body>

</html>

JS

const projTabs = document.querySelectorAll('.proj__nav a');
const directorSt = document.querySelector('.directorSt');
const dearYou = document.querySelector('.dearYou');
const archiveFilms = document.querySelector('.archiveFilms')
const pageAudios = Array.from(document.getElementsByTagName('audio'));
const pageVideos = Array.from(document.getElementsByTagName('video'));
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);


projTabs.forEach(tab => {
   tab.addEventListener('click', () => {
      pageAudios.forEach(a => {
         if (!a.paused) {
            a.pause();
         } else {}
      })
      pageVideos.forEach(v => {
         if(!v.isPaused) {
            v.pause();
         } else {}
      })
   })
})

if (!archiveFilms) {} else {
   archiveFilms.addEventListener('click', () => {
      projTabs.forEach(tab => {
         tab.classList.remove('active-proj');
         tab.classList.add('link-color');
         archiveFilms.classList.remove('link-color');
         archiveFilms.classList.add('active-proj');
      })
   })
}

if (!dearYou) {} else {
   dearYou.addEventListener('click', () => {
      projTabs.forEach(tab => {
         tab.classList.remove('active-proj');
         tab.classList.add('link-color');
         dearYou.classList.remove('link-color');
         dearYou.classList.add('active-proj');
      })
   })
}
if (!directorSt) {} else {
   directorSt.addEventListener('click', () => {
      projTabs.forEach(tab => {
         tab.classList.remove('active-proj');
         tab.classList.add('link-color');
         directorSt.classList.remove('link-color');
         directorSt.classList.add('active-proj')
      })
   })
}

const track = document.querySelector('.carousel__track');
const slides = Array.from(track.children);
const nextBtn = document.querySelector('.carousel__button--right')
const prevBtn = document.querySelector('.carousel__button--left');
const slideWidth = slides[0].getBoundingClientRect().width;
const videoText = document.querySelector(".carousel__slide-text");
const carouselVideos = document.querySelectorAll('.carousel__video');
const blue = document.querySelector('#blue');
const lvProj = document.querySelector('#lvproj');
const walking = document.querySelector('#walking');
const audio = document.querySelector('.vid-nav .audio');
const play = document.querySelector('.play');


const setSlidePosition = (slide, index) => {
   slide.style.left = slideWidth * index + "px";
}
slides.forEach(setSlidePosition);


const moveToSlide = (track, currentSlide, targetSlide) => {
   track.style.transform = "translateX(-" + targetSlide.style.left + ")";
   currentSlide.classList.remove('current-slide');
   targetSlide.classList.add('current-slide');
   if (targetSlide === slides[1]) {
      videoText.innerHTML = "LV Project → Hologram Presentation (2016) ";
      nextBtn.style.display = "block";
      prevBtn.style.display = "block";

   } else if (targetSlide === slides[2]) {
      videoText.innerHTML = "We Create Paths By Walking (2016)";
      nextBtn.style.display = "none";
      prevBtn.style.display = "block";

   } else if (targetSlide === slides[0]) {
      videoText.innerHTML = "BLUE → Research Film (2015)";
      nextBtn.style.display = "block";
      prevBtn.style.display = "none";
   }
}


prevBtn.addEventListener('click', e => {
   const currentSlide = track.querySelector('.current-slide');
   const prevSlide = currentSlide.previousElementSibling;
   moveToSlide(track, currentSlide, prevSlide);
   carouselVideos.forEach(v => {
      if (!v.paused) {
         v.pause();
         audio.classList.remove('blinking');
         play.innerHTML = "▶";
      };
   })

})


nextBtn.addEventListener('click', e => {
   const currentSlide = track.querySelector('.current-slide');
   const nextSlide = currentSlide.nextElementSibling;
   moveToSlide(track, currentSlide, nextSlide);
   carouselVideos.forEach(v => {
      if (!v.paused) {
         v.pause();
         audio.classList.remove('blinking');
         play.innerHTML = "▶";
      };
   })
})
play.addEventListener('click', () => {
   audio.classList.add('blinking');
   if (slides[0].classList.contains('current-slide')) {
      symbolSwitch(blue)
   } else if (slides[1].classList.contains('current-slide')) {
      symbolSwitch(lvProj)
   } else if (slides[2].classList.contains('current-slide')) {
      symbolSwitch(walking);
   }
})


function symbolSwitch(element) {

   if (element.paused) {
      element.play();
      play.innerHTML = "||"
      if (element.muted) {
         audio.classList.remove('blinking');
      }
   } else {
      element.pause();
      play.innerHTML = "▶";
      audio.classList.remove('blinking');
   }

}
audio.addEventListener('click', () => {

   if (slides[0].classList.contains('current-slide')) {
      symbolBlink(blue)

   } else if (slides[1].classList.contains('current-slide')) {
      symbolBlink(lvProj)
   } else if (slides[2].classList.contains('current-slide')) {
      symbolBlink(walking)
   }
})


function symbolBlink(element) {
   if (element.muted === true && (!element.paused)) {
      element.muted = false;
      audio.classList.add('blinking');
   } else {
      element.muted = true;
      audio.classList.remove('blinking');

   }
}

function smoothScroll(target, duration) {
   var target = document.querySelector(target);
   var targetPos = target.offsetLeft;
   var startPos = window.pageXOffset
   var distance = targetPos - startPos;
   var startTime = null; // keeps track of time

   function animation(currentTime) {
      if (startTime === null) startTime = currentTime;
      var timeElapsed = currentTime - startTime;
      var run = easeOut(timeElapsed, startPos, distance, duration);
      window.scrollTo(run, 0);
      if (timeElapsed < duration) {
         requestAnimationFrame(animation);
      }
   }

   function easeOut(t, b, c, d) {
      t /= d;
      return -c * t * (t - 2) + b;
   };

   requestAnimationFrame(animation);
}
if (window.matchMedia("(max-width: 1000px)").matches) {
   carouselVideos.forEach(v => {
      v.controls = true;
   })
} else {}
javascript css safari html5-video
14.09.2020

Ответы:


1

Можете ли вы попробовать переименовать свое видео, чтобы в нем не было всех пробелов? Я попробовал это в режиме отладки браузера, и, похоже, это сработало!

14.09.2020
  • хм, я обновил код на сервере, но он, похоже, не работает - я отредактировал приведенный выше код, чтобы показать изменения. 15.09.2020
  • так ты поменял название в инструментах отладки браузера и видео отобразилось??? 15.09.2020

    • 2

    Хорошо, это было решено, потому что-

    1. Apple требует атрибута playinline для видеоэлемента html 5
    2. ВАЖНО - мы должны предоставить фоновое изображение (свойство «плакат»), когда видео не воспроизводится пользователем. Chrome делает это автоматически — генерирует кадр, но Safari требует его в теге видео, иначе он отображается пустым.
    14.09.2020
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..