HTML 5 работа с видео HTML 5 SVG

HTML 5 работа с видео HTML 5 SVG 1

HTML 5 работа с видео <video> - тег, позволяющий встраивать в веб-страницы видео файлы 2

Браузеры, поддерживающие видео: n n n Internet Explorer 9+ Opera 10. 50+ Firefox 3. 5+ Chrome 3. 0+ Safari 3. 1+ 3

Атрибуты видео: n n n n src - указывает путь к видео файлу, который будет воспроизведен; width и height – задают размеры плеера; сontrols - отображает в плеере кнопки управления видео; poster - указывает на изображение, которое браузер будет показывать, пока загружается видео, или пока пользователь не начнёт воспроизведение. Если этот атрибут не указать, то вместо него будет показан первый кадр видео; autoplay - начнёт воспроизведение видео автоматически; autobuffer - начать загрузку видео после завершения загрузки страницы; loop - атрубут типа boolean, позволяющий воспроизводить видео циклически. 4

Пример: 5

Кодеки — ложка дёгтя в бочке мёда n n n Opera и Firefox - поддерживают формат Ogg (с видео кодеком Theora) и Web. M (с видео ) и Web. M ( кодеком VP 8) ; Internet Explorer и Safari - поддерживают MPEG 4 (с видео кодеком H. 264) ; MPEG 4 ( Chrome - имеет поддержку всех перечисленных форматов. 6

7

Обратите внимание!!! С помощью атрибута type Вы должны указать mime-тип видео файла. Видео в формате: ogg - должно иметь тип 'video/ogg', mp 4 - 'video/mp 4', webm - 'video/webm'. 8

Поддержка старых браузеров 9

Конвертация видео в форматы поддерживаемые HTML 5 Для быстрой конвертации видео в необходимые форматы (Ogg, MPEG 4 и Web. M) мы можем порекомендовать бесплатную программу Miro Video Converter. 10

Создание собственных элементов управления видео n n play() и pause() - эти методы начинают и останавливают воспроизведение видео. play() начнёт показ видео с текущей позиции воспроизведения. Когда фильм впервые загружен, этой позицией будет первый кадр ролика. Обратите внимание, что нет метода stop() — если вы хотите остановить воспроизведение и "перемотать" на начало ролика, вы должны использовать pause() и самостоятельно программно изменить текущую позицию воспроизведения. volume - Этот атрибут может использоваться, чтобы получить или установить уровень громкости аудио-трека в видео — значение типа float от 0. 0 (тихо) до 1. 0 (громко). muted - Независимо от уровня громкости позволяет отключить звук в видео. current. Time - Этот атрибут возвращает текущую позицию воспроизведения в секундах (значение типа float). При установке этого атрибута позиция воспроизведения перемещается в указанную временную позицию, если это возможно. 11

События: n n loadeddata - Возникает, когда браузер загрузил достаточный объем видео данных для начала воспроизведения с текущей позиции. play и pause - Возникают, когда воспроизведение было начато или приостановлено. Если мы управляем видео с помощью Java. Script, нам понадобиться "прослушать" эти события, чтобы гарантировать, что вызов методов play() и pause() действительно был успешным. timeupdate - Возникает при изменении текущей позиции воспроизведения. Причиной этого может служить то, что видео воспроизводится, скрипт изменил позицию программно или пользователь решил перескочить в другую позицию видео. ended - Достигнут конец видео-трека и у элемента <video> не установлен режим циклического воспроизведения или воспроизведения в обратном направлении. 12

HTML 5 SVG 13

SVG (Scalable Vector Graphics) - векторный графический формат, основанный на XML, имеющий свою DOM (Document Object Model) для работы через Java. Script. 14

В рамках HTML 5 определен специальный тег <svg> в дополнение к вставке в виде изображений и объектов: <img src="elvis. svg" … /> <object data="elvis. svg" type="image/svg+xml" … /> позволяющий делать inline-вставку SVG-контента непосредственно в тело документа (и в этом виде с ним можно работать в том же контексте Java. Script, что и с другими элементами документа). 15

Синтаксис SVG Файл SVG изображения имеет расширение. svg или . svgz, описывается по всем синтаксическим правилам XML, а именно: Начинается с заголовка (объявления XML) и указания DOCTYPE (не обязательно), например: <? xml version="1. 0" encoding="UTF-8"? > <!DOCTYPE svg PUBLIC "-//W 3 C//DTD SVG 1. 1//EN" "http: //www. w 3. org/Graphics/SVG/1. 1/DTD/svg 11. dtd"> 1. 16

2. Продолжается объявлением корневого элемента (в данном случае - <svg>). Этот элемент является непосредственным холстом рисунка, в параметрах задается пространство имен, ширина, высота документа. <? xml version="1. 0" encoding="utf-8" standalone="yes"? > <svg xmlns="http: //www. w 3. org/2000/svg" version="1. 1" height = "400 px" width = "400 px"> </svg> 17

3. Внутри корневого элемента вставляются элементы (теги), описывающие само изображение. Пример: <? xml version="1. 0" encoding="utf-8" standalone="yes"? > <svg xmlns="http: //www. w 3. org/2000/svg" version="1. 1" height = "400 px" width = "400 px"> <circle cx="100 px" cy="100 px" r="100 px" fill="red" /> <circle cx="150 px" cy="150 px" r="100 px" fill="blue" /> <circle cx="200 px" cy="200 px" r="100 px" fill="green" /> </svg> (заданы 3 разноцветные круга диаметром 100 пикселей каждый. ) 18

4. Каждому тегу могут быть присвоены атрибуты. В зависимости от атрибутов тега, фигура, описываемая этим тегом, будет иметь те или иные свойства (положение по оси X и Y, цвет фона, рамки и т. д. ). <circle cx="100 px" cy="100 px" r="100 px" fill="red" style="fill-opacity: 0. 5" /> Тег circle имеет 4 параметра: - cx, cy - координаты по оси X и Y. Координаты отчисляются с верхнего левого угла (это 0 -0). - r - радиус - fill - цвет заливки - style - стиль элемента (в данном случае - прозрачность 0. 5). 19

Пример SVG изображения (3 разноцветных круга и квадрат) Чтобы создать такую картинку у себя на компьютере, достаточно создать файл с расширением. svg и в текстовом редакторе добавить этот код: <? xml version="1. 0" encoding="utf-8" standalone="yes"? > <svg xmlns="http: //www. w 3. org/2000/svg" version="1. 1" height = "400 px" width = "400 px"> <circle cx="100 px" cy="100 px" r="100 px" fill="red" style="fill-opacity: 0. 5" /> <circle cx="150 px" cy="150 px" r="100 px" fill="blue" style="fill-opacity: 0. 5" /> <circle cx="200 px" cy="200 px" r="100 px" fill="green" style="fill-opacity: 0. 5" /> <rect x="0" y="0" width="100" height="100" fill="black" stroke-width="5 px" /> </svg> n 20

Элементы (Теги) SVG - Title - Описывает заголовок документа - Desc - Описание документа - Path - Самым мощным тегом SVG является <path>. Он позволяет описывать сложные геометрические фигуры в виде компактной строки, пример: <path d="M 100 L 300 100 L 200 300 z" fill="red" stroke="blue" strokewidth="3" /> 21

Список всех буквенных команд параметра d тега path: n n n M - переместить "указатель" (x, y) L - провести линию от текущй точки до указанной (x, y) H - провести горизонтальную линию от текущей точки до указанной (x) V - провести вертикальную линию от текущей точки до указанной (y) z - замкнуть фигуру. 22

Rect- Рисует прямоугольник. <rect x="100" y="100" width="80" height="120"></rect> n Прямоугольник шириной 80, высотой 120, находящийся в координате 100 -100. Помимо общих, могут быть присвоены дополнительные атрибуты: n rx - скругление по оси x n ry - скругление по оси Пример (желтый прямоугольник с черной рамкой): <? xml version="1. 0" standalone="no"? > <svg width="12 cm" height="4 cm" view. Box="0 0 1200 400" xmlns="http: //www. w 3. org/2000/svg" version="1. 1"> <rect x="400" y="100" width="400" height="200" fill="yellow" stroke="navy" stroke-width="10" /> </svg> 23

Circle - Рисует круг. <circle cx="150 px" cy="100 px" r="100 px" /> Круг радиусом 150 пикселей, находящийся в координате 100 -100. Пример (красный круг с синей рамкой): <? xml version="1. 0" standalone="no"? > <svg width="12 cm" height="4 cm" view. Box="0 0 1200 400 xmlns="http: //www. w 3. org/2000/svg" version="1. 1"> <circle cx="600" cy="200" r="100 fill="red" stroke="blue" strokewidth="10" /> </svg> n 24

Ellipse - Рисует эллипс. <ellipse cx="100" cy="100" rx="70" ry="40"></ellipse> n Эллипс шириной 70, высотой 40 в координате 100 -100. Пример (2 эллипса, один наклонен ( rotate(-30) )): <? xml version="1. 0" standalone="no"? > <svg width="12 cm" height="4 cm" view. Box="0 0 1200 400" xmlns="http: //www. w 3. org/2000/svg" version="1. 1"> <g transform="translate(300 200)"> <ellipse rx="250" ry="100" fill="red" /> </g> <ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" /> </svg> 25

Line - Рисует линию. <line x 1="100" y 1="300" x 2="300" y 2="100" stroke="red" stroke-width="5" /> n Линия, берущая начало в 100 -300 и заканчивающаяся в 300 -100, красный цвет, шириной 5. 26

Polyline - Рисует незамкнутые фигуры, проводя линию по заданным точкам. Дополнительный атрибут: points, в качестве аргумента передаются точки через запятую. Все точки разбиваются на чередующиеся пары (x, y, x, y. . . ). Элемент является упрощенным аналогом <path>, где нет необходимости описывать буквенные команды (M и L). n Пример (синие зубья): <? xml version="1. 0" standalone="no"? > <svg width="12 cm" height="4 cm" view. Box="0 0 1200 400" xmlns="http: //www. w 3. org/2000/svg" version="1. 1" <polyline fill="none" stroke="blue" stroke-width="10" points="50, 375 150, 325 250, 375 350, 250 450, 375 550, 175 650, 375 750, 100 850, 375 950, 25 1050, 375 1150, 375" /> </svg> 27

n Polygon - Является аналогом <polyline>, однако конечная фигура автоматически замкнется: Пример (звезда и многоугольник): <? xml version="1. 0" standalone="no"? > <svg width="12 cm" height="4 cm" view. Box="0 0 1200 400" xmlns="http: //www. w 3. org/2000/svg" version="1. 1"> <polygon fill="red" stroke="blue" stroke-width="10" points="350, 75 379, 161 469, 161 397, 215 423, 301 350, 250 277, 301 303, 215 231, 161 321, 161" /> <polygon fill="lime" stroke="blue" stroke-width="10" points="850, 75 958, 137. 5 958, 262. 5 850, 325 742, 262. 6 742, 137. 5" /> </svg> 28

Text - Вставляет текстовые данные в рисунок. <text x="100" y="100" stroke="none" fill="#000000" font-weight="bolder" fontfamily="Arial" fontsize="16 px"><tspan>Привет</tspan></text> n Строка "Привет" в координате 100 -100, цвет черный, стиль "жирный", шрифт "Arial" 16 пикселей. <tspan> внутри <text> позволяет разделять строку на отдельные элементы и присваивать каждому элементу свои стили оформления. 29

n Image - Вставляет растровое изображение из отдельного файла в векторный SVG рисунок. <image xlink: href="123. jpg" width="678" height="435"/> Чтобы работало, нобходимо указать пространство имен xmlns: xlink="http: //www. w 3. org/1999/xlink" в качестве атрибута к тегу <svg. Значением xlink: href может быть как путь до растровой картинки, так и сама картинка, зашифрованная в base 64 (data: image/gif; base 64, [тут base 64 строка]). 30

n G - Тегом <g> можно группировать элементы SVG в один контейнер, при этом все элементы созданного контейнера будут перенимать атрибуты, заданные в открывающем теге <g>. Пример (5 разных линий перенимают свойтво зеленой рамки (stroke="green") от тега <g>): <? xml version="1. 0" standalone="no"? > <svg width="12 cm" height="4 cm" view. Box="0 0 1200 400" xmlns="http: //www. w 3. org/2000/svg" version="1. 1"> <g stroke="green" > <line x 1="100" y 1="300" x 2="300" y 2="100" stroke-width="5" /> <line x 1="300" y 1="300" x 2="500" y 2="100" stroke-width="10" /> <line x 1="500" y 1="300" x 2="700" y 2="100" stroke-width="15" /> <line x 1="700" y 1="300" x 2="900" y 2="100" stroke-width="20" /> <line x 1="900" y 1="300" x 2="1100" y 2="100" stroke-width="25" /> </g> </svg> 31

SVG следует использовать для: Создания пользовательских интерфейсов вебприложений, независимых от разрешения экрана. n Высокоинтерактивных анимированных пользовательских интерфейсов. n Графиков и диаграмм. n Редактирования векторных изображений. 32

Когда можно использовать SVG, а когда нет Вы можете использовать SVG вместо GIF, JPEG или PNG где угодно. В SVG файле находятся указания для создания рисунка, а не готовый растр. Являясь векторной графикой, изображения SVG могут масштабироваться по размеру страницы без искажений, в отличие от растровых изображений (PNG или JPEG). Такая масштабируемость чрезвычайно удобна пользователю, когда он просматривает веб-страницы с миниатюрных устройств типа i. Phone или на 32 -дюймовых мониторах. 33

Поддержка браузерами 34

Internet Explorer и SVG Internet Explorer не поддерживает SVG. К счастью, отсутствие поддержки SVG в IE теперь не является барьером для нас. Такие библиотеки как SVGWeb, Ample SDK и Raphael добавляют поддержку SVG в текущих и предыдущих версиях IE. Кроме того, спецификация HTML 5 включает возможности для вставки SVG в HTML, прежде доступные лишь в XHTML. Этот факт и недавняя новость о присоединении Microsoft к рабочей группе W 3 C SVG, даёт нам надежду на то, что со временем в IE появится непосредственная поддержка SVG — вероятно даже в IE 9. 35

Преимущества SVG перед Canvas: n Высокая производительность при отрисовке любых 2 D объектов. n Стабильная производительность — всё есть пиксель. Производительность падает только при увеличении разрешения изображения. n Можно сохранить полученное изображение в PNG или JPG файл. n Лучше всего подходит для создания растровой графики (например, в играх, фракталов и т. п. ), редактирования изображений и операций, требующих манипулирования на уровне пикселей. SVG: n Нет зависимости от разрешения — SVG лучше подходит для кроссплатформенных пользовательских интерфейсов, так как позволяет масштабировать изображение при различных разрешениях экрана. n SVG очень хорошо поддерживает анимацию. Элементы могут быть анимированы с использованием описательного синтаксиса или с помощью Java. Script. n Можно получить полный контроль над каждым элементом, используя SVG DOM API в Java. Script. n SVG хранится в формате XML, что предоставляет больше возможностей браузерам по обеспечению доступности SVG документов по сравнению с элементом canvas. Таким образом, SVG выглядит лучшим решением для пользовательских интерфейсов веб-приложений. 36

Недостатки SVG перед Canvas: n Отрисовка основана на пикселях. n Не существует API для анимации. Вам придется прибегать к использованию таймеров и других событий для обновления канвы. n Слабые возможности по рендерингу текста. n Возможно, не самый лучший выбор, когда доступность имеет решающее значение. Канва предоставляет вам поверхность для рисования в выбранном контексте (2 D и 3 D). Можно указать альтернативный контент внутри элемента canvas, который будет показан браузером при невозможности отображения графики. Кроме того, вы можете выполнить проверку доступности выбранного Canvas API с помощью Java. Script. На основе этого вы можете обеспечить различную функциональность для пользователей браузеров с разной поддержкой HTML 5 Canvas. n HTML 5 Canvas не подходит для создания веб-сайтов или интерфейсов веб-приложений, так как пользовательские интерфейсы обычно должны быть динамическими и интерактивными, а Canvas требует от вас постоянной перерисовки каждого элемента в интерфейсе. SVG: n Низкая скорость рендеринга при увеличении сложности документа (рисунка), так как используется модель DOM n Скорее всего, SVG не подходит для таких приложений как игры. Возможно лучшим выбором будет комбинация HTML Canvas + SVG. 37

Спасибо, за внимание! Oksana Konareva special for EIM-38 group 38