Те, що ми отримали на сторінці, є об'єктом MediaElement, в свою чергу, породжує об'єкти HTMLAudioElement і HTMLVideoElement, інтерфейс яких майже збігається. Специфікацією для тегатворного медіаплеєра передбачені наступні методи і події:
Var audio = document. createElement ( "audio"); if (audio. canPlayType ( "audio / mpeg") Audio. addEventListener ( "canplaythrough", function () - load - завантажує мультимедійний по url, позначеному в атрибуті src, при цьому раніше завантажений файл буде заміщений; - pause - призупиняє відтворення медіафайлів; - play - починає або відновлює відтворення медіафайлів. Події спробуємо викласти послідовно: - loadstart - початок завантаження мультимедійних файлів; - durationchange - виникає після того, як веб-браузер отримає значення тривалості завантажується ролика; - loadedmetadata - завершення завантаження метаданих; - durationchange - виникає після того, як веб-браузер отримає значення тривалості завантажується ролика. Виникає після події loadstart і перед подією loadedmetadata; - loadeddata - обсяг завантажених мультимедійних даних достатній для того, щоб запустити відтворення; - canplay - обсяг завантажених мультимедійних даних достатній для того, щоб успішно запустити відтворення; - canplaythrough - виникає, коли мультимедійні дані починають завантажуватися зі швидкістю, достатньою для відтворення, без припинень на їх підвантаження; - progress - процес завантаження медіаконтенту; - playing - виникає відразу після початку відтворення ролика. Відтворення може бути запущено або самим відвідувачем, або викликом методу play; - waiting - виникає, коли відтворення ролика припиняється для подгрузки чергової порції даних з мультимедійними файлами; - stalled - виникає через три секунди після зупинки процесу подгрузки чергової порції даних з мультимедійними файлами; - load - виникає після завершення завантаження ролика; - timeupdate - подія виникає в процесі відтворення контенту (коли тимчасова позиція змінюється); - ended - виникає після завершення відтворення контенту. Наступні події виникають в результаті зовнішніх впливів - play. * Уточнити, чи треба точку * - виникає після виклику методу play; - pause - виникає при припиненні відтворення ролика або відвідувачем, або викликом методу pause; - seeking - виникає, коли відвідувач переміщує регулятор поточної позиції відтворення ролика; - seeked - виникає після того, як відвідувач перемістить регулятор поточної позиції відтворення файлу в нове положення; - volumechanged - виникає при зміні рівня гучності, а також відключення і включення звуку; - abort - виникає, коли відвідувач перериває завантаження мультимедійного файлу з роликом; - ratechange - виникає при зміні значення властивості playbackRate (див. нижче); - readystatechange - виникає при зміні значення властивості readyState (див. нижче); - emptied - виникає після виклику методу load, коли завантажений в даний момент контент вже вивантажено, а новий контент, чий url було присвоєно властивості src, ще не завантажений. - error - виникає при збої в процесі завантаження ролика. Всі ці події нам знадобляться і для елемента Тепер розглянемо властивості медіаконтейнера. Крім дублюючих атрибути (наприклад, f ontrols або src), він повинен володіти такими корисними даними: - currentTime - поточна позиція відтворення медіафайлів в секундах; - defaultPlaybackRate - швидкість звичайного відтворення файлу. Являє собою коефіцієнт для природної швидкості відтворення мультимедійних файлів. Тобто при значенні defaultPlaybackRate = 4 трек буде програватися з учетверенной швидкістю; - duration - тривалість програвання в секундах; - ended - повертає true, якщо програвання файлу закінчилося (тільки для читання); - paused - повертає значення true, якщо відтворення файлу призупинено (тільки для читання); - playbackRate - поточна швидкість відтворення файлу. Являє собою коефіцієнт для природної швидкості відтворення мультимедійного файлу; - readyState - повертає строкове значення, що позначає поточний стан мультимедійного файлу (тільки для читання). Можливі такі значення: • uninitialized - файл ще не завантажений; • loading - файл завантажується; • loaded - файл повністю завантажений, але, можливо, не готовий до відтворення; • i nteractive - користувач може запустити відтворення файлу (не гарантує закінчення завантаження); • complete - файл завантажений і готовий до відтворення; - seeking - повертає true, якщо в даний момент відвідувач виконує «швидку прокрутку» (тільки для читання); - startTime - позиція треку (в секундах), з якої може бути розпочато його відтворення (тільки для читання); - volume - поточна гучність у вигляді значення від 0.0 - тиша до 1.0 - максимальна гучність (значення за замовчуванням). Давайте застосуємо відкрилися можливості на практиці. При перерахуванні команд управління плеєра не випадково був упущений метод stop, його просто немає. Від pause ця операція відрізняється тим, що позиція відтворення повертається до нульової точки. Такий команди дійсно немає, але тепер ми можемо легко її задати програмно: If (cmd == 'minus') player. volume- = 0.1; If (cmd == 'stop') Спробуємо що-небудь складніше. Спроба називати отриманий медіоб'ект плеєром поки невдала, хоча б тому, що він може програвати тільки одну композицію. Виправимо це непорозуміння, хай він програє цілий альбом! Для початку сам плеєр: Var player; // сам мультимедійних об'єктів Var track = 0; лічильник треків альбому Var tracks = [ 'Waitin For the Bus. mp3 ',' Sheik. mp3 ',' Master of Sparks. mp3 '] масив треків альбому. У реальному додатку може бути отриманий за допомогою ajax / json-запиту Player = document. getElementByld ( 'plr'); player. addEventListener ( "ended", nextTrack, false); player. src = tracks [track]; Тут, перед тим як завантажити в плеєр перший трек, ми пов'язуємо подія закінчення програвання треку з функцією, що поставляє наступний аудіофайл. Вона зовсім проста: Function nextTrack () Player. src = tracks [track]; player. play ();Вам також можуть бути цікаві такі статті: