Лекция: Конспект лекций ОИД_испраленный2
Целесообразно прописать свойста transition и transform для видимости во всех браузерах, используя нестандартные свойства -ms-, -webkit-, -o-, -moz-:
|
Chrome до версии 26.0, Safari, Android и iOS |
Internet Explorer 9 поддерживает |
|
поддерживают нестандартное свойство - |
нестандартное свойство -ms-transform. |
|
webkit-transition. |
Chrome, Safari, Android и iOS поддерживают |
|
Opera до версии 12.10 поддерживает |
нестандартное свойство -webkit-transform. |
|
нестандартное свойство -o-transition. |
Opera до версии 12.10 поддерживает |
|
Firefox до версии 16.0 поддерживает |
нестандартное свойство -o-transform. |
|
нестандартное свойство -moz-transition. |
Firefox до версии 16.0 поддерживает |
|
нестандартное свойство -moz-transform. |
|
-
Добавление аудио-файлов
Тег <audio> добавляет, воспроизводит и управляет настройками аудиозаписи на веб-странице. Путь к файлу задается через атрибут src или вложенный тег <source>. Внутри контейнера <audio> можно написать текст, который будет выводиться в браузерах, не работающих с этим тегом.
Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.
Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.
Синтаксис
<audio src="URL"></audio>
<audio>
<source src="URL">
</audio>
Атрибуты
autoplay Звук начинает играть сразу после загрузки страницы.
controls Добавляет панель управления к аудиофайлу.
loop Повторяет воспроизведение звука с начала после его завершения. preload Используется для загрузки файла вместе с загрузкой веб-
страницы.
src Указывает путь к воспроизводимому файлу.
Пример
<!DOCTYPE html>
<html>
<head>
<title>audio</title>
</head>
<body>
<p>Исполнитель - Название</p>
<audio controls>
<source src="audio/music.ogg" type="audio/ogg"> <source src="audio/music.mp3" type="audio/mpeg">
</audio>
</body>
</html>
-
Добавление видео-файлов
Тег <video> встраивает цифровое видео на веб-страницу. Как и в случае с <audio>, элемент <video> может иметь атрибут src, указывающий URL-адрес видеофайла: <video src="video/file.mp4" controls></video>
-
настоящее время, существует 3 поддерживаемых видео формата для элемента <video>: MP4, WebM и Ogg.
|
Браузер |
MP4 |
WebM |
Ogg |
||||
|
Internet Explorer 9 или выше |
да |
нет |
нет |
||||
|
Firefox 4.0 или выше |
нет |
да |
да |
||||
|
Google Chrome 6 или выше |
да |
да |
да |
||||
|
Apple Safari 5 или выше |
да |
нет |
нет |
||||
|
Opera 10.6 или выше |
нет |
да |
да |
||||
Элемент <video> также может содержать один или несколько элементов <source>, которые будут указывать на файлы разных форматов:
<!DOCTYPE html>
<html>
<head>
<title>Видео</title>
</head>
<body>
<video width="320" height="240" controls="controls"> <source src="1.ogg" type="video/ogg"> <source src="1.m4v" type="video/mp4">
</video>
</body>
</html>
Размещение видео с ресурса youtube
Вставка кода фрейма с Youtube – является наиболее легким методом реализации. Подходит для ретрансляции своего или чужого тематического видео с этого хостинга у себя на сайте. Код для вставки в html можно найти на страничке видеоролика в Youtube. Он находится сразу под окном плеера во вкладке «HTML-код»:
Фрейм - это элемент в html, который позволяет отображать содержимое другой веб-страницы в дочернем окне, размещенном на странице основного сайта. Возьмем пример кода фрейма с приведенного выше рисунка:
<iframe width="560" height="315" src="https://www.youtube.com/embed/3jT_q7dt-cM"
frameborder="0" allowfullscreen>
</iframe>
-
помощью тега <iframe> создается плавающий фрейм, который является своего рода контейнером, позволяющим загружать содержимое другой веб-страницы.
Атрибуты тега <iframe>:
-
width – задается длина окна фрейма;
-
height – устанавливается высота окна плавающего фрейма;
-
src – путь к файлу, содержимое которого будет воспроизводиться;
-
frameborder – устанавливает отображение рамки вокруг фрейма. Поддерживаются значения yes или no, 1 или 0 (нет);
-
allowfullscreen – разрешение на полноэкранное отображение видео.
Google-карта на сайте
При создании и разработке веб-сайтов все чаще необходимо указать адрес и местоположение на странице «Контакты». Рассмотрим, как указать необходимые данные с помощью сервиса Карты Google (Google Maps)
Чтобы встроить на страницу сайта карту или маршрут, нужно выполнить следующие действия:
-
Откройте Google Карты - https://maps.google.com/
-
Найдите нужную карту, панораму в Просмотре улиц или маршрут.
-
Нажмите на значок меню
в левом верхнем углу экрана. -
Выберите Ссылка/код.
-
В верхней части появившегося окна откройте вкладку Код.
-
Выберите размер карты. Затем скопируйте текст в поле и вставьте его в
код своего сайта.
Пример:
Самостоятельно
Создание слайдера
Слайдеры, как правило делаются с использованием Javascript. Обычно для этого задействуют библиотеку JQuery. Хотя CSS и не позволяет создать полнофункциональный слайдер, таких как анимация по таймеру, листание пальцем на тач-скрине и т.п., во многих случаях такие возможности и не требуются. Простой слайдер гораздо проще сверстать на чистом HTML и CSS, чем задействовать для этого возможности Javascript. Код стилей слайдера получится гораздо проще и понятнее, чем код слайдера на Javascript. Рассмотрим:
Слайдер с анимированным
переключением кадров с помощью кнопок Слайдер с кнопками «вперёд» и «назад»
и (или) нажатием на изображение
Слайдер с анимированным переключением кадров с помощью кнопок
-
html прописываем количество слайдов, которые будет использовать слайдер. В данном случае используется 4 слайда (количество может быть любое):
<div class='sliderA'>
<input type="radio" name="slider1" id="slider1_1" checked="checked">
<label for="slider1_1"></label>
<div></div>
<input type="radio" name="slider1" id="slider1_2"> <label for="slider1_2"></label> <div></div>
<input type="radio" name="slider1" id="slider1_3"> <label for="slider1_3"></label> <div></div>
<input type="radio" name="slider1" id="slider1_4"> <label for="slider1_4"></label> <div></div>
</div>
Контейнер слайдера — div с классом sliderA. Каждый кадр слайдера описывается трёмя тегами:
-
Радиокнопкой (input type="radio"), отвечающей за состояние данного кадра (видно / не видно)
-
Меткой label, отвечающей за отображение кнопки перехода на данный слайдер.
-
Тегом div в котором находится содержимое кадра.