• Главная
  • Карта сайта
Не найдено

вставка відео на сторінку: використовуємо javascript і flash

  1. Автор публікації
  2. x64 (aka andi)

деякий час назад я вже згадував про тезі video, спеціально впровадженим в html5

деякий час назад я вже згадував про тезі video, спеціально впровадженим в html5. проте, як це не сумно, використання тега доставить більше незручностей, ніж принесе користі. тому розповім про спосіб, за допомогою якого можна цілком обійтися одним відеоформатом.

для одного проекту мені було потрібно вишукати можливість откруткі відеороликів на сайті. робити плеєр з нуля на флеш не представлялося можливим (для початку, я не маю середовища розробки і мені її не надали), тому потрібно, по суті, знайти підходящого кандидата в особі флеш-плеєра. нічого особливо складного і не було потрібно, т. к. завдяки ютуб користувачі дуже навіть легко орієнтуються в подібного роду плеєрах;)

на мій пошук «відгукнулося» 2 кандидата, розташованих на сайтах flv-mp3.com (проект від uppod`а) і flowplayer . зробивши невелику потиківаніе кожного, від першого швидко відмовився на користь комбайна, який надає даний api. як показав час, всередині чуття мене не підвело (хоча дехто й витягнемо втюхати flv-mp3.com).

як відомо, перше враження буває досить оманливе, і перевагу часом віддається найменш насиченому девайсу (особливо, якщо при цьому використовується рідна мова). саме цей підхід був затребуваний на flv-mp3: сервіс надає можливість «зібрати» плеєр із заданими характеристиками (в формі вказується, що програється файл, заставка, розміри і ще деякі параметри) і отримати на виході готовий код для вставки файлу. да, варіант може здатися дуже зручним, особливо для людей, які вважають html сильним колдунства, не кажучи про js та інше.

тільки періодичне додавання роликів на сайт навряд чи посприяє ентузіазму постійно «конструювати» плеєр під себе. як варіант, можна досліджувати всі налаштування і автоматизувати за допомогою серверного мови. але даний принцип крім як перекрутити не назвеш (куди як простіше вантажити ролики відразу на ютуб і отримувати готовий код для скачування).

ось ми і підійшли до того самого, що можна вже повноцінно назвати колдунства. ви ж хочете осягнути джаваскріптовой магії? я покажу, що це зовсім не важко (навіть простіше, ніж користуватися конструктором). а допоможе в цьому flowplayer. версію до душі можна вибрати звідси , Але для свого сайту цілком підійде найперший варіант, що поширюється під GPL3.

плеєр підтримує програвання наступного контенту: flv, mp4, m4v (для зображень - jpg, gif, png). відео підтримується ще з версії 9, так що проблем з підтримкою бути не повинно.

завантажуємо архів з плеєром і розпаковуємо. на сайт потрібно залити 3 файлу: flowplayer.controls-NumVer.swf, flowplayer-NumVer.swf і example / flowplayer-NumVer.min.js, де NumVer - це просто № версії, і може бути, наприклад, 3.2.7.

перший файл містить панель управління, другий - безпосередньо плеєр і третій є сполучною ланкою, що надає api. перші 2 файли (* .swf) повинні знаходитися в одній папці. тепер прийшов час для найпростішого коду. він може бути таким:

<Div id = "player" style = "width: 640px; height: 480px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ( 'player', '/src/player/flowplayer-3.2.7.swf', {}); </ Script>

елемент div з ідентифікатором player є контейнером, в якому буде відкручуватися відео. у другому рядку йде підключення JavaScript-файлу. Безпосередньо за висновок відповідає одна функція flowplayer (), якій передаються 3 параметра:

  1. ідентифікатор елемента, в якому повинен програватися ролик;
  2. шлях до плеєра (саме до плеєра, а не до елементів управління, які довантажити автоматично);
  3. якісь додаткові параметри.

до речі, крім ідентифікатор можна передавати безпосередньо посилання на об'єкт або селектор.

код вище нічого не виводить, але зате дає уявлення про те, наскільки просто підключити flowplayer на сторінку. для виведення відео потрібно сформувати третій параметр, і це, до речі, теж досить просто.

для простоти: третій парамерт (конфіг) - асоціативний масив, в якому може бути описано такі елементи:

  • clip - за допомогою даного ключа можна «зробити» глобальні установки, наприклад, чи повинна автоматично запускатися буферизация (autoBuffering) або відтворення (autoPlay), яким чином масштабувати вміст (scaling зі значенням fit наказує зберегти вихідні пропорції, і для звичайного відео буде використовуватися, мабуть, тільки воно). можна також вказати програється файл (url), і навіть підвісити події (функції, які будуть викликатися, наприклад, при старті програвання ролика);
  • playlist - звичайний масив (список). кожен елемент може бути рядком (в цьому випадку рядок - адреса програється кліпу), або асоціативним масивом. у другому випадку набір даних можна розглядати як набір даних, аналогічних ключу clip з попереднього пункту, т. е. можна вказати використовувати буферизацію, початок програвання і т. д .;
  • plugins - служить для розширення стандартних можливостей. однією з фич є можливість прямо на місці русифікувати інтерфейс.

тепер невеликий приклад, що включає демонстрацію можливостей:

<Div id = "player" style = "width: 520px; height: 330px;"> </ div> <script type = "text / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ( 'player', '/src/player/flowplayer-3.2.7.swf', {clip: {autoPlay: false, autoBuffering: false, scaling : 'fit'}, playlist: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: true, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // для маніпуляції з елементами управління plugins: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // прибирає кнопки перемотування stop: true, // додати кнопку стоп scrubber: true // значення false прибирає прокрутку відео}}}); </ Script>

представлений код встановлює в якості загальних параметрів наступні: відключення авто-запуску програвання, відключення авто-буферизації, масштабування відео за розміром вікна. в якості файлів, використовується картинка і відео, причому, настройки для картинки перевизначені (т. к. вона повинна завантажуватися автоматично). при кліці на картинці (або кнопці play) включається показ відео-ролика. як видно, все дуже просто. якщо потрібно додати ще один ролик, просто через кому додаємо в список playlist новий елемент. якщо потрібно автоматичне програвання плей-листа, в асоціативному масиві встановлюється clip значення autoPlay встановлюється в true.

документація, яка містить функції api, знаходиться тут . якщо хтось не розуміє англійської - не біда, там все досить зрозуміло. а проаналізувавши код вище, цілком можна розібратися і з тим, що знаходиться в доках. дуже рекомендую заглянути, напевно знайдеться «настройка», яка буде затребувана.

приклад можна подивитися тут . не забудьте зазирнути в вихідний код (Ctrl + U)

Автор публікації

не в мережі 1 тиждень

x64 (aka andi)

Коментарі: 2842 Публікації: 395 Реєстрація: 02-04-2009

Ви ж хочете осягнути джаваскріптовой магії?
Новости
Провайдеры:
  • 08.09.2015

    Batyevka.NET предоставляет услуги доступа к сети Интернет на территории Соломенского района г. Киева.Наша миссия —... 
    Читать полностью

  • 08.09.2015
    IPNET

    Компания IPNET — это крупнейший оператор и технологический лидер на рынке телекоммуникаций Киева. Мы предоставляем... 
    Читать полностью

  • 08.09.2015
    Boryspil.Net

    Интернет-провайдер «Boryspil.net» начал свою работу в 2008 году и на данный момент является одним из крупнейших поставщиков... 
    Читать полностью

  • 08.09.2015
    4OKNET

    Наша компания работает в сфере телекоммуникационных услуг, а именно — предоставлении доступа в сеть интернет.Уже... 
    Читать полностью

  • 08.09.2015
    Телегруп

    ДП «Телегруп-Украина» – IT-компания с 15-летним опытом работы на рынке телекоммуникационных услуг, а также официальный... 
    Читать полностью

  • 08.09.2015
    Софтлинк

    Высокая скоростьМы являемся участником Украинского центра обмена трафиком (UA — IX) с включением 10 Гбит / сек... 
    Читать полностью