Bina pemain media dengan HTML

3

Kemungkinan untuk media dalam HTML telah dimulakan dengan pengenalan video dan unsur audio di HTML5. Sekarang kita boleh membenamkan video dan audio di laman web tanpa memerlukan teknologi proprietari seperti Flash atau Silverlight.

dengan sokongan penyemak imbas lebih baik dari sebelumnya, dan teknologi baru seperti WebVTT mula tiba, kini adalah masa yang tepat untuk mengenali (atau meninjau semula) unsur -unsur HTML yang baru.

SitePoint baru sahaja melancarkan membina pemain media HTML anda sendiri, satu kursus yang membuat anda dapat mempercepatkan dengan elemen media HTML5 dan bagaimana untuk membawanya ke peringkat seterusnya dengan CSS dan JavaScript.

Berikut adalah video dari kursus yang mendapat bola bergulir, menunjukkan kepada anda cara menyusun kod HTML untuk pemain media tersuai. (Video kemudian menunjukkan bagaimana untuk membina ini dengan CSS dan JavaScript untuk membuat pemain media yang berfungsi sepenuhnya.)

Memuatkan pemain ...

anda boleh memuat turun fail sumber untuk demo ini di GitHub.

Jika anda mendapati ini berguna, lihat kursus penuh di SitePoint - yang membawa anda dari asas -asas sehingga membangunkan pemain media yang berfungsi sepenuhnya, bermain kedua -dua audio dan video.

Soalan Lazim (Soalan Lazim) Mengenai Membangun Pemain Media Dalam HTML

Apakah tag HTML asas yang diperlukan untuk mencipta pemain media? Tag ini digunakan untuk membenamkan kandungan video atau audio pada halaman web anda. Tag

digunakan dalam tag ini untuk menentukan fail sumber media. Atribut 'kawalan' boleh ditambah ke

atau tag untuk memberikan permainan, jeda, dan kawalan kelantangan. Responsif?

Untuk menjadikan pemain media anda responsif, anda boleh menggunakan CSS. Dengan menetapkan lebar video kepada 100% dan ketinggian kepada auto, pemain video akan skala mengikut saiz bekasnya. Ini memastikan bahawa pemain media akan menyesuaikan diri dengan saiz dan orientasi skrin yang berbeza.

Bagaimana saya boleh menambah sari kata atau kapsyen kepada pemain media saya? tag. Tag ini digunakan dalam tag

dan memerlukan atribut 'jenis', 'src', dan 'srclang'. Atribut 'jenis' menentukan jenis trek teks, atribut 'SRC' menentukan fail sumber trek teks, dan atribut 'Srclang' menentukan bahasa trek teks.

Bagaimana saya boleh menyesuaikan kawalan pemain media saya?

Menyesuaikan kawalan pemain media anda memerlukan JavaScript dan CSS. Anda boleh menyembunyikan kawalan lalai dengan mengeluarkan atribut 'kawalan' dari . Atribut 'poster' menentukan imej yang akan ditunjukkan semasa video dimuat turun, atau sehingga pengguna memukul butang main. >

anda boleh melengkapkan video atau audio dalam pemain media anda menggunakan atribut 'Loop' dalam

atau tag. Atribut 'Loop' adalah atribut Boolean. Apabila hadir, ia menyatakan bahawa audio/video akan bermula sekali lagi, setiap kali ia selesai. Anda boleh membisukan audio dalam pemain media anda menggunakan atribut 'disenyapkan' dalam

atau tag. Atribut 'disenyapkan' adalah atribut Boolean. Apabila hadir, ia menyatakan bahawa output audio video harus disenyapkan. Video atau audio dalam pemain media anda menggunakan atribut 'Preload' dalam

atau tag. Atribut 'preload' menentukan jika dan bagaimana penulis berfikir audio/video harus dimuatkan apabila halaman dimuat. Ia mempunyai tiga nilai: 'auto', 'metadata', dan 'tidak ada'. > Memainkan video atau audio di skrin penuh memerlukan API skrin penuh, yang merupakan API JavaScript. Anda boleh menggunakan kaedah 'RequestFullScreen' untuk membuat video atau elemen audio pergi penuh skrin. Kaedah ini mesti dijalankan sebagai hasil daripada tindakan pengguna, seperti acara klik.

Atas ialah kandungan terperinci Bina pemain media dengan HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!