Bagaimana cara menampilkan pesan kesalahan khusus di html?

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
  1. Klik tombol EDIT ON CODEPEN di CodePen dan sediakan kode di satu tab browser/browser
  2. Di CodePen, sesuaikan kode apa yang ingin ditampilkan. Anda dapat mengubah lebar bagian kode yang berbeda di dalam CodePen
  3. 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

1. Gunakan penerapan pemutar sematan Dalam Laman untuk menguji fungsi pemutar, plugin, dan CSS Anda (jika diperlukan CSS)
2. Masukkan JavaScript dan CSS plugin ke dalam file terpisah untuk pengujian lokal
3. Terapkan kode plugin dan CSS ke server Anda setelah Anda menemukan kesalahan apa pun
4. Gunakan Studio untuk menambahkan plugin dan CSS ke pemutar Anda
5. 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

Konfigurasi 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

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 ###

Bangun objek tempat elemen HTML // ### Create a div in which to place HTML content and place image inside ### _0 akan ditempatkan

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 ###

// ### Create a div in which to place HTML content and place image inside ###

Kesalahan 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 ###

Gaya 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 ###

Ini 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

Bagaimana Anda menyesuaikan pesan kesalahan dalam HTML?

Bagaimana cara menampilkan pesan kesalahan dalam bentuk HTML?

Bagaimana Anda menampilkan pesan kesalahan di bawah bidang input dalam HTML?

Bagaimana cara menampilkan pesan kesalahan di CSS?