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

vloženie videa na stránku: použite javascript a flash

  1. Autori
  2. x64 (aka andi)

pred nejakým časom som spomenul video tag, špeciálne implementovaný v html5

pred nejakým časom som spomenul video tag, špeciálne implementovaný v html5. používanie tagu však bohužiaľ spôsobí skôr nepríjemnosti než úžitok. Preto vám povieme o spôsobe, akým môžete úplne robiť s jedným formátom videa.

pre jeden projekt som potreboval nájsť možnosť odskrutkovania videí na stránke. Nie je možné urobiť hráča od nuly na záblesku (na začiatok nemám vývojové prostredie a neposkytol ho), takže v skutočnosti bolo potrebné nájsť vhodného kandidáta tvárou v tvár prehrávaču flash. nebolo potrebné nič zvlášť zložité, pretože vďaka používateľom služby YouTube sa v tomto druhu hráčov veľmi ľahko orientujú;)

2 kandidáti umiestnení na stránkach flv-mp3.com (projekt z uppodʻa) a Flowplayer , po vytvorení malého poke bol prvý rýchlo opustený v prospech kombajnu poskytujúceho súčasný api. Ako sa ukázalo, vnútorný črevo ma nenechal dole (hoci niektorí ľudia sa dostali do vtyuhat flv-mp3.com).

Ako viete, prvý dojem je dosť klamný a uprednostňuje sa niekedy najmenej nasýtené zariadenie (najmä ak používa rodný jazyk). Je to práve tento prístup, ktorý sa požadoval na flv-mp3: služba poskytuje možnosť „zostaviť“ hráča so špecifikovanými vlastnosťami (napr. formulár označte súbor, ktorý sa práve prehráva, šetrič obrazovky, rozmery a niektoré ďalšie parametre) a zadajte výstupný kód na vloženie súboru. Áno, možnosť sa môže zdať veľmi pohodlná, najmä pre ľudí, ktorí považujú html za silnú čarodejnicu, nehovoriac o js a tak ďalej.

je nepravdepodobné, že iba pravidelné pridávanie videí na stránku prispeje k nadšeniu neustáleho „konštruovania“ hráča samotného. alternatívne môžete preskúmať všetky nastavenia a automatizovať ich prostredníctvom jazyka servera. ale tento princíp sa dá nazvať len skreslený (je oveľa jednoduchšie načítať videá na YouTube a získať pripravený kód na stiahnutie).

tu sa dostávame k tej veci, ktorá sa už dá úplne nazvať čarodejnicou. chcete pochopiť javascript magic? Ukážem, že to nie je vôbec ťažké (dokonca jednoduchšie ako používanie konštruktora). a pomoc s týmto prietokomerom. si môžete vybrať verziu odtiaľto , ale úplne prvá verzia, ktorá je distribuovaná pod GPL3, je celkom vhodná pre vaše stránky.

Prehrávač podporuje prehrávanie nasledujúceho obsahu: flv, mp4, m4v (pre obrázky - jpg, gif, png). Video je podporované od verzie 9, takže by nemali byť žiadne problémy s podporou.

Stiahnite si archív s prehrávačom a rozbaľte ho. Budete musieť nahrať 3 súbory na stránku: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf a example / flowplayer-NumVer.min.js , kde NumVer je len číslo verzie a môže byť napríklad 3.2.7 .

Prvý súbor obsahuje ovládací panel, druhý - priamo prehrávač a tretí je odkaz, ktorý poskytuje api. Prvé 2 súbory (* .swf) musia byť v rovnakom priečinku. Teraz je čas na najjednoduchší kód. môže to byť:

<div id = "player" štýl = "šírka: 640px; výška: 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>

Prvok div s ID hráča je kontajner, v ktorom bude video odskrutkované. v druhom riadku je pripojenie súboru javascript. Priamo pre výstup zodpovedá jedna funkcia flowplayer () , ktorá prechádza 3 parametre:

  1. ID prvku, v ktorom sa má video prehrať;
  2. cesta k hráčovi (konkrétne k hráčovi, a nie k ovládačom, ktoré budú automaticky načítané);
  3. Niektoré ďalšie parametre.

Mimochodom, okrem identifikátora, môžete priamo odovzdať odkaz na objekt alebo selektor.

Vyššie uvedený kód nič nezobrazuje, ale dáva predstavu o tom, aké ľahké je pripojiť flowplayer na stránku. Ak chcete na výstup video, musíte vytvoriť tretí parameter, a to, mimochodom, je tiež veľmi jednoduché.

pre jednoduchosť: tretí parameter (config) je asociatívne pole, v ktorom možno opísať nasledujúce prvky:

  • klip - pomocou tohto kľúča môžete „vytvoriť“ globálne nastavenia, napríklad, či chcete automaticky spustiť ukladanie do vyrovnávacej pamäte (autoBuffering) alebo prehrávanie (automatické prehrávanie), ako škálovať obsah (škálovanie s hodnotou prispôsobenia zachová pôvodný pomer strán a pre normálne video sa použije, možno len to). Môžete tiež špecifikovať prehrávaný súbor (url) a dokonca pozastaviť udalosti (funkcie, ktoré sa budú volať, napríklad pri spustení prehrávania videozáznamu);
  • playlist je bežné pole (zoznam). každý prvok môže byť reťazec (v tomto prípade reťazec je adresa prehrávaného klipu) alebo asociatívne pole. v druhom prípade môže byť dátová množina vnímaná ako dátová množina podobná kl'účovému kľúču z predchádzajúcej položky, t. j. môžete špecifikovať, aby sa používalo ukladanie do vyrovnávacej pamäte, začalo hrať a tak ďalej;
  • pluginy - slúži na rozšírenie štandardných funkcií. Jednou z funkcií je schopnosť Russify rozhranie priamo na mieste.

Teraz malý príklad, ktorý obsahuje ukážku možností:

<div id = "player" štýl = "šírka: 520px; výška: 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, škálovanie : 'fit'}, zoznam skladieb: [{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 '], // na manipuláciu s ovládacími prvkami pluginov: {controls: {url:' flowplayer.controls-3.2.16.swf ', playlist: false , // odstráni tlačidlá spätného chodu stop: true, // pridá tlačidlo stop scrubber: true // false vypne rolovanie videa}}}); </ script>

Predložený kód nastavuje ako globálne nastavenia nasledovné: vypnutie automatického spustenia prehrávania, vypnutie automatického ukladania do vyrovnávacej pamäte, škálovanie videa tak, aby sa zmestilo do okna. Ako súbor, ktorý sa dá prehrať, sa použije obrázok a video a nastavenia obrázka sa prepíšu (pretože by sa mali automaticky načítať). keď kliknete na obrázok (alebo tlačidlo prehrávania), zobrazí sa video. Ako vidíte, všetko je veľmi jednoduché. Ak chcete pridať ďalší videoklip, jednoducho pridajte novú položku do zoznamu skladieb oddelenú čiarkou. ak sa vyžaduje automatické prehrávanie zoznamu skladieb, v klipe asociatívneho poľa sa nastaví hodnota autoPlay na hodnotu true.

sa nachádza dokumentácia obsahujúca funkcie api tu , ak niekto nerozumie anglicky - na tom nezáleží, všetko je tam celkom jasné. a po analýze vyššie uvedeného kódu je celkom možné pochopiť, čo je v dokoch. Vrelo odporúčam nahliadnuť, určite tam bude "nastavenie", ktoré bude v dopyte.

napríklad pozrite sa sem , nezabudnite sa pozrieť na zdrojový kód (Ctrl + U)

Autori

offline 1 týždeň

x64 (aka andi)

Komentáre: 2842 Publikácie: 395 Registrácia: 02-04-2009

Chcete pochopiť javascript magic?


Новости
    Без плагина
    На сайте 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) — поднятие позиций сайта в результатах... 
    Читать полностью