สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน
20 October 2010ตัวอย่างต่อไปนี้ เป็นแนวทาง การสร้าง xml playlist ของ jwplayer โดยในที่นี้จะใช้ ไฟล์ video จาก youtube เป็นตัวอย่าง
สามารถประยุกต์ใช้กับไฟล์ flv video โดยตรงได้
เนื้อหาต่อเนื่องจาก
เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์
http://www.ninenik.com/เริ่มต้นการใช้งาน_jwplayer_jquery_plugin_แสดง_video_บนเว็บไซต์-361.html
ตัวอย่าง
เริ่มต้น (เนื้อหาต่อเนื่องจากลิ้งค์ด้านบน)
1.สร้างโฟลเดอร์สำหรับเก็บไฟล์สร้าง xml playlist file ในที่นี้กำหนดเป็น playlist
2.สร้าง ไฟล์ php เพื่อสร้าง xml playlist file ชื่อ playlist_gen.php ไว้ในโฟลเดอร์ตามข้อ 1 ดังนี้
<?php
header("Content-type:text/xml; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<?php
// กำหนด array url ของ youtube video ตามต้องการ
$youtube_url=array(
"1"=>"http://www.youtube.com/watch?v=omT-gz7WfAE",
"2"=>"http://www.youtube.com/watch?v=lhTAyG-m5PA",
"3"=>"http://www.youtube.com/watch?v=IBTE-RoMsvw",
"4"=>"http://www.youtube.com/watch?v=MtMgeljfJkw",
"5"=>"http://www.youtube.com/watch?v=ona0FqJ_Rws"
);
?>
<rss version="2.0"
xmlns:media="http://search.yahoo.com/mrss/"
xmlns:jwplayer="http://developer.longtailvideo.com/trac/wiki/FlashFormats">
<channel>
<title>RSS playlist</title>
<?php
if(count($youtube_url)>0){
foreach($youtube_url as $key=>$value){ // วนลูปสร้าง รายการ playlist
$youtubeID=explode("=",$value);
$youtubeID=array_pop($youtubeID);// youtube_ID
$tags = get_meta_tags($value); // ดึงค่า title video จาก meta tags
?>
<item>
<title><?=$tags['title']?></title>
<link><?=$value?></link>
<description><?=$tags['description']?></description>
<media:group>
<media:content url="<?=$value?>" />
<media:thumbnail url="http://img.youtube.com/vi/<?=trim($youtubeID)?>/hqdefault.jpg" />
</media:group>
</item>
<?php
}
}
?>
</channel>
</rss>
3.กำหนดและเรียกใช้งาน ตัวอย่างไฟล์ jwplayer_youtube_playlist.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 playlist 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
width: 400, // กำหนดความกว้าง หน่วย pixels
height: 520, // กำหนดความสูง หน่วย pixels (ความสูงส่วน video + playlist)
playlist:'bottom', // ตำแหน่งของ playlist bottom | top | left | right
playlistsize:200, // ขนาดของ playlist ถ้าอยู่ในแนวตั้งคือความสูง ถ้าแนวนอนคือความกว้าง
playlistfile:'playlist/playlist_gen.php', // ระบุ path ของ xml playlist file
skin:'http://w.longtailvideo.com/skins/bekle.zip' // กำหนด skin
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Sep 08 รู้จักฟังก์ชันสำหรับการ random อ่าน 2902 22 Sep 10 ทบทวน การจัดการกับ ตัวแปร array ใน javascript ด้วย ฟังก์ชัน ตอนที่ 2 อ่าน 1723 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 4644 05 Oct 10 สร้าง login logout และกำหนด permission ของ facebook ด้วย php sdk อ่าน 7706 11 Sep 10 จัดรูปแบบ MapTypeControlOptions ใน Google Map อ่าน 1569 17 Mar 09 ง่ายๆ กับการส่งค่าตัวแปร PHP ไปใช้ใน Javascript อ่าน 7504 14 Sep 10 การดึงข้อมูล จากฐานข้อมูล สร้าง xml ไฟล์ ด้วย php อ่าน 5484 26 Aug 10 ใช้ comments.get เรียกและ บันทึก facebook comment ล่าสุด ลงฐานข้อมูล ด้วย jQuery อ่าน 2806 03 Nov 10 การเพิ่ม ลบ แก้ไข แบ่งหน้า ข้อมูล ด้วย jquery ajax อย่างง่าย อ่าน 7029 26 Feb 09 สร้างแบบฟอร์มค้นหาข้อมูลในเว็บไซต์ ด้วย Google อ่าน 4015 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 7130 11 Sep 10 กำหนด แก้ไข เปลี่ยนแปลง รูปแบบ ประเภท ของ แผนที่ map types ใน google map อ่าน 2436 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 2589 16 Aug 09 jQuery UI คือ อะไร อ่าน 4968 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 3816 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 6609 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 5349 29 Oct 08 สร้างปุ่มแบ่งหน้าให้ดูดีด้วย css อย่างง่าย อ่าน 7118 20 Aug 10 การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog อ่าน 6032 10 Sep 10 การแสดง ข้อมูลใน infowindows ของ google map ด้วย ajax ใน jQuery อ่าน 4074