【发布时间】：2020-09-14 18:37:58
【问题描述】：
我的页面上有一个视频滑块。这是网站http://shekleung.com/projects.html 该代码可以在 chrome 和 ios safari 上完美运行，但不能在桌面上运行。在 safari 上检查该网站时，该视频出现在 html 页面上，甚至在它应该在的地方突出显示蓝色。我知道滑块是有效的，因为文本元素会根据正在显示的电影而变化。我对这在 Safari 中根本不显示感到困惑。我只能怀疑尺寸不对？我正在使用 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