Tanda <source> HTML

Definisi dan penggunaan

<source> Tag digunakan untuk elemen media (seperti <video>,<audio> dan <picture>） untuk menyatakan beberapa sumber media.

<source> Tag memungkinkan anda untuk menentukan fail video/audio/imej cadangan, yang browser akan memilih yang disokong atau lebar viewport. <source>。

Lihat juga:

Panduan HTML:HTML 视频

Panduan HTML:HTML 音频

Panduan HTML DOM:Objek Sumber

Contoh

Contoh 1

Ini adalah pemutar audio dengan dua fail sumber audio. Browser akan memilih yang pertama yang disokong. <source>:

<audio controls>
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Browser anda tidak mendukung tag audio.
</audio>

Cuba sendiri

Contoh 2

Penggunaan dalam <video> <source> Mainkan video:

<video width="640" height="400" controls>
  <source src="shanghai.mp4" type="video/mp4">
  <source src="shanghai.ogg" type="video/ogg">
  Browser anda tidak mendukung tag video.
</video>

Cuba sendiri

Contoh 3

Dalam <picture> penggunaan <source> Menggunakan <picture> untuk menentukan imej berbeza berdasarkan lebar viewport:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Cuba sendiri

Attribute

Attribute Value Description
media Kawalan media Menerima setiap kawalan media yang sah, biasanya diatur di CSS.
sizes Tentukan saiz imej untuk berbagai tata letak halaman.
src URL

Dipergunakan untuk menentukan URL fail media.

Sertaikan <source> untuk <audio> dan <video>, properti ini adalah wajib.
srcset URL

用于指定在不同情况下使用的图像的 URL。

当 <source> 用于 <picture> 时，此属性是必需的。
type MIME 类型 规定资源的 MIME 类型。

全局属性

<source> 标签还支持 HTML 中的全局属性。

事件属性

<source> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

无。

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.5 4.0 10.5