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>
<!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
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 */