sayfaya video ekleme: javascript ve flash kullan

1. Yazarlar

bir süre önce html5'te özel olarak uygulanan video etiketinden bahsettim. Bununla birlikte, ne yazık ki, etiketin kullanımı faydadan ziyade daha fazla sıkıntıya neden olacaktır. bu nedenle, size tek bir video formatı ile tam olarak ne şekilde yapabileceğinizi anlatacağım.

bir proje için sitedeki videoların sökülmesi olasılığını bulmam gerekiyordu. Bir oyuncunun flaşı sıfırdan çizmesi mümkün olmadı (başlangıç ​​için bir geliştirme ortamına sahip değildim ve sağlamadım), bu yüzden aslında bir flash player karşısında uygun bir aday bulmak gerekliydi. özellikle karmaşık olan hiçbir şey gerekli değildi, çünkü YouTube kullanıcıları sayesinde bu tür oynatıcılarda gezinmek çok kolay;)

Flv-mp3.com sitelerinde bulunan 2 aday (uppodʻa'dan bir proje) ve flowplayer . her biri küçük bir dürtme yaptıktan sonra, birincisi, mevcut api'yi sağlayan birleştirme lehine hızla terk edildi. Zamanın gösterdiği gibi, iç bağırsak beni hayal kırıklığına uğratmadı (bazı insanlar flv-mp3.com’a girmeyi başardı).

Bildiğiniz gibi, ilk izlenim oldukça aldatıcıdır ve bazen en az doymuş cihaza tercih edilir (özellikle de ana dili kullanıyorsa). Bu, flv-mp3'te talep edilen yaklaşımdır: hizmet, belirtilen özelliklere sahip bir oyuncuyu “birleştirme” imkanı sağlar (in biçim oynatılmakta olan dosyayı, ekran koruyucuyu, boyutları ve diğer bazı parametreleri belirtin) ve dosyayı eklemek için çıktı kodunu alın. Evet, özellikle html'yi güçlü bir cadı olarak niteleyen insanlar için, js ve benzerlerinden bahsetmemek için seçenek çok uygun görünebilir.

Videoların yalnızca siteye düzenli aralıklarla eklenmesi, oynatıcıyı kendi kendine sürekli "oluşturma" coşkusuna katkıda bulunma ihtimalinin düşük olması anlamına gelmez. alternatif olarak, tüm ayarları keşfedebilir ve sunucu dili aracılığıyla otomatikleştirebilirsiniz. ancak bu ilkeye yalnızca bozulma denilebilir (videoları YouTube'a yüklemek ve indirme için hazır kodu almak çok daha kolaydır).

burada tam olarak büyücü olarak adlandırılabilecek bir şeye geldik. javascript sihrini anlamak ister misiniz? Bunun hiç de zor olmadığını göstereceğim (bir kurucu kullanmaktan daha kolay). ve bu akış oynatıcıya yardımcı olun. Bir sürüm seçebilirsiniz buradan , ancak GPL3 altında dağıtılan ilk sürüm siteniz için oldukça uygundur.

Müzikçalar şu içeriğin oynatılmasını destekler: flv, mp4, m4v (görüntüler için - jpg, gif, png). Video, sürüm 9'dan bu yana destekleniyor, bu nedenle herhangi bir destek sorunu olmamalıdır.

Arşivi müzikçalarla indirin ve açın. Siteye 3 dosya yüklemeniz gerekecektir: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf ve example / flowplayer-NumVer.min.js , burada NumVer sadece sürüm numarasıdır ve örneğin, 3.2.7 .

İlk dosya kontrol panelini içerir, ikincisi - doğrudan oynatıcı ve üçüncüsü api sağlayan bağlantıdır. İlk 2 dosya (* .swf) aynı klasörde olmalıdır. şimdi en basit kod zamanı. olabilir:

Oynatıcı kimliğine sahip div elemanı videonun söküleceği kaptır. İkinci satırda javascript dosya bağlantısı. Doğrudan çıktı için 3 parametreyi geçen bir fonksiyon akış göstericisi () sorumludur:

1. videonun oynatılması gereken öğenin tanıtıcısı;
2. oyuncuya giden yol (yani oyuncuya ve otomatik olarak yüklenecek kontrollere değil);
3. Bazı ek parametreler.

Bu arada, tanımlayıcıya ek olarak, bir nesneyi veya seçiciyi doğrudan bir referans iletebilirsiniz.

Yukarıdaki kod hiçbir şey göstermez, ancak bir akış oynatıcıyı bir sayfaya bağlamanın ne kadar kolay olduğu hakkında bir fikir verir. Video çıkışı için, üçüncü bir parametre oluşturmanız gerekir ve bu arada, bu da oldukça basittir.

basitlik için: üçüncü parametre (config), aşağıdaki öğelerin tanımlanabileceği bir ilişkisel dizidir:

• klip - Bu tuşu kullanarak, örneğin, otomatik olarak tamponlamaya (autoBuffering) veya oynatmaya (autoPlay) otomatik olarak başlamak isteyip istemediğiniz, içeriğin nasıl ölçekleneceği (uygun değer ile ölçeklendirme orijinal en boy oranını koruyacak ve normal video için kullanılacak belki sadece o). Ayrıca, oynatılmakta olan dosyayı (url) belirleyebilir ve hatta olayları askıya alabilirsiniz (örneğin, film oynatılmaya başladığında çağrılacak işlevler);
• çalma listesi normal bir dizidir (liste). her eleman bir dize (bu durumda, dize, oynatılan klibin adresidir) veya bir ilişkisel dizi olabilir. ikinci durumda, veri seti önceki öğeden gelen klip anahtarına benzer bir veri seti olarak görülebilir, yani tamponlamayı kullanmayı, oynatmaya başlamayı vb.
• eklentileri - standart özellikleri genişletmeye yarar. Özelliklerden biri, arayüzü anında yerinde oluşturma yeteneğidir.

Şimdi olasılıkların bir gösterimini içeren küçük bir örnek:

Sunulan kod aşağıdakileri genel ayarlar olarak belirler: otomatik başlatmanın devre dışı bırakılması, otomatik arabelleğin devre dışı bırakılması, videonun pencereye sığması için ölçeklendirilmesi. Oynatılabilir bir dosya olarak, bir resim ve video kullanılır ve resim için ayarlar geçersiz kılınır (çünkü otomatik olarak yüklenmesi gerekir). Resme (veya oynat düğmesine) tıkladığınızda video gösterilir. Gördüğünüz gibi, her şey çok basit. Başka bir video klip eklemek istiyorsanız, çalma listesine virgülle ayrılmış olarak yeni bir öğe ekleyin. Oynatma listesinin otomatik oynatılması gerekiyorsa, ilişkisel dizi klibi ayarlanmışsa, otomatik oynatma değeri true olarak ayarlanır.

api fonksiyonlarını içeren dokümantasyon bulunur burada . Eğer birisi İngilizce'yi anlamıyorsa - farketmez, orada her şey çok açık. ve yukarıdaki kodu analiz ettikten sonra rıhtımda ne olduğunu anlamak oldukça mümkündür. Bir dikizlemeyi kesinlikle tavsiye ediyorum, elbette talep edilecek bir “ortam” olacak.

örnek olabilir buraya bak . kaynak koduna bakmayı unutma (Ctrl + U)

Yazarlar

çevrimdışı 1 hafta

x64 (aka andi)