Набор авторов в комманду!!!




Пожертвовать на развитие сайта. Пожертвовать

Элемент video в html 5

Главная » Справочники » Справочник HTML5 » Элемент video в html 5
Элемент video новый в HTML5, предоставлет API для проигрывания видео.
var

Поддержка браузерами элемента video в HTML5

Элемент video в браузере Internet Explorer 9.0 поддерживается в ночных сборках
Элемент video в браузере Firefox 3.5 поддерживается
Элемент video в браузере Chrome 3.0 поддерживается
Элемент video в браузере Safari поддерживается
Элемент video в браузере Opera 10.5 поддерживается

Описание элемента video в HTML5

Элемент video предоставляет API для проигрывания видео.

Сейчас элемент video обладает следующими характеристиками:

Атрибуты элемента video в HTML5

Методы элемента video в HTML5

Свойства элемента video в HTML5

Отличие элемента video HTML4.1 от HTML5

Элемент video добавлен в HTML 5.

Атрибуты элемента video в HTML5

Атрибуты video Описание атрибутов элемента video
autoplay

Атрибут autoplay указывает, что видео должно воспроизводится сразу после загрузки страницы.

Пример для атрибута autoplay элемента video 
<video autoplay>
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video autoplay="autoplay">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
Корректное отображение элемента video
в Chrome		 Отображение элемента video
в вашем браузере
Правильное отображение элемента video с атрибутом autoplay, в Chrome
autobuffer

Атрибут autobuffer указывает, что видео должно воспроизводится во время загрузки страницы.

Пример для атрибута autobuffer элемента video 
<video autobuffer>
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video autobuffer="autobuffer">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
Корректное отображение элемента video
в Chrome		 Отображение элемента video
в вашем браузере
controls

Атрибут controls указывает, что необходимо отобразить панель управления видео. 

<video controls>
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video controls="controls">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
loop

Атрибут loop указывает, что видео проигрывается снова. 

<video loop>
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video loop="loop">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
src

Атрибут src указывает источник видео. 

<video>
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
type

Атрибут type указывает тип видео. Используется несколько типов:

  • type="video/ogg" - OGG формат

<video>
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
height

Атрибут height указывает высоту видеоплейера на странице. 

<video height="200">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
Вместо атрибута height предпочтительнее использовать CSS свойство height. Смотрите пример ниже. 
<video height="50">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video height="100">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video height="200">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video style="height:50px">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video style="height:100px">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video style="height:200px">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
width

Атрибут width указывает ширину видеоплейера на странице. 

<video width="300">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
Вместо атрибута width предпочтительнее использовать CSS свойство width. Смотрите пример ниже. 
<video width="50">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video width="100">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video width="200">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video style="width:50px">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video style="width:100px">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<video style="width:200px">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>

API элемента video в HTML5

Свойство или метод элемента video Описание свойств или методов элемента video
pause()

Метод pause() указывыет остановить проигрывание видео в видеопроигрывателе. 

<video controls="controls" id="videoSamplePause">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<p>
	<button type="button"
		onclick="document.getElementById('videoSamplePause').pause();">
		Запаузить
	</button>
</p>
paused

Свойство paused указывыет находится ли видео ролик на паузе. 

<div>			
	<video controls>
		<source src="/public/html5/video.ogv" type="video/ogg">
	</video><br>
	<button onclick="el=this.previousElementSibling.previousElementSibling;
		if(el.paused){
			alert(\'А ничевошеньки, не смотриццо!\');
		}else{
			alert(\'Смотрим как плавают бегемотики!\')
		};">Проигрывается ли видео?</button>
</div>
play()

Метод play() указывыет запустить видео на проигрывание. 

<video controls="controls" id="videoSamplePlay">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>
<p>
	<button type="button"
		onclick="document.getElementById('videoSamplePlay').play();">
		Зазырить
	</button>
</p>

Примеры использования элемента video в HTML5

Для FireFox, Chrome

<video>
	<video controls="controls">
	<source src="/public/html5/video.ogv" type="video/ogg">
</video>

Результат отображения элемента video:

Для FireFox

Двэ кнопки:

Адын кнопка:

var