เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์
19 October 2010ดาวน์โหลด ส่วนของไฟล์ ที่จำเป็นสำหรับใช้งานได้ที่
http://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>
ตัวอย่าง
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
10 Nov 08 ฟังก์ชัน PHP ตัดข้อความยาวด้วย wordwrap อ่าน 4329 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 5498 25 Sep 08 การกำหนด selectors ด้วย jQuery แบบลำดับขั้น ตอนที่ 1 อ่าน 4087 16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 9337 12 Sep 10 การดึง attribute และค่าต่างๆ จาก xml ไฟล์ด้วย jQuery อย่างง่าย อ่าน 3648 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4771 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 11 Sep 10 จัดรูปแบบ MapTypeControlOptions ใน Google Map อ่าน 1569 21 Jan 11 การใช้งาน Meta characters ใน Regular Expressions ของ PHP อ่าน 1540 02 Dec 10 แทรก emoticon ด้วย javascript ฟังก์ชัน ให้กับ ckeditor อ่าน 2837 06 May 10 สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย อ่าน 4790 17 Nov 09 พิมพ์ข้อมูลใน textbox เพื่อ เพิ่มรายการใน listbox ด้วย jQuery อ่าน 5386 28 Oct 08 ดึงข้อมูลจาก text ไฟล์มาแสดงด้วย ajax อ่าน 5918 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 1703 18 Oct 08 สร้างเมนูแนวตั้ง ด้วย CSS ไม่ต้องใช้ตารางอย่างง่าย อ่าน 4633 22 Oct 10 สร้าง php ฟังก์ชัน ค้นหาค่าในตัวแปร array อย่างง่าย อ่าน 1753 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3448 22 Mar 11 การกำหนด แท็ก html ในตัวแปร JavaScript อย่างง่าย อ่าน 2278 18 Mar 10 การเก็บข้อมูลวันที่ ในฐานข้อมูล กับคำสั่ง sql ในการค้นหา อ่าน 5880 13 Jul 10 วิธี load xml ไฟล์ และ แบ่งหน้า ด้วย php อย่างง่าย อ่าน 3603