สร้าง Flash Player [แบบ youtube] ด้วย JW Player + Wizard
อุปกรณ์ที่ต้องมีก็แค่ ftp web account ใวสำหรับเก็บ media file และ ก็หน้า page เช่น http://www.youweb.com/youfolder/ หรือจะจำลอง server เอาก็ได้ครับ ก็มีแค่นีครับ เอาละมาเริมทำกันเลย
เริ่มแรกไปโหลด flv media player http://www.jeroenwijering.com/upload/mediaplayer-3-15.zip มาก่อนครับ แตกไฟล์ออก ให้มองหาไฟล์ชื่อ mediaplayer.swf, swfobject.js , video.flv ให้อัพโหลด 3 ไฟล์นีขึ้นที่ไป web server ของคุณ
จากนันให้เข้าไปที่หน้าเว็บ wizard http://www.jeroenwijering.com/?page=wizard จะเห็นว่าจะมีหัวข้อ หมายเลขอยู่ 1 , 2 ต่อจากนี้เวลาผมอธิบาย ผมจะบอกตามหมายเลขนี้นะครับ
หมายเลข 1. ตรงนี่จะเป็นการเลือกรูปแบบว่า เป็นไฟล์แบบไหนครับ Single ,Playlist ,RTMP ,etc.
หมายเลข 2. ตรงนี่จะเป็นการ set ค่าเบื่องต้นครับ
- source : คือที่อยู่ของตัว mediaplayer.swf ท่าเราอัพโหลดขึ้นไปแล้วก็ให้ copy url ของไฟล์นีมาใส่ครับ
- height : ตรงนี้คือความสูงของ video ครับ หน้วยเป็น pixel
- width : ตรงนี้คือความกว้างของ video ครับ หน่วยเป็น pixel
- file : ตรงนี้คือที่อยู่ file ที่เราอัพโหลดขึ้นไป เช่น http://www.youweb.com/youfolder/video.flv หรือท่าเป็น rtmp ตรงนี่จะเป็นที่ระบุ part ครับ ส่วนชื่อ file จะไประบุที่ id แทน
- image : คือรูปภาพที่จะเป็นตัวอย่างก่อนที่จะเล่นครับ
- id : ตรงนี้ใช้สำหรับ RTMP ครับ
เลื่อนลงมามองหาปุ่มชื่อ update preview & code กด ที่ปุ่มนัน แล้วให้เลื่อนลงมา จะเห็น code embed ก็ให้ copy code นันไปแปบที่เว็บได้เลย หรือ อยากได้เป็น java script ก็ให้คลิกที่ get the swfobject code. ก็จะได้ javascript code ไปแปะหน้าเว็บ
ถึงตรงนี้สำหรับคนที่ไม่ต้องการทำ playlist ก็น่าจะไม่มีปัญหาแล้วนะครับ แต่สำหรับคนที่จะทำแบบ playlist ปัญหาที่จะเจอคือ ตรง file เค้าจะให้ระบุเป็น xml file ซึ่งใน xml ไฟลจะเป็นการเขียนระบุไฟล์ flv ใวในนัน แล้วเราจะเขียน xml ไฟล์นันยังไง ??? ตอนแรกผมก็งงๆ ว่าจะเขียนยังไงก็เลยไปหาอ่านดูใน forum จึงไปเจอวิธีการเขียนมาครับ อุอุ
รูปแบบจะเป็นแบบนีครับ
<?xml version='1.0' encoding='UTF-8'?>
<playlist version='1' xmlns='http://xspf.org/ns/0/'>
<trackList>
////////////////// ตรงนี้สำหรับคนที่เรียกไฟล์ตรงๆไม่ได้เล่นกับ rtmp นะครับ
<track>
<creator>Name 1</creator> <<< ตรงนี้ชื่อคุณ หรือเจ้าของไฟล์ ก็แล้วแต่
<title>Name 2</title> <<< ตรงนี่คือชื่อของไฟล์ครับ
<location>http://www.youweb.com/youfolder/video.flv</location> <<< ตรงนี้ระบุว่าไฟล์ video อยู่ที่ไหน
<image>http://www.youweb.com/youweb.gif</image> <<< ตรงนี้รูปภาพของ video ครับ
<info>http://www.youweb.com</info> <<< ข้อมูลของ video เช่นเว็บที่ไปโหลดมา
</track>
////////////////// ตรงนี้สำหรับคนที่เรียก rtmp ไฟล์
<track>
<creator>Name 1</creator> <<< ตรงนี้ชื่อคุณ หรือเจ้าของไฟล์ ก็แล้วแต่
<title>Name 2</title> <<< ตรงนี่คือชื่อของไฟล์ครับ
<location>rtmp://www.youweb.com/video/</location> <<< ตรงนี้คือ part ของ file ให้เอามาแค่ก่อนที่จะถึง _define_
<identifier>cj7</identifier> <<<< ตรงนี้คือชื่อของ file
<meta rel="type">rtmp</meta> <<< ตรงนี้ให้ใส่ใว ให้รู้ว่าเป็น rtmp
<image>http://www.youweb.com/youweb.gif</image> <<< ตรงนี้รูปภาพของ video ครับ
<info>http://www.youweb.com</info> <<< ข้อมูลของ video เช่นเว็บที่ไปโหลดมา
</track>
</trackList>
</playlist>
ก็ลองสร้างดูนะครับ ตามรูปแบบที่ให้ไปสร้างเสร็ตก็เซฟเป็น .xml แล้วอัพขึ้นไปที่ server ที่นีตอนที่เราทำแบบ playlist แล้วตรงไฟล์เรียก xml เราก็ใส่ link xml ของเราเข้าไป แล้วก็ทำตามปกติ ก็น่าจะใช้ได้แล้วครับ
จบละครับ
AIScript
