Bagaimana untuk Mengubah Sumber Video secara Dinamik dalam HTML5 Sambil Mengekalkan Keserasian Penyemak Imbas?

Menukar Sumber Video dalam HTML5 Secara Dinamik

Dalam usaha mencipta pemain video universal, adalah penting untuk mempertimbangkan keserasian penyemak imbas apabila secara dinamik menukar sumber video.

The Masalah

Menggunakan berbilang teg dalam

Penyelesaian

Untuk mengatasi isu ini, adalah disyorkan untuk menggunakan satu atribut src dalam

Contoh Pelaksanaan

Kod JavaScript berikut menunjukkan proses perubahan secara dinamik sumber video menggunakan atribut src dan fungsi canPlayType():

var video = document.getElementById('video');
var source = document.createElement('source');
var supported = video.canPlayType('video/mp4');
if (supported == '' || supported == 'no') {
  supported = video.canPlayType('video/webm');
}
if (supported != '' && supported != 'no') {
  source.setAttribute('src', 'path/to/video.' + supported.replace('video/', ''));
  source.setAttribute('type', supported);
  video.appendChild(source);
  video.load();
  video.play();
} else {
  alert('Video file not supported.');
}

Pendekatan ini memudahkan proses menukar sumber, memastikan keserasian merentas pelayar dan menyediakan pengalaman main balik video yang konsisten.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Sumber Video secara Dinamik dalam HTML5 Sambil Mengekalkan Keserasian Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!