МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ НАЦІОНАЛЬНИЙ УНІВЕРСИТЕТ «ЛЬВІВСЬКА ПОЛІТЕХНІКА» Інститут комп'ютерних технологій, автоматики та метрології Кафедра «Електронні обчислювальні машини» Мультимедійні АРІ для сайту Методичні вказівки до лабораторної роботи №7 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія» Затверджено на засіданні кафедри «Електронні обчислювальні машини» Протокол № 7 від 11 березня 2014 р. на засіданні методичної ради ІКТА Протокол № 11 від 25 березня 2014 р. Зареєстровано в НМУ НУ «ЛП» № 5597 від 05.05.2014 Львів-2014 2 Мультимедійні АРІ для сайту. Методичні вказівки до лабораторної роботи № 7 з дисципліни «Глобальні інформаційні мережі» для студентів базового напряму 6.050102 «Комп'ютерна інженерія»/Укл. [ім’я автора приховано], [ім’я автора приховано] - Львів: Національний університет «Львівська політехніка», 2014. – 8 с. Укладачі: [ім’я автора приховано], канд. техн. наук, доцент [ім’я автора приховано], канд.. техн.. наук, доцент Відповідальна за випуск: [ім’я автора приховано], канд. техн. наук, доцент Рецензенти: Голембо В.А., канд. техн. наук, доцент каф. ЕОМ Різник О.Я., канд. техн. наук, доцент каф. ІТВС 3 Мета роботи. Ознайомитися з сучасними мультимедійними об’єктами і здобути практичних навичок у втіленні мультимедійних АРІ на сторінки сайту. Мультимедійні АРІ YouTube YouTube-сервіс, що надає послуги відеохостингу. Користувачі можуть додавати, переглядати і коментувати відеозаписи. На сайті представлено як професійно зняті фільми і кліпи, так і любительські відеозаписи, включно з відеоблогами. Перегляд та розповсюдження контенту Відеоматеріали YouTube поширює наступним чином: На сайті YouTube.com: користувачі можуть завантажувати відео в кількох поширених форматах, в тому числі. Mpeg і. Avi. YouTube автоматично конвертує їх у Flash Video і робить доступними для перегляду в онлайн. За межами YouTube.com: кожне відео супроводжується готовою HTML-розміткою для вставки відео на інші веб-сторінки. Проста техніка CopyPaste зробила поширення відео з YouTube надзвичайно популярним, адже посилання на відео може бути впроваджено в HTML-код любої веб-сторінки. Скачування відео: крім спеціальних сайтів, перетворюють посилання на сторінку з відео в посилання на файли, це дозволяють робити ряд сторонніх додатків (напр., SaveTube) і розширень для браузера (напр., UnPlug або інші розширення для Firefox або доповнення для Opera). Деякі менеджери завантажень також можуть зберігати відео з цього порталу (наприклад Download Master). Є також ряд спеціальних сайтів, які можуть завантажувати відео з YouTube. YouTube для розробників YouTube API і інструменти дозволяють зробити доступним контент и функціональні можливості YouTube не лише на сайті, а також на пристроях і в додатках. http://www.youtube.com/dev API YouTube https://developers.google.com/youtube/getting_started#data_api Інтеграція з YouTube https://developers.google.com/youtube/getting_started#player_apis API програвача https://developers.google.com/youtube/youtube_player_demo Втілення відео на сайті 4 Можливості YouTube YouTube розробляє і поширює програми та функції, що надають більших можливостей для користувача. YouTube прагнє зробити любу задачу зручною та легкою для користувача, від перегляду до створення свого власного відеосюжету. Розділ "Video toolbox" або "Набір інструментів для відео" представляє поради та різні хитрощі, використовувані при створенні відео. Є сюжети, що стосуються освітлення, редагування відео, кута, під яким встановлюється камера, записи звуку і спецефектів. Для перегляду цих відеосюжетів не потрібно бути членом спільноти YouTube. Розділ "TestTube", або розділ тестування, в якому пропонуються для бета-тестування нові програми, перш ніж їх викладуть на сайт для загального використання. Ось деякі з додатків TestTube: Active sharing, тобто обмін посиланнями про активність, що показує іншим членам спільноти, які сюжети дивиться певний відвідувач. AudioSwap, програма, яка дозволяє користувачеві змінити звуковий супровід у своєму відеосюжеті. Фахівці YouTube створили цей додаток для того, щоб члени спільноти могли видаляти звуковий супровід, захищене законом про авторське право, і замінювати його дозволеної музикою. Remixer, програма, розроблена компанією Adobe Premiere Express і призначена для редагування відеоматеріалу, вже завантаженого на YouTube, включаючи застосування переходів і відеоефектів. Streams, кулуари, в яких кілька людей можуть одночасно дивитися і коментувати ті самі відеосюжети. Це схоже на перебування в кінотеатрі і обмін думками про фільм з друзями, але при цьому немає ризику, що білетер виведе вас із залу через те, що ви заважали іншим. Можливо, найбільш корисна функція YouTube - можливість пошуку. Коли член спільноти відправляє на веб-вузол відеосюжет, він у спеціальних полях може вказати назву, опис і теги, що містять ключові слова для пошуку. Від нього залежить правильність введення ключових слів. Досвідчені користувачі знають, що потрібно додати ще ключові слова з найпоширенішими помилками. Недобросовісні користувачі додають ключові слова, які не мають нічого спільного із змістом відеосюжету. Це штучно підвищує кількість переглядів відповідного сюжету, але навряд чи сприятиме отриманню високих оцінок. Онлайн телебачення Телебачення через Інтернет http://www.broadcast.telekritika.ua/show/Infrastruktura/1050-televidenie_cherez_internet На сьогоднішній день існує велика кількість схем взаємодії новітніх користувацьких пристроїв і 5 наземного телевізійного мовлення. В наведеній статті розглянуто термінологія, різні технології доставки контенту та їх подальший розвиток. Телебачення онлайн на сайті http://tvforsite.ru/ На сайті можна встановити ТВ-плеєр, в якому користувачі зможуть дивитися понад 100 ТВ- каналів онлайн абсолютно безкоштовно! Пізнавальні, новинні, спортивні, фільмові, дитячі, музичні, розважальні та регіональні ТВ-канали доступні у вільному доступі. HTML5 audio. Відтворення музики на сайті Поява тега <audio> в HTML5 надало можливості легко відтворювати звук. Тег audio не поддерживается вашим браузером. Найпростіший спосіб додати на сторінку аудіоплеєр Це класичний варіант, коли застосовується тег audio, всередині якого: Прописується шлях до музичного файлу за допомогою тега sourse Вказується атрибут controls, що відповідає за показ панелі управління відтворенням Рядок "Ваш браузер не підтримує аудіоплеєр!" дозволяє користувачам, чиї браузери не підтримують стандарти HTML5, побачити, що на цьому місці мав бути аудіоплеєр. <!DOCTYPE HTML> <html> <head> <title>Audio player в html: музыкальный поток на сайте</title> </head> <body> <audio src="music.ogg" controls="controls"> Ваш браузер не підтримує аудіоплеєр! Обновіть версію браузера! </audio> </body> </html> На тепер існує 3 вживаних формати для <audio> - оgg, .mp3, wav. Файл з розширенням .оgg буде програватися в Firefox, Opera и Chrome, формат .mp3 або .wav для Internet Explorer і Safari. http://www.online-convert.com/ru Конвертор медіа-файлів он-лайн http://www.coolwebmasters.com/audio/1674-html5-audio.html Уроки застосування HTML5 Audio 6 http://habrahabr.ru/post/110906/ Аudio.js музика в любому браузері http://mp3cut.foxcom.su/yandex-widget/ Яндекс-віджет: Програма для редагування музики http://webtuts.ru/html5-audiopleer/ Аудіоплеєр для сайту на HTML5 Тег <audio> дозволяє використати кілька джерел, які посилаються на різні формати аудіо. Різні браузери відтворюють різні формати, тому аудіофайл потрібно вказувати в кількох розширеннях. В цьому випадку всередину <audio> слід додати кілька треків, наприклад, у форматі mp3, другий в форматі ogg. Браузер застосує з переліку той формат, який він здатен відтворити. <audio controls="controls"> <source src="track.ogg" type="audio/ogg" /> <source src="track.mp3" type="audio/mpeg" /> <source src="track.wav" type="audio/wav" " /> Ваш браузер не підтримує аудіоплеєр! </ audio> Атрибути тега аудіо src="url" – вказується шлях до звукового файлу. controls="controls" – показує панель керування плеєром, кнопки play, stop тощо. autoplay="autoplay" – визначає відтворення аудіо файла, відразу після завантаження сторінки. loop= “loop” – по завершенні, файл буде циклічно програватися знов. В лапках можно вказати числове значення кількості циклів програвання файлу (разумеется, если пользователь не закроет страницу). preload - вказує, що аудіо повинно завантажуватися разом із завантаженням веб сторінки. Ігнорується, якщо присутнє autoplay. Має значення «auto» (завантажує файл відразу після завантаження сторінки), «metadata» (описує метадані, назву треку й т.д.), «none» (браузер не завантажує файл при завантаженні сторінки). autobuffer="autobuffer" – використовується разом з autoplay="autoplay" – визначає відтворення аудіо файла в момент завантаження сторінки. muted – при відтворенні музики звук відключено Приклади застосування різних атрибутів <audio controls="controls" autoplay="autoplay" loop="loop"> <source src="track.ogg"> <source src="track.mp3"> Тег audio не підтримується Вашим браузером. </audio> 7 Музика буде грати відразу при відкритті сторінки (атрибут autoplay), буде виведено панель управління (controls), циклічне програвання (атрибут loop) <audio autoplay="autoplay" loop="loop"> <source src="track.ogg"> <source src="track.mp3"> Тег audio не підтримується Вашим браузером. </audio> Не буде видно панелі управління, для цього забрано атрибут controls, який відповідає за відображення панелі управління, атрибут autoplay в даному прикладі буде обов'язковий, інакше не буде видно кнопки відтворення HTML5 <video>. Відтворення відео на сайті http://htmlbook.ru/html5/video Відео на сайті http://w3pro.ru/article/vvedenie-v-html5-video HTML5 відео http://www.dejurka.ru/flash/11-html5-video-players/ 11 ефективних HTML5 відео-плеєрів http://html5insight.ru/post/9546328224/html5-how-to-build-custom-video-player Власний відео-плеєр на HTML5 Video Аудіо подкасти Подкаст - звуковий чи відеофайл, який безкоштовно поширюється для масового прослуховування або перегляду. Файли можна завантажити або слухати онлайн. Все про подкасти http://www.ph4.ru/podcast_index.ph4 Виділяють три типи подкастів: 1. Аудіо-подкаст 2. Відео-подкаст 3. Скрінкасти - нове явище, яке спростило навчання людей через Інтернет. Суть скрінкастів полягає в тому, що за допомогою спеціальної програми записуються дії на екрані комп'ютера разом з аудіо-коментарями, що ідеально підходить для пояснень по комп'ютерним програмам. Як створити подкаст Багато користувачів хотіли би створити власну Інтернет-радіостанцію, однак на заваді постає багато складнощів. Найпростішим способом публікації аудіо в Інтернет є подкастинг. 8 Схема створення подкасту є простою. 1. Потрібно створити власне сам аудіо-запис. Щоб зробити його на комп'ютері, знадобиться мікрофон, програма - audio recorder, і, можливо, програма для редагування звуку. 2. Готовий подкаст потрібно опублікувати - на власному сайті, блозі, або спеціальному Інтернет-сервісі. Запис подкасту Програм для запису аудіо сигналу існує багато - платні і безкоштовні, для Windows, MacOS, Linux, прості і складні. При виборі програми для запису аудіо слід керуватися наступними критеріями: Можливість запису не лише голосу, але і фонової музики або спец ефектів. Можливість збереження у формат MP3, OGG Vorbis або WAV. Можливість редагування створеного аудіо файлу. Як приклад подібної програми можна рекомендувати цю програму звукозапису http://www.extralabs.ru/audio-recorder.htm Існують спеціальні програми, за допомогою яких можна не тільки записувати аудіо контент, але і створювати необхідний для подкасту RSS-фід. Публікація подкасту Є багато способів донести записаний подкаст до слухачів. Якщо у вас є блог на движку WordPress, вам достатньо лише встановити спеціальний плагін, наприклад PodPress. Це найбільш популярний спосіб. PodPress значно перетворює WordPress і робить все необхідне для публікації подкастів: генерує RSS фід з підтримкою iTunes, має красивий Flash-плеєр, веде статистику, розпізнає ID3 теги у MP3 файлів. Встановити це доповнення не складе труднощів, а користуватися ним ще простіше. У випадку, якщо у вас статичний HTML сайт, або CMS не підтримує подкастинг, то можна скористатися спеціальною програмою для створення подкастів. Наприклад - Podcast Wizard. З її допомогою можна не лише записувати і редагувати подкасти, але й публікувати їх відповідно до прийнятих стандартів. Програма генерує RSS фід з підтримкою iTunes, саму сторінку подкасту (шаблони підтримуються), може провадити завантаження всіх необхідних файлів прямо на сервер за допомогою FTP. У вас взагалі немає власного сайту, або немає часу розбиратися в особливостях технологій подкастингу? Це не проблема. Скористайтеся одним із існуючих веб-сервісів: PodBean (http://www.podbean.com/) 9 C PodBean ви з легкістю зможете опублікувати власні аудіо чи відео підкасти, а також поділитися ними з друзями в Facebook, MySpace, Blogger тощо. mirPod (http://www.mirpod.com/) За допомогою mirPod ви зможете згенерувати код Flash плеєра для вставки в блог або сайт. Pod-O-Matic (http://www.podomatic.com/) Безкоштовний тариф хостингу подкастів припускає 500 Мб вільного місця на диску і 15 Гб трафіку на місяць. Відмінний вибір для початківців подкастерів. Порядок роботи 1. Ознайомитися з наведеними ресурсами. 2. Відредагувати засобами YouTube власне чи довільне відео. Додати звукове супроводження, зробити нарізку, додати субтитри. 3. Втілити відредаговане відео у відповідну сторінку сайту. 4. За допомогою тегу <audio> або audio.js додати музичний файл на сайт. 5. Ознайомитися з іншими технологіями - Онлайн ТВ та подкасти. За бажанням додати до сайту Зміст звіту 1. Назва та мета виконання лабораторної роботи. 2. Короткий опис редагування відео зі скрінами. HTML код, що було вставлено на сайт. 3. Короткий опис уставляння аудіо зі скрінами. HTML код, що було вставлено на сайт. 4. У висновку оцінити різні можливості уставляння мультимедійних ресурсів. Використані джерела 1. Як додати відео на YouTube http:// www.youtube.com/results?search_query=как+залить+видео+на+youtube&oq=Как+залить+& gs_l=youtube.3.0.0l2. 2. Як редагувати відео на youtube.com http://www.youtube.com/results?search_query=редактирование+видео+на+youtube&oq=Ред актирование+видео+на+&gs_l=youtube.1.0.0i19.2673.10960.0.13491.24.10.0.14.14.0.255.15 10 44.2j5j3.10.0...0.0...1ac.1.11.youtube.Sbf2MqoUuhk 3. Як користуватися відеоредактором YouTube для монтажу http://www.youtube.com/watch?v=4ZSzwnJycwk 4. Як додати субтітри на YouTube (автоматом) http://www.youtube.com/watch?v=iT-TM2lq7Rw 5. Як поставити відео YouTube на сайт http:// www.youtube.com/results?search_query=как+поставить+видео+youtube+на+сайт&sm=12 6. Як вимкнути рекламу на Youtube http://www.adme.ru/internet/kak-otklyuchit-reklamu-na- youtube-545155/ 11 12