Kerugian dari embedding pemain di halaman adalah bahwa file tersebut akan mulai memuat setiap kali Anda membuka atau me-refresh halaman: dan jika Anda memiliki beberapa dari mereka akan membuat halaman mengkonsumsi bandwidth yang cukup besar untuk audio Anda mungkin tidak benar-benar ingin bermain.
Sebuah solusi yang lebih baik adalah untuk menciptakan link yang akan membuka jendela pop-up kecil yang berisi pemain (ini tidak akan diblokir oleh pop-up blocker secara teknis itu tidak benar-benar pop-up tetapi hanya sebuah jendela baru dengan ukuran contrained) .
Klik di sini untuk contoh seperti pemain . Ini akan membuka halaman ke ukuran yang telah ditentukan, yang berisi pemain tertanam dan juga tombol 'jendela dekat' dan gambar opsional. Klik di sini untuk contoh halaman menggunakan teknik ini daripada embedding (terbuka di jendela baru : menutupnya untuk kembali ke sini) - klik salah satu 'Play' tombol untuk melihat pemain beraksi.
Ini adalah kode playernya:
<a href="javascript:void(0)" onclick="window.open('URL OF THE PLAYER PAGE',
'newWin','width=412,height=416')">Text of the link</a>.
Lebar dan tinggi menentukan ukuran jendela baru dalam pixel, dan jelas Anda harus mengubah ini agar sesuai dengan ukuran pemain dan gambar. Perhatikan bahwa tidak boleh ada jeda baris dalam kode.
Sekarang Anda perlu membuat halaman player. Ketika dibuka dengan sendirinya ini akan menjadi halaman berukuran penuh (klik di sini untuk melihat halaman pemain di atas dalam ukuran penuh), dan akan memiliki tombol close, gambar jika Anda menggunakan salah satu, dan pemain terpusat. Lebar pemain harus ditetapkan ke sama dengan lebar gambar, dan tinggi 16.
Sebelum melanjutkan Anda perlu menginstal file javascript sebagaimana tercantum dalam halaman 'embedding' : Anda dapat men-download file di sini , dan Anda dapat menempatkannya di mana saja pada server Anda dan membuat catatan dari URL-nya.
Sekarang di sini adalah kode untuk halaman playenya:
_____________________________________________________________
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><title>TITLE OF THE PAGE</title>
<script src="URL OF THE QTOBJECT.JS FILE" language="JavaScript" type="text/javascript"></script></head>
<body style="background-color: rgb(256, 256, 256);">
<p>
</p><form action="" method="post">
<center><input name="Button" value="Close Window" onclick="self.close()" type="button"></center>
</form>
<div style="text-align: center;"><img style="width: 400px; height: 400px;" alt="" src="URL OF AN IMAGE"></div>
<center>
<script type="text/javascript">
// <![CDATA[
// create the qtobject and write it to the page, this includes plugin detection
// be sure to add 15px to the height to allow for the controls
var myQTObject = new QTObject("URL OF THE MP3 FILE", "NAME", "400", "16");
myQTObject.addParam("autostart", "true");
myQTObject.write();
// ]]>
</script></center>
<p></p>
<noscript><p><center>You
must enable Javascript to
access this content.</center></p>
</noscript>
</body></html>
_________________________________________________________________<html><head><meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type"><title>TITLE OF THE PAGE</title>
<script src="URL OF THE QTOBJECT.JS FILE" language="JavaScript" type="text/javascript"></script></head>
<body style="background-color: rgb(256, 256, 256);">
<p>
</p><form action="" method="post">
<center><input name="Button" value="Close Window" onclick="self.close()" type="button"></center>
</form>
<div style="text-align: center;"><img style="width: 400px; height: 400px;" alt="" src="URL OF AN IMAGE"></div>
<center>
<script type="text/javascript">
// <![CDATA[
// create the qtobject and write it to the page, this includes plugin detection
// be sure to add 15px to the height to allow for the controls
var myQTObject = new QTObject("URL OF THE MP3 FILE", "NAME", "400", "16");
myQTObject.addParam("autostart", "true");
myQTObject.write();
// ]]>
</script></center>
<p></p>
<noscript><p><center>You
must enable Javascript to
access this content.</center></p>
</noscript>
</body></html>
Bagian Anda perlu mengubah ditandai dengan warna merah. Judul akan muncul di bagian atas halaman browser (pastikan itu tidak terlalu lama seperti jendela akan relatif kecil). URL dari file 'qtobject.js' tergantung di mana Anda menempatkannya. 'Gaya img' tag harus menunjukkan lebar dan tinggi dari gambar yang sebenarnya telah Anda pilih, dan jelas URL URL-nya Anda dapat menghilangkan baris ini jika Anda tidak ingin gambar. Tubuh latar belakang disetel ke putih di sini, tapi jelas Anda dapat mengubahnya sesuai selera, atau menggunakan gambar dengan cara yang biasa.
File bagian MP3, dalam kurung berikut 'QTobject baru', menunjukkan URL dari file, nama (yang bisa apa saja karena tidak menampilkan), dan lebar dan tinggi.Lebar harus sama dengan gambar jika Anda memiliki satu, jika tidak apa pun yang Anda pilih; ketinggian sebaiknya diserahkan pada 16.
Salin kode diubah ini ke dalam dokumen teks biasa dan simpan sebagai file html (jika Anda menggunakan TextEdit pastikan itu berakhir html, bukan .html.txt);meng-upload ke server Anda.
Dalam halaman web utama Anda, masukkan kode seperti yang saya kutip di atas, antara <p> atau <center> tag:
<a href="javascript:void(0)" onclick="window.open('URL OF THE PLAYER PAGE',
'newWin','width=353,height=346')">Text of the link</a>.
Lebar dan tinggi perlu diatur untuk sedikit lebih lebar daripada gambar atau pemain di halaman player, dan ketinggian yang cukup untuk menyertakan tombol 'dekat', gambar dan pemain.
Sekarang bukan pemain tertanam dalam halaman web Anda, Anda memiliki link (yang juga tentu saja dapat menjadi gambar seperti tombol) yang akan membuka jendela baru yang lebih kecil dengan pemain, yang akan mulai bermain secara otomatis. Safari tidak akan menampilkan address bar, tapi FireFox akan.
Perhatikan bahwa di Safari pada iPad link akan membuka pemain sebagai halaman yang sama sekali baru (karena tidak dapat menangani dua halaman terbuka sekaligus), dan akan tampilannya keluar untuk mengisi lebar layar (jadi jika Anda telah menggunakan gambar seperti label rekaman itu dapat diperbesar dengan efek konsekuen pada kualitas). Tombol 'dekat' akan kembali ke halaman sebelumnya.
ConversionConversion EmoticonEmoticon