tRikSonic

HTML source Tag

Terakhir diperbarui : 22 Mei 2018 - 06.40
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.
HTML source>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

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

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu audio sedang dimuat.
</p>

</body>
</html>

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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>img {max-width :100%}</style>
</head>
<body>

<picture>
  <source  
  media="(min-width: 350px)" 
  sizes="10vw"
  srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRARs1wOnDpQLFj_VLECQkmDCTY0IS3VsXDjrElcCWoXyYEijr1By0ZicKUW1VdeJLstSrbitDwFIFdphkPlGQn1svNdrCE8OP-o7elGdupPrQpZr6uXBHOx4M6xR4nJLRRZbhzoCXeqcf/s640/background-html.png 100w"/>  
  <img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png"/>
</picture>

<hr>

<picture>
  <source  
  media="(min-width: 350px)" 
  srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRARs1wOnDpQLFj_VLECQkmDCTY0IS3VsXDjrElcCWoXyYEijr1By0ZicKUW1VdeJLstSrbitDwFIFdphkPlGQn1svNdrCE8OP-o7elGdupPrQpZr6uXBHOx4M6xR4nJLRRZbhzoCXeqcf/s640/background-html.png"/>
  <img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png"/>
</picture>

Perlebar dan perkecil area preview untuk melihat fungsinya.<br>
Dan perhatikan perbedaan kedua contoh diatas

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<base href='https://sites.google.com/site/triksonicsites/media/' target='_blank'/>
</head>
<body>

<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>

<p>
 Pastikan koneksi anda stabil.<br>
 Silahkan tunggu data media sedang dimuat.
</p>

</body>
</html>
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>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
img {
  max-width :100%
}
</style>
</head>
<body>

<picture>
  <source  media="(min-width: 350px)" srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRARs1wOnDpQLFj_VLECQkmDCTY0IS3VsXDjrElcCWoXyYEijr1By0ZicKUW1VdeJLstSrbitDwFIFdphkPlGQn1svNdrCE8OP-o7elGdupPrQpZr6uXBHOx4M6xR4nJLRRZbhzoCXeqcf/s640/background-html.png"/>  
  <img alt="demo" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3NfFfRFXQHo-hYdFip5dpO0I9mFLjJMPH-i4x5ex_0btub9z4iULzxQ1ybibwvBS8uUsI309Pas_KNlX_8RTzPc5Pmi4dLQOrl6ZdED6GCRrg_r2Nw6xnWmLXyBxSsmOZksC5zPqxpPID/s1600/html-tutorial.png"/>
</picture>

<p>
 Gambar akan berbeda jika pada lebar 350px kebawah
</p>

</body>
</html>
type
Attribute ini menentukan tipe MIME dari sumber file media. Lihat contoh
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.

Global Attributes:

Element <source> mencakup Global Attributes HTML.

Event Attributes:

Element <source> mencakup Event Attributes HTML.

Browser Support HTML <source>:

Desktop
Chrome3
Safari3.1
Firefox3.5
Opera10.5
IE9
EdgeYes
Mobile
Android webviewYa
Chrome AndroidYa
Edge mobileYa
Firefox Android4
IE mobile?
Opera AndroidYa
iOS SafariYa
Table Info
  • Nilai pada table menentukan versi minimal browser
  • ? tidak diketahui

Default CSS :

Browser yang support dengan element <source>, mempunyai nilai default :
/* tidak ada */
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.