Можностей, предоставляемых веб-разработчикам
жүктеу/скачать
5,47 Mb.
Pdf көрінісі
бет
164/232
Дата
06.01.2022
өлшемі
5,47 Mb.
#12231
1
...
160
161
162
163
164
165
166
167
...
232
Байланысты:
[Bryus Louson, Remi SHarp] Izuchaem HTML5. Bibliot(z-lib.org)
Бұл бет үшін навигация:
___...__ПРИМЕЧАНИЕ"> media="(min-device-width: ¬ 800px) "> ... ПРИМЕЧАНИЕ
Рис . 4 .3 . Наши простые, но уже видоизмененные элементы управления плеером Видео и аудио • 143
media="(min-device-width:
¬ 800px)
">
...
ПРИМЕЧАНИЕ
Мы используем
min-device-width, а не min-width Мобильные браузеры (которые могут
сообщать неправильный размер области отображения, для того чтобы веб-страницы лучше
выглядели на экране) в
таком случае сообщают номинальную
ширину физического экрана
Обратите внимание на то, что вы все еще должны использовать атрибут
type
с параметра-
ми
codecs
и контентом, демонстрирующемся при ошибке воспроизведения, о
котором мы
говорили ранее. В
данном случае мы его не указали
, чтобы не перегружать код.
142 •
Глава 4
П
ОЛЬЗОВАТЕЛЬСКИЕ ЭЛЕМЕНТЫ УПРАВЛЕНИЯ
Одна из
самых удачных особенностей элементов
медиа
и
— это то, что API
JavaScript для них крайне прост. События и
методы API одинаковы и для
, и для
. Уяснив это, перейдем к обсуждению более интересного элемента медиа,
,
и работы с
ним при помощи JavaScript
.
Как вы уже поняли из начала этой главы, Анне ван Кестерен рассказала о новом API и о но-
вых простых методах, таких как
play()
,
pause()
(метода
stop
нет, но можно использовать
паузу и вернуться к началу файла),
load()
и
canPlayType()
. На самом деле, этими метода-
ми список исчерпывается. Все остальное относится к событиям и атрибутам.
В табл. 4.3 вы найдете список атрибутов,
методов и событий для медиаэлементов
.
Используя JavaScript и новый API для медиаэлементов, вы можете создавать и организо-
вывать свои собственные элементы управления видеоплеером. Мы на примере покажем
вам, как создать простой набор элементов управления, и продемонстрируем их в
действии
.
Наш пример вряд ли будет для вас большим откровением (он далеко не так крут, как сам
элемент
; кроме того, он несколько искусственен), но вы получите хорошее пред-
ставление о том, что можно сделать при помощи написания скриптов. Самое лучшее в на-
шем примере то, что пользовательский интерфейс будет построен на основе CSS и HTML.
Так что для внесения в него каких-либо изменений потребуются лишь поверхностные
знания в области веб-стандартов. Переписывать код внешнего Flash-плеера не будет ни
малейшей необходимости.
Среди основных элементов управления видеоплеера, которые мы подкорректируем
вручную, будет переключатель воспроизведение/пауза; кроме того, у
пользователя будет
возможность перемещать бегунок таким образом, чтобы пропускать отдельные части
видеофайла, как показано на рис. 4.3.
Рис . 4 .3 .
Наши простые, но уже видоизмененные элементы управления плеером
Видео и аудио
• 143
Таблица 4 .3 .
Атрибуты,
методы и события для медиаэлементов
Состояние ошибки
load()
error
canPlayType(type)
Состояние сети
play()
src
pause()
currentSrc
addTrack(label, kind, language)
networkState
preload
События
buffered
loadstart
Состояние готовности
progress
readyState
suspend
seeking
abort
Элементы управления
error
controls
emptied
volume
stalled
muted
play
Треки
pause
tracks
loadedmetadata
Состояние воспроизведения
loadeddata
currentTime
waiting
startTime
playing
duration
canplay
paused
canplaythrough
defaultPlaybackRate
seeking
playbackRate
seeked
played
timeupdate
seekable
ended
ended
ratechange
autoplay
loop
Специфичные для видео
width
height
videoWidth
videoHeight
poster
жүктеу/скачать
5,47 Mb.
Достарыңызбен бөлісу:
1
...
160
161
162
163
164
165
166
167
...
232
©emirsaba.org 2024
әкімшілігінің қараңыз
Басты бет
Lessons
Curriculum vitae
Documents