Bagaimana untuk Mengubah Sumber Teg Video HTML5 Secara Dinamik?

Menukar Sumber Teg Video HTML5: Penyelesaian Komprehensif

Mencipta pemain video universal memerlukan menangani isu menukar sumber secara dinamik daripada video tersebut. Ini membolehkan pengguna bertukar antara video dalam senarai main. Manakala pendekatan sebelumnya menggunakan pelbagai tag telah menghadapi had, artikel ini membentangkan kaedah yang boleh dipercayai menggunakan satu atribut.

Mengenalpasti Jenis Fail Menggunakan canPlayType():

Untuk menentukan jenis fail yang sesuai untuk video, kami boleh menggunakan fungsi canPlayType(). Fungsi ini mengembalikan rentetan yang menunjukkan tahap sokongan penyemak imbas untuk jenis media tertentu. Contohnya:

var canPlayMP4 = video.canPlayType('video/mp4');
var canPlayWebM = video.canPlayType('video/webm');

Berdasarkan keputusan canPlayType(), kita boleh menetapkan atribut src bagi

Pelaksanaan Menggunakan JavaScript Vanila:

Berikut ialah coretan kod yang menunjukkan cara menukar sumber video menggunakan JavaScript vanila:

var video = document.getElementById('video');

// Create a new source element
var source = document.createElement('source');

// Set the source attributes dynamically based on browser support
if (canPlayMP4) {
  source.setAttribute('src', 'video.mp4');
  source.setAttribute('type', 'video/mp4');
} else if (canPlayWebM) {
  source.setAttribute('src', 'video.webm');
  source.setAttribute('type', 'video/webm');
}

// Append the source to the video element
video.appendChild(source);

// Play the video
video.play();

Pendekatan ini membolehkan penukaran sumber dinamik tanpa kelemahan menggunakan berbilang tag. Ia juga memastikan bahawa video akan dimainkan dalam format yang paling sesuai yang disokong oleh penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Sumber Teg Video HTML5 Secara Dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!