Bagaimana Menukar Sumber Video HTML5 Secara Dinamik Sambil Mengekalkan Keserasian Penyemak Imbas?

Pertukaran Sumber Dinamik untuk Video HTML5

Menggunakan elemen video HTML5 menyediakan penyelesaian serba boleh untuk main balik video merentas pelbagai platform. Walau bagaimanapun, menyepadukan senarai main atau menu memerlukan menukar sumber video secara dinamik. Semasa mengemas kini tag mungkin kelihatan mudah, keserasian penyemak imbas menimbulkan cabaran.

Khususnya, dalam Firefox, mengemas kini berbilang tag menggunakan kaedah load() secara tiba-tiba menamatkan pemain video. Oleh itu, pendekatan yang lebih dipercayai ialah menggunakan atribut src secara eksklusif dalam

Penyelesaian JavaScript Vanila

Untuk menukar sumber video secara dinamik, pertimbangkan coretan JavaScript vanila berikut:

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

source.setAttribute('src', 'video-url.mp4');
source.setAttribute('type', 'video/mp4');

video.appendChild(source);
video.play();

setTimeout(() => {
  video.pause();

  source.setAttribute('src', 'video-url.webm');
  source.setAttribute('type', 'video/webm');

  video.load();
  video.play();
}, 3000);

Pertimbangan Keserasian

Walaupun penyelesaian yang disediakan berfungsi dengan baik dalam Chrome, keserasian merentas penyemak imbas lain harus disahkan. Selain itu, pertimbangkan untuk memasukkan pengendalian khusus penyemak imbas untuk memastikan pengalaman pengguna yang konsisten.

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