ดาวน์โหลด ส่วนของไฟล์ ที่จำเป็นสำหรับใช้งานได้ที่
https://www.ninenik.com/download/jwplayer.rar
แตกไฟล์ แล้วก็อบปี้โฟลเดอร์ jwplayer ไว้ใช้งาน
สร้างไฟล์สำหรับทดสอบ ในที่นี้จะแสดงการใช้งาน 2 ตัวอย่าง คือการ
1.เรียกใช้งาน video จาก youtube jwplayer_youtube.php
2.เรียกใช้งานไฟล์ flv video โดยตรง jwplayer_flv.php
ตัวอย่างโค้ดพร้อมคำอธิบาย jwplayer_youtube.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เรียกใช้งาน video จาก youtube jwplayer_youtube.php</title>
</head>
<body>
<!--กำหนด div สำหรับแสดง video-->
<div id="player1"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jwplayer/jquery.swfobject.js"></script>
<script type="text/javascript" src="jwplayer/jquery.jwplayer.min.js"></script>
<script type="text/javascript">
$(function(){
$('#player1').jwPlayer({ // กำหนดให้ video แสดงใน div ที่มี id=player1
swf: 'jwplayer/player.swf', // กำหนด path ของไฟล์ player
file: 'http://www.youtube.com/watch?v=lhTAyG-m5PA', //url ของ video บน youtube
image: 'http://img.youtube.com/vi/lhTAyG-m5PA/hqdefault.jpg',// รูปภาพแสดงก่อนทำการเล่น video
width: 400, // กำหนดความกว้าง หน่วย pixels
height: 320, // กำหนดความสูง หน่วย pixels
skin:'http://w.longtailvideo.com/skins/bekle.zip' // กำหนด skin
});
// การกำหนด thumbnail รูปภาพของ video ใน youtube สามารถ กำหนดได้ตามรูปแบบต่อไปนี้
// http://img.youtube.com/vi/YOUTUBE_ID/default.jpg // รูปขนาดเล็ก
// http://img.youtube.com/vi/YOUTUBE_ID/hqdefault.jpg // รูปขนาดใหญ่
//
// ตัวอย่าง youtube url video
// http://www.youtube.com/watch?v=lhTAyG-m5PA
// จะได้ YOUTUBE_ID คือ lhTAyG-m5PA
//
// หากต้องการ รูปขนาดเล็กกำหนดเป็น
// http://img.youtube.com/vi/lhTAyG-m5PA/default.jpg // รูปขนาดเล็ก
// หากต้องการรูปขนาดใหญ่กำหนดเป็น
// http://img.youtube.com/vi/lhTAyG-m5PA/hqdefault.jpg // รูปขนาดใหญ่
});
</script>
</body>
</html>
การใช้งาน video จาก youtube มีข้อดีคือ เราสามารถสร้าง account ใน youtube และอัพโหลด
ไฟล์ video ที่ youtube โดยตรง ทำให้ไม่ต้องเสียพื้นที่ในการจัดเก็บไฟล์ video และไม่ต้องเสีย bandwidth
ในส่วนของการใช้งาน video ไปในตัวด้วย
ตัวอย่าง
ตัวอย่างโค้ดพร้อมคำอธิบาย jwplayer_flv.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>เรียกใช้งานไฟล์ flv video โดยตรง </title>
</head>
<body>
<!--กำหนด div สำหรับแสดง video-->
<div id="player2"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jwplayer/jquery.swfobject.js"></script>
<script type="text/javascript" src="jwplayer/jquery.jwplayer.min.js"></script>
<script type="text/javascript">
$(function(){
$('#player2').jwPlayer({ // กำหนดให้ video แสดงใน div ที่มี id=player2
swf: 'jwplayer/player.swf', // กำหนด path ของไฟล์ player
file: 'http://kcivey.github.com/jquery.jwplayer/video.flv', //url ของไฟล์ flv video
image: 'http://kcivey.github.com/jquery.jwplayer/preview.jpg',// รูปภาพแสดงก่อนทำการเล่น video
width: 400, // กำหนดความกว้าง หน่วย pixels
height: 320, // กำหนดความสูง หน่วย pixels
skin:'http://w.longtailvideo.com/skins/bekle.zip' // กำหนด skin
});
// file url ของไฟล์ flv video กำหนด path แบบ relative หรือ abusolute ก็ได้
});
</script>
</body>
</html>
ตัวอย่าง
