สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน

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

jwplayer jquery xml video playlist plugin

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

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

ตัวอย่างต่อไปนี้ เป็นแนวทาง การสร้าง 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>

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