Untuk mengawal penampilan tag dalam HTML, kaedah teras adalah menggunakan atribut HTML dengan gaya CSS. 1. Gunakan sifat terbina dalam seperti kawalan, autoplay, gelung, diredam dan poster untuk mencapai kawalan fungsi asas; 2. Laraskan saiz, sempadan, bayang -bayang dan susun atur responsif pemain video melalui CSS untuk memadankan gaya reka bentuk laman web; 3. Jika anda perlu menyesuaikan antara muka sepenuhnya, anda boleh mengeluarkan kawalan lalai dan membina komponen UI sendiri; 4. Gunakan teknik reka bentuk responsif untuk memastikan video itu dipaparkan dengan baik pada peranti yang berbeza, seperti menetapkan bekas dengan nisbah aspek 16: 9 untuk mengelakkan ubah bentuk.

Apabila anda ingin mengawal penampilan tag HTML <video></video> , kebanyakannya mengenai menggabungkan atribut HTML dengan gaya CSS. Pandangan lalai pemain video boleh berbeza -beza di seluruh pelayar, jadi jika anda mensasarkan konsistensi atau reka bentuk tersuai, anda perlu melakukan lebih daripada hanya menggunakan tag asas.

Gunakan atribut terbina dalam untuk kawalan asas

Tag <video></video> dilengkapi dengan beberapa atribut terbina dalam yang membolehkan anda mengawal main balik dan paparan tanpa sebarang kod tambahan:

• controls - Menambah Kawalan Lalai, Jeda, Jilid, dan Kawalan Garis Masa Pelayar
• autoplay - Mula Memainkan Video Secara Automatik (Boleh Disekat oleh Penyemak Imbas)
• loop - Membuat video dimainkan ketika berakhir
• muted - Memulakan video tanpa suara
• poster - Menetapkan gambar untuk dipaparkan sebelum video dimainkan

Ini berguna untuk persediaan cepat, terutamanya jika anda tidak memerlukan rupa tersuai. Tetapi perlu diingat, mereka tidak akan mengubah gaya visual - hanya fungsi.

Sesuaikan penampilan dengan CSS

Untuk membuat video anda bercampur ke dalam reka bentuk laman web anda, anda perlu memohon CSS. Anda boleh menyesuaikan saiz, sempadan, bayang -bayang, dan juga respons:

 .video-pembungkus {
  Max-Width: 100%;
  Margin: Auto;
  Sempadan: 2px pepejal #ccc;
  Radius sempadan: 8px;
  kotak bayang-bayang: 0 4px 12px rgba (0, 0, 0, 0.1);
}

Anda boleh membungkus video anda di dalam bekas dan menargetkan elemen <video> secara langsung juga:

 <div class = "Video-Wrapper">
  <video src = "myVideo.mp4" class = "custom-video" Controls> </video>
</div>

Kemudian gaya:

 .CUSTOM-VIDEO {
  Lebar: 100%;
  ketinggian: auto;
  Radius sempadan: 8px;
}

Jika anda ingin menyembunyikan kawalan lalai dan membina UI anda sendiri (seperti butang), anda akan mengeluarkan atribut controls dan menambah butang anda sendiri dengan pengendali acara JavaScript untuk bermain/jeda, kelantangan, dll.

Petua Reka Bentuk Responsif

Video harus mengubah saiz dengan baik pada saiz skrin yang berbeza. Beberapa petua untuk memastikan bahawa:

• Tetapkan width: 100% dan height: auto jadi skala dalam bekasnya
• Balut video di Div dengan Trik Padding-Bottom untuk Mengekalkan Nisbah Aspek
• Gunakan pertanyaan media untuk susun atur tweak pada titik putus yang berbeza

Berikut adalah cara biasa untuk mengekalkan nisbah aspek 16: 9:

 <div class = "Video-Container">
  <VIDEO SRC = "MYVIDE.MP4" Kawalan> </video>
</div>

Dengan CSS ini:

 .video-container {
  Kedudukan: Relatif;
  Lebar: 100%;
  Padding-Bottom: 56.25%; / * 16: 9 */
  Limpahan: Tersembunyi;
}

. Video-Container Video {
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Lebar: 100%;
  Ketinggian: 100%;
}

Ini menjadikan video kelihatan baik di mudah alih dan desktop tanpa herotan.

Pada dasarnya itu sahaja. Sama ada anda tweaking butiran kecil atau membina pemain tersuai penuh, menggabungkan atribut HTML dan CSS memberi anda kawalan yang kukuh ke atas bagaimana video anda muncul kepada pengguna.

Atas ialah kandungan terperinci Bagaimanakah anda mengawal penampilan dan tag HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!