PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์

19 October 2010 By
plugin video jquery jwplayer

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ plugin video jquery jwplayer



ดาวน์โหลด ส่วนของไฟล์ ที่จำเป็นสำหรับใช้งานได้ที่
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>

ตัวอย่าง







Tags:: jquery plugin video jwplayer






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง