Bagaimana untuk Mengubah Sumber Video Secara Dinamik dalam HTML5 tanpa Isu Keserasian Penyemak Imbas?

Menukar Sumber Video Secara Dinamik dalam HTML5

Penerangan Masalah

Apabila cuba menukar sumber video secara dinamik dalam HTML5

Penyelesaian

Untuk mengatasi masalah ini, pertimbangkan pendekatan berikut yang menggunakan fungsi canPlayType():

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

function changeSource(newUrl) {
  // Remove existing `<source>` tags
  while (video.children.length > 0) {
    video.removeChild(video.children[0]);
  }

  // Create a new `<source>` tag with the new URL
  const source = document.createElement('source');
  source.src = newUrl;

  // Determine the appropriate MIME type using `canPlayType()`
  const mimeType = video.canPlayType('video/mp4') ? 'video/mp4' : 'video/webm';
  source.type = mimeType;

  // Append the new `<source>` tag to the video element
  video.appendChild(source);

  // Reload the video
  video.load();
  video.play();
}

Penjelasan

Penyelesaian ini melibatkan mengalih keluar teg, mencipta yang baharu dengan URL yang dikehendaki dan menentukan jenis MIME yang sesuai menggunakan canPlayType(). Sumber baharu kemudiannya dilampirkan pada elemen video dan video dimuatkan semula. Pendekatan ini berfungsi dengan berkesan dalam kedua-dua Chrome dan Firefox.

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