Video

История видео на веб-страницах более насыщенна, и это естественно, такого рода материалы в www были востребованы чуть ли не с самого появления Всемирной паутины. Впрочем, достижения также не впечатляют. После экспериментов с анимированными gif-изображениями, ActiveX-объектами все закончилось использованием технологии Flash. Поэтому элемент <video> стал одним из знамен HTML5. О нем, наверное, знают все, как и о копьях сломанных вокруг форматов представления видеоконтента. Единый свободный формат — это, конечно, важно, но посмотрите, как удобно теперь этот самый контент вставлять в веб-страницу (рис. 91):

<video src="video. ogv" width=320 height=240 controls autoplay poster=’poster. jpg’> </video>

Рис. 91. Тег video

В более развернутом варианте это выглядит так:

<video width=320 height=240 autoplay controls Foster=’poster. jpg’> <source src="video. ogv" type=ideo/ogg>

<source src="ideo. mp4" type=ideo/mp4>

</ideo>

Как видите, все очень похоже на использование тега <audio>, вплоть до перестраховки с форматами, и в этом нет ничего удивительного: оба элемента являются наследниками MediaElement, и все поля, методы и события, описанные для HTMLAudioElevent, действуют и здесь. Но с некоторыми дополнениями. Во-первых, это новые атрибуты height и width, задающие, соответственно, высоту и ширину экрана проигрываемого видеоролика. Атрибут poster указывает на изображение, которое будет показано, когда ролик не проигрывается (при этом оно будет втиснуто в заданные размеры).

Кроме того, объект HTMLideoElement поддерживает следующие дополнительные свойства:

— height — высота видеоролика (в пикселях);

— width — ширина видеоролика (в пикселях);

— poster — url файла с постером;

— ideoHeight — «естественная» высота видеоролика, хранящаяся в файле (в пикселях, только для чтения);

— ideoWidth — «естественная» ширина видеоролика, хранящаяся в файле (в пикселях, только для чтения).

Тут тоже можно и нужно использовать API медиаэлемента для дополнения функциональности интерфейса. Например, сделать стандартную для видеоустройств возможность просматривать видеоролик в ускоренном режиме. Сначала добавим соответствующие кнопки:

<input type=’button’ value = ‘-‘ onclick = "setSpeed(-1);"> <input type=’button’ value = ‘+’ onclick = "setSpeed(1);"> <script>

Var speed = 1; window. onload=function(){

Player = document. getElementById(‘plr’);

}

</script>

Теперь сама функция:

Function setSpeed(r){ speed = speed +(1*r); player. playbackRate = speed;

}

Напомним, что все методы API, описанные в главе, посвященной элементу <audio>, доступны и для <video>, и при должной фантазии из веб-страницы можно сделать настоящий видеоцентр. Инструменты для этого у нас уже есть, но мы теперь займемся еще более интересными вещами, тоже связанными с медиаконтентом.