Pemain tidak akan dapat terhubung ke streaming langsung. Objek ModalDialog dibuat, gambar khusus ditempatkan di dalamnya, dan kemudian ModalDialog ditampilkan. Jika ModalDialog ditutup, kesalahan default ditampilkan
Catatan. Anda tidak akan segera melihat gambar PLEASE STAND BY yang ada di ModalWindow khusus. Gambar membutuhkan sedikit waktu untuk dimuat saat digunakan di dalam CodePen. Gambar akan muncul dengan sangat cepat saat Anda menempatkan gambar yang Anda inginkan di URL di bawah kendali Anda dan menggunakan jalur tersebut dalam kode yang muncul sebagainewElement.innerHTML =
"";
Untuk melihat performa di lingkungan normal, telusuri live-custom-error-test. html
Lihat Pen 18199-live-custom-error-message oleh Brightcove Learning Services [@rcrooks1969] di CodePen
Kode sumber
Lihat solusi lengkapnya di GitHub
Menggunakan CodePen
Berikut adalah beberapa tips untuk menggunakan CodePen di atas secara efektif
- Alihkan tampilan pemutar yang sebenarnya dengan mengklik tombol Hasil
- Klik tombol HTML/CSS/JS untuk menampilkan SALAH SATU dari jenis kode
- Nanti dalam dokumen ini, logika, alur, dan gaya yang digunakan dalam aplikasi akan dibahas di bagian , dan. Cara terbaik untuk mengikuti informasi di bagian tersebut adalah dengan
- Klik tombol EDIT ON CODEPEN di CodePen dan sediakan kode di satu tab browser/browser
- Di CodePen, sesuaikan kode apa yang ingin ditampilkan. Anda dapat mengubah lebar bagian kode yang berbeda di dalam CodePen
- Lihat bagian , dan/atau di browser/tab browser lain. Anda sekarang dapat mengikuti penjelasan kode dan pada saat yang sama melihat kodenya
Urutan pengembangan
Berikut adalah urutan pengembangan yang direkomendasikan
- Gunakan penerapan pemutar sematan Dalam Laman untuk menguji fungsi pemutar, plugin, dan CSS Anda [jika diperlukan CSS]
- Masukkan JavaScript dan CSS plugin ke dalam file terpisah untuk pengujian lokal
- Terapkan kode plugin dan CSS ke server Anda setelah Anda menemukan kesalahan apa pun
- Gunakan Studio untuk menambahkan plugin dan CSS ke pemutar Anda
- Ganti penerapan pemutar sematan Dalam Laman jika Anda menentukan bahwa penerapan iframe lebih cocok [dijelaskan di bagian selanjutnya]
Untuk detail tentang langkah-langkah ini, tinjau Langkah-demi-Langkah. Panduan Pengembangan Plugin
iframe atau penyematan Dalam Halaman
Saat mengembangkan penyempurnaan untuk Brightcove Player, Anda perlu memutuskan apakah kode tersebut paling cocok untuk penerapan penyematan iframe atau In-Page. Rekomendasi praktik terbaik adalah membuat plugin untuk digunakan dengan implementasi iframe. Keuntungan menggunakan pemutar iframe adalah
- Tidak ada tabrakan dengan JavaScript dan/atau CSS yang ada
- Responsif secara otomatis
- Iframe memudahkan penggunaan di aplikasi media sosial [atau kapan pun video perlu "melakukan perjalanan" ke aplikasi lain]
Meskipun mengintegrasikan pemutar sematan Dalam Laman bisa jadi lebih kompleks, ada kalanya Anda akan merencanakan kode Anda di sekitar implementasi tersebut. Untuk menggeneralisasi, pendekatan ini paling baik saat halaman yang berisi perlu berkomunikasi dengan pemain. Secara khusus, berikut adalah beberapa contoh
- Kode di halaman yang berisi perlu mendengarkan dan menindaklanjuti acara pemain
- Pemain menggunakan gaya dari halaman yang berisi
- Iframe akan menyebabkan logika aplikasi gagal, seperti pengalihan dari halaman yang berisi
Meskipun penerapan akhir Anda tidak menggunakan kode iframe, Anda tetap dapat menggunakan kode sematan Dalam Laman dengan plugin untuk JavaScript dan file terpisah untuk CSS Anda. Ini merangkum logika Anda sehingga Anda dapat dengan mudah menggunakannya di banyak pemain
Sumber daya API/Plugin digunakan
Metode APIAcara APIProperti APIKonfigurasi pemutar/HTML
Bagian ini merinci setiap konfigurasi khusus yang diperlukan selama pembuatan pemain. Selain itu, elemen HTML lain yang harus ditambahkan ke halaman, di luar kode penerapan pemutar sematan dalam halaman, dijelaskan
Konfigurasi pemain
Tidak diperlukan konfigurasi khusus untuk Brightcove Player yang Anda buat untuk sampel ini
HTML lainnya
Tidak ada elemen HTML lain yang ditambahkan ke halaman
Alur aplikasi
Logika dasar di balik aplikasi ini adalah
- Buat instance ModalDialog dan tempatkan gambar khusus di dalamnya
- Dengarkan kesalahan, dan jika itu adalah jenis kesalahan yang benar, tampilkan ModalDialog khusus
- Jika pemirsa video memilih untuk menutup ModalDialog khusus, tampilkan pesan kesalahan default
Buat elemen HTML // ### Create a div in which to place HTML content and place image inside ###
_0
// ### Create a div in which to place HTML content and place image inside ###
Temukan kode yang diberi label
// ### Create a div in which to place HTML content and place image inside ###
_Anda membuat elemen HTML
// ### Create a div in which to place HTML content and place image inside ###
0 dan menempatkan gambar di dalamnya yang ingin Anda tampilkan jika umpan langsung tidak berfungsiBangun objek tempat elemen HTML // ### Create a div in which to place HTML content and place image inside ###
_0 akan ditempatkan
// ### Create a div in which to place HTML content and place image inside ###
Temukan kode yang diberi label
// ### Define options object to be used for modal content ###
Ini diperlukan saat Anda membuat ModalDialog
Buat ModalDialog dan tempatkan gambar sebagai kontennya
Temukan kode yang diberi label
// ### Create Modal with options object ###
_Ini adalah kode standar untuk membuat instance ModalDialog dan menambahkannya ke pemutar. Secara default TIDAK ditampilkan
Dengarkan kesalahan yang akan dikirim
Temukan kode yang diberi label
// ### Listen for an error event ###
Ketika kesalahan dikirim, dapatkan kode dan durasi kesalahan
Periksa jenis kesalahan
Temukan kode yang diberi label
// ### Check if the error code and duration mean no video has loaded ###
_Untuk memeriksa apakah streaming langsung tidak diputar, gunakan yang berikut ini
if [[[errNo == "4" && duration == 0] || [errNo == "4" &&
Number.isNaN[duration]]]] {
// Hide the error display
myPlayer.errorDisplay.hide[];
// If conditions met show the custom modal
myModal.open[];
}
_Pemeriksaan kondisi
// ### Create a div in which to place HTML content and place image inside ###
_3 berfungsi untuk Chrome dan Firefox. Pemeriksaan kondisi kedua // ### Create a div in which to place HTML content and place image inside ###
_4 diperlukan untuk Safari dan browser di AndroidKesalahan default tampilan adalah ModalDialog khusus ditutup
Temukan kode yang diberi label
// ### If custom modal error closed, show the default error ###
Ini dilakukan hanya jika Anda ingin menerapkan perilaku ini. Cukup dengarkan event
// ### Create a div in which to place HTML content and place image inside ###
_5 dan dalam event handler-nya tampilkan kesalahan defaultGaya aplikasi
Satu-satunya CSS hanya mengukur pemain
Kode plugin
Biasanya saat mengonversi JavaScript menjadi plugin Brightcove Player, diperlukan perubahan nominal. Satu perubahan yang diperlukan adalah mengganti penggunaan standar metode
// ### Create a div in which to place HTML content and place image inside ###
6 dengan kode yang mendefinisikan pluginIni adalah kode JavaScript awal yang sangat umum digunakan yang akan berfungsi dengan pemutar
videojs.getPlayer['myPlayerID'].ready[function[] {
var myPlayer = this;
...
}];
Anda akan mengubah baris pertama untuk menggunakan sintaks standar untuk memulai plugin Brightcove Player
videojs.registerPlugin['pluginName', function[options] {
var myPlayer = this;
...
}];
Seperti disebutkan sebelumnya, Anda dapat melihat kode JavaScript plugin di repo GitHub yang sesuai dengan dokumen ini. liveCustomError. js
Menggunakan plugin dengan pemain
Setelah file CSS dan JavaScript plugin disimpan di lokasi yang dapat diakses Internet, Anda dapat menggunakan plugin dengan pemutar. Dalam modul PEMAIN Studio Anda dapat memilih pemain, lalu di bagian PLUGIN tambahkan URL ke file CSS dan JavaScript, dan tambahkan juga Nama dan Opsi, jika diperlukan opsi