PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

20 October 2010 By


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

 


Tags:: jquery xml video playlist plugin jwplayer





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