#javascript #ios #html #ipad #video
#javascript #iOS #HTML #iPad #Видео
Вопрос:
Привет, я кодирую локальный сайт для iPad, и у меня есть видео без элементов управления, которое воспроизводится и приостанавливается при нажатии. Возможно ли показывать изображение плаката, когда видео приостановлено? Или показывать кнопку паузы в центре? Вот код, который у меня есть для воспроизведения и приостановки:
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
var overlay = document.getElementById('video-overlay');
var video = document.getElementById('video');
var videoPlaying = false;
overlay.onclick = function() {
if (videoPlaying) {
video.pause();
videoPlaying = false;
}
else {
video.play();
videoPlaying = true;
}
}
}//]]>
</script>
и HTML для видео
<div id='video-overlay'></div>
<video width="768" height="432" poster="thumbnail2.jpg" id='video'>
<source src="PhantomFuse3_TechVideo_h264.mp4" type="video/mp4">
</video>
Ответ №1:
Другим решением является вызов:
video.load()
Это приведет к повторному отображению изображения плаката. при следующем взаимодействии видео будет перезапущено, но вы можете сохранить временную метку и начать воспроизведение оттуда, если хотите.
Ответ №2:
Вам нужно будет зарегистрировать событие паузы на видео.
Что-то вроде этого: код JSFiddle
Конечно, вы должны изменить это для своих нужд и добавить некоторую структуру. Хотя я не пробовал это на iPad. Также обратите внимание: регистрация щелчка приведет к задержке в 300 мс при нажатии события. Вы должны посмотреть событие touchstart для сенсорных устройств и зарегистрировать как щелчок, так и touchstart.
var overlay = document.getElementById('video-overlay'),
video = document.getElementById('video'),
videoPlaying = false;
function hideOverlay() {
overlay.style.display = "none";
videoPlaying = true;
video.play();
}
function showOverlay() {
// this check is to differentiate seek and actual pause
if (video.readyState === 4) {
overlay.style.display = "block";
videoPlaying = true;
}
}
video.addEventListener('pause', showOverlay);
overlay.addEventListener('click', hideOverlay);