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

(1/1)

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

Credit : www.ninenik.com/เริ่มต้นการใช้งาน_jwplayer_jquery_plugin_แสดง_video_บนเว็บไซต์-361.html

Nathan_bc:
บางคนอาจเคยใช้ jwplayer มาแล้ว และหลายคนอาจจะยังไม่เคยใช้งาน
การใช้งาน jwplayer โดยทั่วไปเราสามารถใช้งานได้อย่างง่ายดายด้วย ตัวช่วยสร้าง jwplayer

เข้าไปทดลองใช้ตัวช่วย สร้าง jwplayer สำหรับเล่น video บนเว็บ ได้ที่
http://www.longtailvideo.com/support/jw-player-setup-wizard

สำหรัรบใครที่สนใจ การใช้งาน jQuery jwplayer plugin สามารถเข้าไปดูตัวอย่าง และวิธีการใช้งานได้ที่
http://kcivey.github.com/jquery.jwplayer/

นำร่อง

[0] ดัชนีข้อความ

ตอบ