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>
sizesAttribute 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>srcAttribute 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>
srcsetAttribute 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>typeAttribute ini menentukan tipe MIME dari sumber file media. Lihat contoh
mediaAttribute 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 */