HTML source Tag

HTML source, Referensi belajar HTML <source>, Tutorial html source, Penjelasan html <source>

Tutorial HTML <source>

Element HTML source digunakan sebagai bagian dari element <picture>, <audio>, dan <video>. Element ini mengidentifikasi satu URL atau lebih sumber file media, baik itu gambar, audio ataupun video.

Dalam penulisannya element <source> wajib diletakan atau ditulis didalam element <picture>, <audio>, dan <video>, sebelum element <track> untuk audio dan audio.

Tag Kelalaian (Tag omission) : wajib memiliki tag pembuka dan tidak memiliki tag penutup. Contoh ; <source src="url.mp3"> atau <source src="url.mp3"/>

Contoh HTML <source>

<audio controls>
  <source src="guitar.mp3" type="audio/mpeg"/>
  <source src="guitar.ogg" type="audio/ogg"/>
</audio>

Attribute HTML <source>

sizes

Attribute ini menentukan ukuran tata letak file media pada kondisi tertentu. Attribute ini digunakan jika element <source> berada didalam rentang element <picture>...</picture>

Contoh :

<picture>
  <source media="(min-width: 350px)" sizes="10vw" srcset="background-html.png 100w"/>  
  <img src="html-tutorial.png"/>
</picture>

src

Attribute ini menentukan alamat sumber media untuk element <audio> dan <video>, tapi attribute ini akan diabaikan jika element <source> berada didalam element <picture>.

Contoh :

<audio controls>
  <source src="guitar.mp3" type="audio/mpeg"/>
  <source src="guitar.ogg" type="audio/ogg"/>
</audio>

<video controls>
  <source src="SampleVideo.mp4" type="video/mp4"/>
  <source src="SampleVideo.ogg" type="video/ogg"/>
</video>

value atau nilai attribute ini adalah URL

srcset

Attribute ini menentukan URL media berupa image atau gambar. Attribute ini digunakan jika element <source> berada didalam rentang element <picture>...</picture>

Contoh :

<picture>
  <source  media="(min-width: 350px)" srcset="/background-html.png"/>  
  <img alt="demo" src="/html-tutorial.png"/>
</picture>

value atau nilai attribute ini adalah URL

type

Attribute ini menentukan tipe MIME dari sumber file media. Lihat contoh

value atau nilai attribute ini adalah MIME-type

media

Attribute ini digunakan untuk membatasi ruang lingkup style sheets penggunaan file media. Attribute penggunaannya hanya jika element <source> berada didalam rentang element <picture>....</picture>, Lihat contoh.

value atau nilai attribute ini adalah media_query

Global Attributes:

Element <source> mencakup Global Attributes HTML.

Event Attributes:

Element <source> mencakup Event Attributes HTML.

Browser Support HTML <source>:

Desktop

Chrome	3
Safari	3.1
Firefox	3.5
Opera	10.5
IE	9
Edge	Yes

Mobile

Android webview	Ya
Chrome Android	Ya
Edge mobile	Ya
Firefox Android	4
IE mobile	?
Opera Android	Ya
iOS Safari	Ya

Table Info

• Nilai pada table menentukan versi minimal browser
• ? tidak diketahui

Default CSS :

Browser yang support dengan element <source>, mempunyai nilai default :

/* tidak ada */