sahifada video kiritish: javascript va flesh-ni ishlatish

  1. Nashr muallifi

bir muncha vaqt oldin html5-da maxsus yaratilgan video-teg haqida gapirib berdim. Afsuski, bu tegdan foydalanish foyda olishdan ko'ra ko'proq noqulaylikka olib keladi. shuning uchun men sizlarga bitta video formati bilan qanday qilib ishlashingiz mumkinligini aytib beraman.

Bitta loyiha uchun saytda vidolashish imkoniyatini topishim kerak edi. O'yinchini chirog'dan chizish mumkin emas edi (boshlash uchun, menda rivojlanish muhiti yo'q va uni ta'minlamagan), shuning uchun flesh-pleyer oldida munosib nomzodni topish kerak edi. Hech narsa murakkab emas edi, chunki YouTube foydalanuvchilari orqali bunday o'yinchilarni tomosha qilish juda oson;)

Flv-mp3.com saytida (uppod'adan olingan loyiha) va flowplayer . har birida kichik poke yasab, birinchisi tezda bu api bilan ta'minlaydigan kombinat foydasiga tark qilindi. vaqt ko'rsatganidek, ichak tutqichi meni qo'yib yubormadi (garchi ba'zi odamlar vtyuhat flv-mp3.com ga kirishga muvaffaq bo'lishgan bo'lsa ham).

Ma'lumki, birinchi taassurot juda aldamchi va ba'zida eng kam to'yingan qurilmaga afzallik beriladi (ayniqsa ona til ishlatilsa). Bu flv-mp3 formatida talabga ega bo'lgan ushbu yondashuv: xizmat ko'rsatilgan xususiyatlarga ega bo'lgan o'yinchi (to'plamda) to'plash imkoniyatini beradi. shakl faylni ko'rsatishi, ekran saqlovchisi, o'lchovlar va boshqa parametrlar) va faylni kiritish uchun chiqish kodini oling. Ha, imkoniyat juda qulay ko'rinishi mumkin, ayniqsa htmlni kuchli jodugar deb hisoblaydiganlar, js va boshqalarni eslatmasliklari mumkin.

faqat saytga videolarni muntazam qo'shib qo'yish o'yinchini doimiy ravishda "qurish" g'ayratiga hissa qo'shmaydi. Shu bilan bir qatorda, siz barcha sozlamalarni o'rganib, server tilidan avtomatlashtirasiz. ammo bu printsipni faqat buzuq deb atash mumkin (YouTube'da videolarni yuklash va yuklab olish uchun tayyor kodni olish ancha osondir).

biz allaqachon sehrgar deb ataladigan narsaga keldik. javascript sehrini anglashni istaysizmi? Men hech qanday qiyin emas (konstruktordan foydalanishdan ham osonroq) ekanligini ko'rsata olaman. va bu akışkanla bilan yordam beradi. versiyani tanlashingiz mumkin bu erdan , lekin GPL3 ostida tarqatilgan birinchi versiya saytingiz uchun juda mos keladi.

Aktyor quyidagi kontentni tinglashni qo'llab-quvvatlaydi: flv, mp4, m4v (rasmlar uchun - jpg, gif, png). Video 9-versiyadan beri qo'llab-quvvatlanadi, shuning uchun hech qanday qo'llab-quvvatlash muammolari bo'lmasligi kerak.

Arxivni pleer bilan yuklab oling va uni oching. Sizda 3 ta faylni saytga yuklashingiz kerak bo'ladi: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf va example / flowplayer-NumVer.min.js , bu erda NumVer faqat versiya raqami va 3.2.7 bo'lishi mumkin.

Birinchi fayl boshqaruv paneli, ikkinchisi - o'yinchi to'g'ridan-to'g'ri, uchinchisi esa api bilan ta'minlaydi. Birinchi 2 fayl (* .swf) bir xil papkada bo'lishi kerak. Endi oddiy kod uchun vaqt keldi. u shunday bo'lishi mumkin:

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

Pleyer identifikatori bilan ishlaydigan div elementi videoning ochilishi kerak bo'lgan konteyner. Ikkinchi satrda javascript fayllari mavjud. To'g'ridan-to'g'ri chiqish uchun 3 parametrdan o'tgan bir funktsiyali flowplayer () funksiyasi javob beradi :

  1. Videoning ijro etilishi kerak bo'lgan element identifikatori;
  2. o'yinchi uchun yo'l (ya'ni avtomatik tarzda yuklab olinadigan boshqarish vositalariga emas, balki o'yinchi uchun);
  3. Ba'zi qo'shimcha parametrlar.

Ayni paytda, identifikatorga qo'shimcha ravishda siz to'g'ridan-to'g'ri ob'ekt yoki selektorga murojaat qilishingiz mumkin.

Yuqoridagi kod hech narsa ko'rsatmaydi, biroq u akkauntingizni sahifaga ulash qanchalik oson ekanligi haqida fikr beradi. Videoni chiqarish uchun siz uchinchi parametrni yaratishingiz kerak va bu, shu bilan birga, juda oddiy.

soddalashtirish uchun: uchinchi parametr (konfiguratsiya) quyidagi elementlarni ta'riflash mumkin bo'lgan assotsiativ qator:

  • clip - bu tugma yordamida siz global parametrlarni yaratishingiz mumkin, masalan, avtomatik ravishda buffering (autoBuffering) yoki o'ynashni (autoPlay) ishga tushirishni xohlaysizmi, kontentni qanday o'lchash kerak (moslik qiymatini moslashtirish asl aspektni saqlaydi va oddiy video uchun ishlatiladi, ehtimol bu faqat). Bundan tashqari, siz ijro qilinadigan faylni (url) ham ko'rsatishingiz va hodisalarni to'xtatib qo'yishingiz mumkin (masalan, kino o'ynashni boshlaganda);
  • pleylist oddiy bir qator (ro'yxat). har bir element bir string bo'lishi mumkin (bu holda, satr ijro qilinadigan videoning manzili) yoki assotsiativ qator. Ikkinchi holatda ma'lumotlar to'plami oldingi elementdan klip kaliti bilan o'xshash ma'lumotlar majmuasi sifatida ko'rish mumkin, ya'ni buferlashni ishlatish, ishga tushirishni boshlash va hokazo .;
  • plaginlari - standart funktsiyalarni kengaytirishga xizmat qiladi. Funktsiyalardan biri - interfeysni o'ng tomonga to'g'rilash qobiliyati.

Keling, imkoniyatlarning namoyishini o'z ichiga olgan kichik bir misol:

<div id = "o'yinchi" style = "width: 520px; height: 330px;"> </ div> <script type = "matn / 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: noto'g'ri, autoBuffering: false, scaling : 'Fit'}, ijro ro'yxati: [{url: 'https: //a-panov.ru/wp-content/uploads/2011/flowplayer.jpg', autoBuffering: rost, autoPlay: true}, 'http: // pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv '], // plaginlarni boshqarish uchun manipulyatsiya qilish uchun: {controls: {url:' flowplayer.controls-3.2.16.swf ', ijro ro'yxati: noto'g'ri , // orqaga qaytarish tugmachalarini bekor qiladi: rost, // tugmacha tugmachasini o'chirish tugmasi: rost_ / false videoni kaydirishni o'chiradi}}}; </ skript>

Taqdim etilgan kod global sozlamalar sifatida quyidagilarni o'rnatadi: avtomatik ishga tushirishni to'xtatish, avtomatik tamponlashtirishni o'chirib qo'yish, oynaga moslash uchun videoni o'lchash. Ijro qilinishi mumkin bo'lgan fayl sifatida rasm va video ishlatiladi va rasm uchun sozlamalar bekor qilinadi (u avtomatik ravishda yuklab qo'yilishi kerak). rasmni (yoki o'ynash tugmasi) bosganingizda, video ko'rsatiladi. Ko'rib turganingizdek, hamma narsa juda oddiy. Agar siz boshqa videoklipni qo'shishni istasangiz, faqat yangi ro'yxatga qo'shing va u vergul bilan ajrating. Agar ijro ro'yxatining avtomatik ravishda ijro etilishi talab etilsa, assotsiativ qator klipida autoPlay qiymati rost sifatida o'rnatiladi.

api funktsiyalari mavjud hujjatlar mavjud Bu erda . agar kimdir ingliz tilini tushunmasa - bu muhim emas, u erda hamma narsa aniq. va yuqoridagi kodni tahlil qilgandan so'ng, docklarda nima ekanligini tushunish mumkin. Biror narsani tavsiya qilaman, albatta talab qilinadigan "sozlash" bo'ladi.

misol bo'lishi mumkin bu erga qarang . manba kodini ko'rishni unutmang (Ctrl + U)

Nashr muallifi

oflayn 1 hafta

x64 (aka andi)

Sharhlar: 2842 Nashrlar: 395 Ro'yxatga olish: 02-04-2009Javascript sehrini anglashni istaysizmi?