penyisipan video pada halaman: gunakan javascript dan flash

  1. Penulis publikasi
  2. x64 (alias andi)

beberapa waktu lalu saya menyebutkan tag video, khusus diimplementasikan dalam HTML5

beberapa waktu lalu saya menyebutkan tag video, khusus diimplementasikan dalam HTML5. namun, sayangnya, penggunaan tag akan menyebabkan lebih banyak ketidaknyamanan daripada manfaat. oleh karena itu, saya akan memberi tahu Anda tentang cara di mana Anda dapat sepenuhnya melakukan dengan satu format video.

untuk satu proyek saya perlu menemukan kemungkinan membuka video di situs. Tidak mungkin membuat pemain dari awal dengan cepat (untuk permulaan, saya tidak memiliki lingkungan pengembangan dan tidak menyediakannya), jadi perlu, pada kenyataannya, untuk menemukan kandidat yang cocok di hadapan pemain flash. tidak ada yang rumit yang diperlukan, karena terima kasih kepada pengguna YouTube sangat mudah dinavigasi dalam pemain seperti ini;)

2 kandidat terletak di situs flv-mp3.com (sebuah proyek dari uppodʻa) dan pemain aliran . Setelah membuat tusuk kecil masing-masing, yang pertama dengan cepat ditinggalkan demi kombinasi yang menyediakan api sekarang. seperti waktu telah ditunjukkan, isi perut tidak mengecewakan saya (walaupun beberapa orang berhasil masuk ke vtyuhat flv-mp3.com).

Seperti yang Anda ketahui, kesan pertama agak menipu, dan preferensi kadang-kadang diberikan kepada perangkat yang paling tidak jenuh (terutama jika menggunakan bahasa asli). Pendekatan inilah yang banyak diminati pada flv-mp3: layanan ini memberikan kesempatan untuk "merakit" pemain dengan karakteristik tertentu (dalam bentuk menunjukkan file yang sedang diputar, screen saver, dimensi dan beberapa parameter lainnya) dan dapatkan kode output untuk memasukkan file. Ya, opsi ini mungkin terlihat sangat nyaman, terutama bagi orang-orang yang menganggap html penyihir yang kuat, belum lagi js dan sebagainya.

hanya penambahan video secara berkala ke situs yang tidak mungkin berkontribusi terhadap antusiasme yang terus-menerus “membangun” pemain dengan sendirinya. sebagai alternatif, Anda dapat menjelajahi semua pengaturan dan mengotomatiskan melalui bahasa server. tetapi prinsip ini hanya dapat disebut terdistorsi (lebih mudah memuat video di YouTube dan mendapatkan kode siap untuk diunduh).

di sini kita sampai pada hal yang sudah dapat sepenuhnya disebut penyihir. Anda ingin memahami sihir javascript? Saya akan menunjukkan bahwa itu sama sekali tidak sulit (bahkan lebih mudah daripada menggunakan konstruktor). dan bantu dengan flowplayer ini. Anda dapat memilih versi dari sini , tetapi versi pertama yang didistribusikan di bawah GPL3 cukup cocok untuk situs Anda.

Pemain mendukung pemutaran konten berikut: flv, mp4, m4v (untuk gambar - jpg, gif, png). Video ini didukung sejak versi 9, jadi seharusnya tidak ada masalah dukungan.

Unduh arsip dengan pemain dan buka kemasannya. Anda perlu mengunggah 3 file ke situs: flowplayer.controls-NumVer.swf , flowplayer-NumVer.swf dan contoh / flowplayer-NumVer.min.js , di mana NumVer hanyalah nomor versi, dan mungkin, misalnya 3.2.2 .

File pertama berisi panel kontrol, yang kedua - langsung pemain dan yang ketiga adalah tautan yang menyediakan api. 2 file pertama (* .swf) harus berada di folder yang sama. sekarang saatnya untuk kode paling sederhana. mungkin:

<div id = "player" style = "lebar: 640px; tinggi: 480px;"> </ div> <jenis skrip = "teks / javascript" src = "/ src / player / flowplayer-3.2.6.min.js "> </ script> <script type =" text / javascript "> flowplayer ('player', '/src/player/flowplayer-3.2.7.swf', {}); </ skrip>

Elemen div dengan ID pemain adalah wadah tempat video akan dibuka. di baris kedua adalah koneksi file javascript. Langsung untuk output bertanggung jawab satu fungsi flowplayer () , yang melewati 3 parameter:

  1. ID elemen tempat video diputar;
  2. path ke pemain (yaitu ke pemain, dan bukan ke kontrol yang akan dimuat secara otomatis);
  3. Beberapa parameter tambahan.

Ngomong-ngomong, selain pengenal, Anda bisa langsung memberikan referensi ke objek atau pemilih.

Kode di atas tidak menampilkan apa pun, tetapi memberikan gambaran betapa mudahnya menghubungkan flowplayer ke sebuah halaman. Untuk menghasilkan video, Anda perlu membuat parameter ketiga, dan omong-omong, ini juga cukup sederhana.

untuk kesederhanaan: parameter ketiga (konfigurasi) adalah array asosiatif di mana elemen-elemen berikut dapat dijelaskan:

  • klip - menggunakan tombol ini, Anda dapat "membuat" pengaturan global, misalnya, apakah Anda ingin memulai buffering (autoBuffering) atau bermain (autoPlay) secara otomatis, bagaimana skala konten (penskalaan dengan nilai kecocokan akan mempertahankan rasio aspek asli, dan untuk video normal akan digunakan, mungkin hanya itu). Anda juga dapat menentukan file yang sedang diputar (url), dan bahkan menunda acara (fungsi yang akan dipanggil, misalnya, ketika film mulai diputar);
  • daftar putar adalah larik reguler (daftar). setiap elemen dapat berupa string (dalam hal ini, string adalah alamat klip yang sedang diputar), atau array asosiatif. dalam kasus kedua, kumpulan data dapat dilihat sebagai kumpulan data yang mirip dengan kunci klip dari item sebelumnya, yaitu Anda dapat menentukan untuk menggunakan buffering, mulai bermain, dan sebagainya;
  • plugins - berfungsi untuk memperluas fitur standar. Salah satu fitur adalah kemampuan untuk Russify antarmuka tepat di tempat.

Sekarang contoh kecil yang termasuk demonstrasi kemungkinan:

<div id = "player" style = "lebar: 520px; tinggi: 330px;"> </ div> <jenis skrip = "teks / 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'}, daftar putar: [{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 '], // untuk memanipulasi kontrol plugins: {kontrol: {url:' flowplayer.controls-3.2.16.swf ', daftar putar: false , // menghapus mundur tombol berhenti: benar, // menambahkan berhenti tombol scrubber: benar // salah menonaktifkan gulir video}}}); </ skrip>

Kode yang disajikan menetapkan yang berikut ini sebagai pengaturan global: menonaktifkan pemutaran mulai otomatis, menonaktifkan buffering otomatis, penskalaan video agar sesuai dengan jendela. Sebagai file yang dapat diputar, gambar dan video digunakan, dan pengaturan untuk gambar ditimpa (karena harus dimuat secara otomatis). ketika Anda mengklik gambar (atau tombol putar), video ditampilkan. seperti yang Anda lihat, semuanya sangat sederhana. jika Anda ingin menambahkan klip video lain, cukup tambahkan item baru ke daftar putar, dipisahkan dengan koma. jika pemutaran playlist otomatis diperlukan, dalam klip array asosiatif diatur, nilai putar otomatis diatur ke true.

dokumentasi yang berisi fungsi api berada disini . jika seseorang tidak mengerti bahasa Inggris - tidak masalah, semuanya cukup jelas di sana. dan setelah menganalisis kode di atas, sangat mungkin untuk memahami apa yang ada di dermaga. Saya sangat merekomendasikan mengintip, pasti akan ada "pengaturan" yang akan diminati.

contoh bisa lihat di sini . jangan lupa untuk melihat kode sumber (Ctrl + U)

Penulis publikasi

offline 1 minggu

x64 (alias andi)

Komentar: 2842 Publikasi: 395 Pendaftaran: 02-04-2009

Anda ingin memahami sihir javascript?