
- •Лекція №3 Відтворення Мультимедіа
- •Формати звукових файлів
- •Формати відео
- •Мал. 9.4. Вбудований Media Player для відтворення аудіо файлу
- •Мал. 9.7. Програмування Media Player
- •Мал. 9.8. Кнопки прихованого Media Player
- •Мал. 9.7. Програмування Media Player
- •Мал. 9.8. Кнопки прихованого Media Player
- •Мал. 9.9. Відтворення декількох звукових файлів через один Media Player
- •Мал. 9.10. Посилання для відтворення відеофайлу
- •Мал. 9.12. Запрограмований Media Player
- •Мал. 9.13. Оформлений Media Player
- •Мал. 9.15. Вбудований потік живого відео
- •Мал. 9.18. Marquee з оформленням
- •Мал. 9.19. Використання динамічного html (dhtml) для програмування тегов xhtml
- •Мал. 9.21. Аплет Java для декорування тексту
- •Мал. 9.22. Аплет Java для створення прокрутки тексту
- •Мал. 9.23. Ігровий аплет Java
- •Мал. 9.24. Аплет Java тикера ринку
- •Мал. 9.25. Flash-игра
- •Мал. 9.26. Поточна погода від Weather Channel
- •Мал. 9.27. Заголовки поточних новин
Мал. 9.10. Посилання для відтворення відеофайлу
<а href="Casablanca.wmv"><img src="Casablanca.gif" alt="Casablanca"/></a>
<а href="Casablanca.wmv">Casablanca.wmv (484 KB)</a>
Лістинг 9.9. Код з'єднання з відеофайлом (html, txt)
Відеофайл можна вбудовувати в сторінку Web за допомогою тега <object>.
Мал. 9.11. Вбудований Media Player для відтворення відеофайлу
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="Casablanca.wmv"/>
<param name="autoStart" value="false"/>
</object>
Лістинг 9.10. Код вбудованого Media Player для відтворення відеофайлу (html, txt)
Програмування плеєра Таке ж програмування, як і у разі аудіофайлів, застосовно до відеофайлів. Стандартну панель управління можна видалити з Media Player і замінити програмованими кнопками. Наступний код і кнопки приховують виведення Media Player і оточують екран стилізованою рамкою для розміщення плеєра усередині оформленого тега <div>. Додані також кнопки для запуску і зупинки плеєра.
Мал. 9.12. Запрограмований Media Player
<div style="border:outset 10">
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="150" height="122">
<param name="URL" value="Casablanca.wmv"/>
<param name="autoStart" value="false"/>
<param name="uiMode" value="none"/>
</object>
</div>
<input type="button" value="Start" style="font-size:8pt"
onclick="Player.controls.play()"/>
<input type="button" value="Stop" style="font-size:8pt"
onclick="Player.controls.stop()"/>
Лістинг 9.11. Код програмування Media Player (html, txt)
Оформлення плеєра З невеликими зусиллями можна задати власне оформлення плеєра, використовуючи графічні зображення для оточення екрану і карту посилань для створення програмних елементів управління. Один з таких способів показаний нижче. Екран Player перекриває зображення телевізійного екрану, забезпеченого зображеннями кнопок запуску і зупинки, сформатованими як карта посилань. Сценарії зв'язуються з картою посилань для запуску і зупинки Player.
Мал. 9.13. Оформлений Media Player
Необхідно розмістити екран Player поверх зображення телевізора. Тому обидва тега <img/> і <object> позиціонуються абсолютно, щоб отримати накладення. Щоб полегшити обчислення позицій пікселів, обидва тега поміщають всередину тега <div> з відносним позиціонуванням. Таке розміщення дає можливість позиціонувати теги <img/> і <object> щодо верхнього лівого кута (0, 0) розділу і дозволяє зображенню зберігати своє відносне положення в потоці елементів сторінки.
<img src="TV.gif" style="position:absolute; border:0" usemap="#ImgMap"/>
<object id="Player" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="250" height="150" style="position:absolute; top:18px; left:63px">
<param name="URL" value="Frankenstein.wmv"/>
<param name="uiMode" value="none"/>
<param name="autoStart" value="false"/>
</object>
<map name="ImgMap">
<area shape="circle" coords="28,168,15" alt="Start"
onclick="Player.controls.play()"/>
<area shape="circle" coords="348,168,15" alt="Stop"
onclick="Player.controls.stop()"/>
</map>
</div>
Лістинг 9.12. Код для оформлення і програмування Media Player (html, txt)
При відкритті сторінки відеофайл завантажується в Player, але не запускається автоматично. Його параметр uiMode заданий як "none", так що сам Player прихований; видно тільки екран. Розмір екрану і його позиція задані так, щоб точно розміститися поверх графічного зображення телевізора. Може знадобитися перевірити для екрану різні розміри і позиції, щоб точно потрапити в правильне положення поверх зображення.
Замість застосування для управління Player кнопок до зображення телевізора додані зображення кнопок для запуску і зупинки. Ці дві круглі області визначено на карті посилань, щоб зробити такими, що їх реагують на клацання миші. Тоді як карти посилань використовуються зазвичай для завдання посилань на сторінки за допомогою атрибутів href для областей, в даному випадку атрибут замінюється обробниками події клацання миші, щоб запустити і зупинити Player.
Доступ до потокового відео За наявності адрес URL зовнішніх сайтів можна з'єднуватися з контентом потокового відео. Як і для аудіофайлів URL можна отримати з посилання, якщо відео відтворюється через Windows Media Player. Під час відтворення відео зробіть клацання правою кнопкою миші на екрані і виберіть "Properties" в спливаючому меню. З вікна "Properties" скопіюйте повну адресу URL відтворного потокового файлу.
Наступне вбудоване відео сполучене за цією технологією. В цьому випадку URL указує на фрагмент фільму, знайдений в Web.
Мал. 9.14. Вбудований потоковий відеофайл
<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
width="400" height="300">
<param name="URL" value="http://playlist.yahoo.com/makeplaylist.dll?
id=1021057&segment=73208&s=1805540029&ru=embedded%
2Eyahoo%2Ecom&b=a3qgtq8vgc8s33f0b633c"/>
<param name="autoStart" value="false"/>
</object>
Лістинг 9.13. Код вбудовування потокового відеофайлу (html, txt)
Багато наявних в Web відеофайли вимагають плату за перегляд. Також часто зустрічаються відеоплеєри, вбудовані в сторінки сайту з настройками, які не дозволяють дістати доступ до вікна Properties для отримання URL. Треба бути просто терплячим і наполегливим, щоб знайти відео, з яким можна з'єднатися. Крім того, адреси URL постійно змінюються, і пізніше може опинитися неможливо з'єднатися з відео в його початковому місцеположенні.
Потік живого відео можна захопити і відтворити за допомогою Media Player. Наступна адреса URL з'єднання C-SPAIN була визначена у вікні Properties плеєра під час живого віщання.