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

19 October 2010 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

jwplayer video jquery plugin

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

ดูแล้ว 35,202 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

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