Cara membuat senarai main video responsif menggunakan HTML, CSS dan jQuery

Cara membuat senarai main video responsif menggunakan HTML, CSS dan jQuery

Dalam era digital hari ini, main balik video telah menjadi bahagian penting dalam kehidupan orang ramai. Sama ada anda seorang pereka web atau pembangun, anda semua mahu dapat mencipta senarai main video responsif yang cantik dan berfungsi sepenuhnya. Artikel ini menerangkan cara menggunakan HTML, CSS dan jQuery untuk mencapai matlamat ini dan menyediakan contoh kod yang sepadan.

Struktur HTML
Pertama, kita perlu mencipta struktur HTML asas yang akan menyimpan senarai main video. Berikut ialah contoh mudah:

<div class="video-list">
  <div class="video-item">
    <div class="video-thumb">
      <img src="/static/imghw/default1.png"  data-src="video-thumbnail.jpg"  class="lazy" alt="Video Thumbnail">
    </div>
    <div class="video-info">
      <h3 id="Video-Title">Video Title</h3>
      <p class="video-description">Video description</p>
    </div>
  </div>
  
  <!-- 在这里添加更多视频项 -->
  
</div>

Gaya CSS
Seterusnya, kita perlu menambah beberapa gaya CSS untuk menjadikan senarai main video menarik. Berikut ialah contoh mudah:

.video-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 20px;
}

.video-item {
  background-color: #f5f5f5;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.video-thumb img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.video-title {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.video-description {
  margin-top: 5px;
  font-size: 14px;
  color: #999;
}

Kod di atas menggunakan reka letak grid CSS dan beberapa penggayaan asas untuk mencipta senarai main video yang bagus dan kemas.

Skrip jQuery
Akhir sekali, kita perlu menggunakan jQuery untuk menambah beberapa interaktiviti dan fungsi. Berikut ialah contoh mudah:

$(document).ready(function() {
  $(".video-item").click(function() {
    var videoUrl = $(this).data("video-url");
    $("#video-player").attr("src", videoUrl);
    
    $(".video-item").removeClass("active");
    $(this).addClass("active");
  });
});

Kod di atas akan menambah pendengar acara yang apabila pengguna mengklik pada item video, mengemas kini URL pemain video dan menyerlahkan item video yang dipilih.

Ringkasan
Dengan menggunakan HTML, CSS dan jQuery, kami boleh mencipta senarai main video responsif yang cantik dan berfungsi sepenuhnya dengan mudah. Kami hanya perlu mengikut struktur HTML yang disebutkan di atas, gaya CSS dan skrip jQuery, dan kemudian membuat pengubahsuaian dan penyesuaian yang diperlukan mengikut situasi sebenar. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara membuat senarai main video responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!