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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
video jquery jwplayer plugin

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

ดูแล้ว 34,275 ครั้ง




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

ตัวอย่าง



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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ