<
  • Главная
Статьи

wstawianie wideo na stronie: użyj javascript i flash

  1. Wydawca
  2. x64 (alias andi)

jakiś czas temu wspomniałem o tagu wideo, specjalnie zaimplementowanym w HTML5

jakiś czas temu wspomniałem o tagu wideo, specjalnie zaimplementowanym w HTML5. niestety użycie znacznika spowoduje więcej niedogodności niż korzyści. dlatego powiem ci o sposobie, w jaki możesz całkowicie zrealizować jeden format wideo.

za jeden projekt musiałem znaleźć możliwość odkręcenia filmów na stronie. Nie było możliwe stworzenie odtwarzacza od podstaw w pamięci flash (na początek nie mam środowiska programistycznego i nie zapewniłem go), więc w rzeczywistości konieczne było znalezienie odpowiedniego kandydata w obliczu odtwarzacza flash. nic szczególnego nie było wymagane, ponieważ dzięki użytkownikom YouTube bardzo łatwo jest poruszać się po tego typu graczach;)

2 kandydatów znajduje się na stronach flv-mp3.com (projekt z uppodʻa) i flowplayer . po wykonaniu każdego małego szturchnięcia pierwszy został szybko porzucony na korzyść kombina dostarczającego obecnego api. W miarę upływu czasu wewnętrzne wnętrzności nie zawiodły (chociaż niektórym udało się dostać do vtyuhat flv-mp3.com).

Jak wiecie, pierwsze wrażenie jest raczej zwodnicze, a preferencja jest czasami nadawana najmniej nasyconemu urządzeniu (zwłaszcza jeśli używa języka ojczystego). Takie podejście było pożądane na flv-mp3: usługa daje możliwość „zmontowania” gracza o określonej charakterystyce (w formularz wskaż odtwarzany plik, wygaszacz ekranu, wymiary i inne parametry) i pobierz kod wyjściowy, aby wstawić plik. Tak, opcja może wydawać się bardzo wygodna, zwłaszcza dla ludzi, którzy uważają html za silną czarownicę, nie wspominając o js i tak dalej.

tylko okresowe dodawanie filmów do witryny raczej nie przyczyni się do entuzjazmu nieustannego „konstruowania” odtwarzacza. alternatywnie możesz przeglądać wszystkie ustawienia i automatyzować język serwera. ale ta zasada może być nazywana tylko zniekształconą (znacznie łatwiej załadować filmy na YouTube i uzyskać gotowy kod do pobrania).

dochodzimy do tego, co już można nazwać czarodziejką. chcesz zrozumieć magię javascript? Pokażę, że nie jest to wcale trudne (nawet łatwiejsze niż użycie konstruktora). i pomóż w tym flowplayerze. możesz wybrać wersję stąd , ale pierwsza wersja rozpowszechniana w ramach GPL3 jest odpowiednia dla Twojej witryny.

Odtwarzacz obsługuje odtwarzanie następujących treści: flv, mp4, m4v (dla obrazów - jpg, gif, png). Wideo jest obsługiwane od wersji 9, więc nie powinno być problemów z obsługą.

Pobierz archiwum za pomocą odtwarzacza i rozpakuj je. Musisz przesłać 3 pliki do serwisu: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf i example / flowplayer-NumVer.min.js , gdzie NumVer to tylko numer wersji i może to być na przykład 3.2.7 .

Pierwszy plik zawiera panel sterowania, drugi - bezpośrednio odtwarzacz, a trzeci to łącze zapewniające api. Pierwsze 2 pliki (* .swf) muszą znajdować się w tym samym folderze. teraz czas na najprostszy kod. może to być:

<div id = "player" style = "width: 640px; height: 480px;"> </ div> <typ skryptu = "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>

Element div z identyfikatorem gracza jest pojemnikiem, w którym wideo zostanie odkręcone. w drugim wierszu jest połączenie javascript. Bezpośrednio dla wyjścia jest odpowiedzialna jedna funkcja flowplayer () , która przechodzi 3 parametry:

  1. ID elementu, w którym wideo ma być odtwarzane;
  2. ścieżka do odtwarzacza (mianowicie do odtwarzacza, a nie do kontrolek, które zostaną automatycznie załadowane);
  3. Niektóre dodatkowe parametry.

Przy okazji, oprócz identyfikatora, możesz bezpośrednio przekazać odwołanie do obiektu lub selektora.

Powyższy kod niczego nie wyświetla, ale daje wyobrażenie o tym, jak łatwo jest podłączyć odtwarzacz stron do strony. Aby wyprowadzić wideo, musisz utworzyć trzeci parametr, a przy okazji, jest on również całkiem prosty.

dla uproszczenia: trzeci parametr (config) jest tablicą asocjacyjną, w której można opisać następujące elementy:

  • klip - za pomocą tego klawisza możesz „dokonać” globalnych ustawień, na przykład, czy chcesz automatycznie rozpocząć buforowanie (autoBuffering) czy odtwarzanie (autoPlay), jak skalować zawartość (skalowanie z wartością dopasowania zachowa oryginalny współczynnik proporcji, a dla normalnego wideo zostanie użyty, być może tylko to). Możesz także określić odtwarzany plik (url), a nawet zawiesić zdarzenia (funkcje, które będą wywoływane, na przykład, gdy film zacznie się odtwarzać);
  • playlista jest regularną tablicą (listą). każdy element może być ciągiem znaków (w tym przypadku ciąg jest adresem odtwarzanego klipu) lub tablicą asocjacyjną. w drugim przypadku zestaw danych może być postrzegany jako zestaw danych podobny do klucza klipu z poprzedniego elementu, tj. można określić, aby używać buforowania, rozpocząć odtwarzanie i tak dalej;
  • wtyczki - służy do rozszerzenia standardowych funkcji. Jedną z funkcji jest możliwość rusyfikacji interfejsu na miejscu.

Teraz mały przykład zawierający demonstrację możliwości:

<div id = "player" style = "width: 520px; height: 330px;"> </ div> <typ skryptu = "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, skalowanie : 'fit'}, playlista: [{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 '], // do manipulowania kontrolkami wtyczek: {formanty: {url:' flowplayer.controls-3.2.16.swf ', lista odtwarzania: false , // usuwa przyciski przewijania stop: true, // dodaj przycisk zatrzymania scrubber: true // false wyłącza przewijanie wideo}}}); </ script>

Przedstawiony kod ustawia następujące ustawienia globalne: wyłączenie automatycznego uruchamiania odtwarzania, wyłączenie automatycznego buforowania, skalowanie wideo w celu dopasowania do okna. Jako plik do odtworzenia używany jest obraz i wideo, a ustawienia obrazu są zastępowane (ponieważ powinny być ładowane automatycznie). po kliknięciu na zdjęcie (lub przycisk odtwarzania) wideo zostanie wyświetlone. jak widać, wszystko jest bardzo proste. jeśli chcesz dodać kolejny klip wideo, po prostu dodaj nowy element do listy odtwarzania, oddzielony przecinkiem. jeśli wymagane jest automatyczne odtwarzanie listy odtwarzania, w klipie tablicy asocjacyjnej jest ustawiona wartość autoPlay jest ustawiona na true.

znajduje się dokumentacja zawierająca funkcje API tutaj . jeśli ktoś nie rozumie angielskiego - to nie ma znaczenia, wszystko jest jasne. i po przeanalizowaniu powyższego kodu, całkiem możliwe jest zrozumienie, co jest w dokach. Gorąco polecam podgląd, na pewno będzie „ustawienie”, które będzie pożądane.

przykład może spójrz tutaj . nie zapomnij spojrzeć na kod źródłowy (Ctrl + U)

Wydawca

offline 1 tydzień

x64 (alias andi)

Komentarze: 2842 Publikacje: 395 Rejestracja: 02-04-2009

Chcesz zrozumieć magię javascript?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью