- •Міністерство освіти і науки україни
- •Програмування для internet Посібник до виконання лабораторних робіт
- •Документы html5
- •Структура тела документа
- •Макет страницы
- •Строение тела документа
- •Отображение документа в окне браузера
- •Стили css
- •Стили и стуктура
- •Блочные элементы
- •Основы применения стилей
- •Строчные стили
- •Встроенные стили
- •Внешние файлы
- •Ссылка по любому атрибуту
- •Определение ссылок по псевдоклассам
- •Новые селекторы
- •Контрольные вопросы и задания:
- •Лабораторная работа №3 Традиционная блочная модель
- •Задание: Применить к шаблону документа, созданного в лабораторной работе №1, традиционную блочную модель. Краткие теоретические сведения
- •Универсальный селектор *
- •Новая иерархия заголовков
- •Объявление новых элементов html5
- •Выравнивание тела документа по центру
- •Создание главного блока
- •Заголовок
- •Навигационная полоса
- •Раздел и боковая врезка
- •Нижний колонтитул
- •Принцип работы гибкой блочной модели
- •Свойство display
- •Свойство box-orient
- •Свойство box-direction
- •Свойство box-ordinal-group
- •Сойство box-pack
- •Свойство box-flex
- •Свойство box-align
- •Гибкая блочная модель
- •Свойства css3
- •Свойство border-radius
- •Свойство box-shadow
- •Свойство text-shadow
- •Свойство @font-face
- •Линейный градиент
- •Радиальный градиент
- •Свойство outline
- •Свойство border-image
- •Свойства transform и transition
- •Функция transform: rotate
- •Функция transform: skew
- •Функция transform: translate
- •Одновременное использование всех видов трансформации
- •Динамические трансформации
- •Переходы
- •Лабораторная работа №6
- •Внедрение JavaScript
- •Обработчики событий
- •Воспроизведение видеои аудио с помощью html5
- •Программирование видеопроигрывателя
- •Свойства
- •Выполнение кода
- •Воспроизведение аудио с помощью html5
- •Программирование видеопроигрывателя
- •Контрольные вопросы и задания:
- •Лабораторная работа №8 Новые элементы, типы ввода и атрибуты, расширяющие функциональность форм
- •Задание: использовать новые возможности для создания форм, появившиеся в спецификации html5 и добавить их в разрабатываемый веб-сайт. Краткие теоретические сведения:
- •Атрибут multiple
- •Атрибут autofocus
- •Атрибут pattern
- •Атрибут form
- •Новые элементы форм
- •Контрольные вопросы и задания:
- •Лабораторная работа №9 Установка Apache и php. Конфигурационные файлы
- •Краткие теоретические сведения:
- •Доступ к содержимому массива
- •Использование циклов для доступа к массиву
- •Массивы с различными индексами
- •Операции для работы с массивами
- •Загрузка массивов из файлов
- •Швець н.В. Програмування для internet Посібник до виконання лабораторних робіт
- •65039, Одеса, вул. Канатна, 112
Программирование видеопроигрывателя
В разных браузерах используется собственный графический дизайн элементов управления воспроизведением. В каждом браузере собственные кнопки и индикатор прогресса, даже собственный набор функций. В профессиональной среде, где каждая деталь имеет значение, единообразие дизайна обязательно должно сохраняться во всех механизмах и приложениях.
Спецификация HTML5 предоставляет новые свойства, события и методы манипулирования видео и иньегрирования его в документы. Теперь мы можем создавать собственные видеопроигрыватели и наполнять их желаемой функциональностью, применяя для этого HTML, CSS и JavaScript.
Дизайн
Каждому видеопроигрывателю требуется панель управления, предоставляющая хотя бы базовые возможности.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Video Player</title>
<link rel="stylesheet" href="player.css">
<script src="player.js"></script>
</head>
<body>
<section id="player">
<video id="media" width="720" height="400">
<source src="trailer.mp4">
<source src="trailer.ogg">
</video>
<nav>
<div id="buttons">
<button type="button" id="play">Play</button>
</div>
<div id="bar">
<div id="progress"></div>
</div>
<div style="clear: both"></div>
</nav>
</section>
</body>
</html>
В этом листинге после элемента <video> мы добавили новый элемент <nav>. Элемент <nav> включает в себя два элемента <div>: buttons и bar, предоставляющие кнопку Play и индикатор прогресса.
Шаблон также включает в себя две ссылки на внешние файлы с кодом: plaer.css, содержащий css-стили, и player.js, содержащий код сценария.
Рассмотрим первый файл.
body{
text-align: center;
}
header, section, footer, aside, nav, article, figure, figcaption, hgroup{
display: block;
}
#player{
width: 720px;
margin: 20px auto;
padding: 5px;
background: #999999;
border: 1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
nav{
margin: 5px 0px;
}
#buttons{
float: left;
width: 85px;
height: 20px;
}
#bar{
position: relative;
float: left;
width: 600px;
height: 16px;
padding: 2px;
border: 1px solid #CCCCCC;
background: #EEEEEE;
}
#progress{
position: absolute;
width: 0px;
height: 16px;
background: rgba(0,0,150,.2);
}
Для создания блока, котрый будет включать в себя все составляющие видеопроигрывателя, мы применили техники традиционной блочной модели. С помощью возможностей данной модели блок выравнивается по центру окна. Третий тег <div> в конце элемента <nav> содержит строчный стиль, восстанавливающий нормальный поток документа.
Атрибут width для элемента <div> с id=”progress” инициализируется значением 0. Это необходимо потому что мы хотим использовать данный элемент для имитации индикатора прогресса, который меняется по мере воспроизведения видео.
Код
Теперь напишем код JavaScript для проигрывателя. Мы покажем использование самых необходимых свойств , событий и методов, с помощью которых обрабатывается видео.
События
В HTML5 появились новые события, относящиеся к конкретным API. Для обработки видео и аудио лены события, информирующие о состоянии мультимедиа – например, о том, какая доля видео уже загружена, завершилось ли воспроизведение файла, воспроизводится ли видео или приостановлено и т.п. Мы не будем использовать в примере все события, однако для построения более сложных приложений они могут понадобиться. Перечислим наиболее часто используемые:
progress. Это событие срабатывает периодически и обновляет информацию о состоянии загрузки мультимедиа. Для доступа к этой информации используется атрибут buffered, который мы рассмотрим позднее;
canplaythrough. Это событие срабатывает когда становится известно, что весь файл мультимедиа может быть воспроизведен без перерывов. Статус устанавливается с учетом текущей скорости и загрузки в предположении, что она сохранится до окончания загрузки файла. Существует и другое событие, выполняющее аналогичную функцию – canplay. Однако оно не учитывает ситуацию в целом и срабатывает, когда доступными становятся всего пара кадров;
ended. Срабатывает, когда мультимедиа воспроизводится до конца;
pause. Срабатывает, когда мультимедиа приостанавливается;
play. Срабатывает при запуске воспроизведения мультимедиа;
error. Срабатывает, когда происходит ошибка. Это событие доставляется в элемент <source>, соответствующий источнику мультимедиа, на котором произошла ошибка.
Посредством нашего проигрывателя будем прослушивать только события click и load.
Свойства, события и методы API-интерфейсов пока что находятся на этапе разработки.
var maxim, mmedia, play, bar, progress, loop;
function initiate(){
maxim = 400;
mmedia = document.getElementById('media');
play = document.getElementById('play');
bar = document.getElementById('bar');
progress = document.getElementById('progress');
play.addEventListener('click', push, false);
bar.addEventListener('click', move, false);
}
Это первая функция для нашего видеопроигрывателя – initiate, т.к. она инициирует приложение, т.е. запускает его выполнение после завершения загрузки окна.
Так как эта функция исполняется первой, необходимо установить глобальные переменные для настройки проигрывателя. Используя селектор getElementById(), мы определим ссылки на все элементы проигрывателя, для того чтобы позднее обращаться к ним в коде. Мы также установим переменную maxim, чтобы всегда знать максимальный размер индикатора прогресса (600px).
Наш проигрыавтель должен принимать во внимание два действия: пользователь щелкает на кнопке Play (Воспроизведение) и пользователь щелкает на индикаторе прогресса, для того чтобы перейти ближе к началу или к концу медиафайла. Для этой цели мы добавили два прослушивателя событий.
Методы
function push(){
if(!mmedia.paused && !mmedia.ended) {
mmedia.pause();
play.innerHTML = 'Play';
window.clearInterval(loop);
}else{
mmedia.play();
play.innerHTML = 'Pause';
loop = setInterval(status, 1000);
}
}
Функция push() – первая из функций, выполняющих конкретные действия. В зависимости от ситуации она вызывает специальные методы pause() и play(). Эти методы входят в список методов, специально добавленных в HTML5 для обработки мультимедиа. Перечислим наиболее часто используемые методы из этого списка:
play. Запускает воспроизведение медиафайла с самого начала, если только он не воспроизводился до этого и не был приостановлен;
pause(). Приостанавливает воспроизведение;
load. Загружает медиафайл. Его полезно применять для того, чтобы в динамических приложениях загружать мультимедиа заранее;
canPlayType(тип). Благодаря этому методу мы узнаем, поддерживается ли определенный формат браузером.