Мы все смирились с этим: запуска браузера перезагружает все вкладки ранее был открыт, взрывных Cacophonous сочетание звука и видео.В то время как браузеры сделали его легче контролировать этот опыт с помощью клавиши икон и расширений, таких как MuteTab, для большинства людей такое поведение представляет собой запутанную и дезориентирующее опыт.Как-разработчиков и дизайнеров это наша работа, чтобы сделать веб-приветствуя, не перегружая .

Разве это не имеет смысла, что сайты должны быть активны, только когда они сосредоточены закладку Первичный?Почему мы сжигать батареи и циклы процессора с анимацией, которые не могут быть восприняты?

К счастью, есть решение: HTML5 Page Visibility API.Вы можете видеть, что это используется, в частности эффективно в последние проектов Активный Theory ¹ , такие, как их работы Под Armor ² и A космических аппаратов для All ³ : нажмите на другую вкладку, и вы увидите, что мультимедийные презентации паузы и музыка исчезает.Такое поведение является типичным то, что я хотел бы назвать “вежливой Интернет”: сайты, которые внимательны к пользователей внимания, пропускной способности и умения .

В последние разработчиков пытались создать такое поведение, добавив onblur() и onfocus() обработчики окна.В то время как они значительно лучше, чем ничего, подход ограничен тем, что он не может сказать, если окно на самом деле скрытые для пользователя.Например, имея два окна броузера бок-о-бок и переключение между ними будет по-прежнему регистрироваться в качестве onblur() или onfocus(), хотя содержание в каждом остается прекрасно видно .

Реализация Page Visibility

В то время как есть много возможностей для использования Page Visibility API, пожалуй, самый очевидный вариант использования, когда страница содержит видео: там, как правило мало смысла в продолжении воспроизведения видео контент, если пользователь не может видеть его.

<video autoplay controls id="videoElement">
	<source src="rar.mp4">
	<source src="rar.webm">
</video>

<script>
var videoElement = document.getElementById("videoElement");
document.addEventListener("visibilitychange", function() {
if (document.hidden) {     
videoElement.pause();  
} else {
videoElement.play();   
} 
});
</script>

Одна проблема с этим является то, что это немного резким: аудио на видео начинается и останавливается, как будто отрезали гильотины, когда пользователь переключается вкладки.Презентация может быть значительно улучшена путем постепенного аудио в и из как вкладка находится в фокусе.Если мы используем JQuery, мы можем использовать аккуратный использование animate способ сделать так .

<script>

var videoElement = document.getElementById("videoElement");

document.addEventListener("visibilitychange", function() {

if ... 

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


 		
		
				
		
				

			  Главная   →  Программирование  → 20.01.2015  by  coding.smashingmagazine.com