2. Concept of Streaming
Video

3. Streaming Video
● เป็ นการเล่นวิดโอแบบต่อเนื่ อง
ี
● ไม่จำาเป็ นต้องโหลดมาที่เครื่องก่อนเล่น
● เลื่อนไปเล่นตำาแหน่ งไหนก็ได้ทันที

4. การติดตั้ง RED5

5. การติดตั้ง RED5
● สิ่งจำาเป็ น
● JDK 6.0
● RED5 binary ที่รวม Tomcat มาแล้ว
● เครื่องมือในการพัฒนาเช่น Eclipse
● เครื่องมือในการพัฒนา Flash

6. โครงสร้างคร่าวๆของ
RED5

7. โครงสร้างของ RED5
● An Open Source Flash Media Server
● Built on Java (Mina & Spring)
● Use RTMP (Real Time Messaging Protocol)
● Streaming Audio/Video (FLV and MP3)
● Recording Client Streams (FLV only)
● Shared Objects
● Live Stream Publishing
● Remoting (AMF)
● Multi-User Environments

8. ตัวอย่าง Demo
Application

9. การสร้าง Application
บน RED5

10. โครงสร้าง Directory
● Webapps
● Application Name
– WEB-INF (contains configuration files & classes)
– src
– lib
– classes
web.xml
red5-web.xml
red5-web.properties

11. โครงสร้าง Directory
● WEB-INF
● src (contains all .java, .js, .py, .rb file used to build
your app.)
● lib (contains all jar files required)
● classes (contains the compiled class files from the
src directory)
web.xml (this is the main configuration file for your
app)

12. สร้างส่วน Streaming
Server

13. สร้างโครงสร้าง Application
● สร้างโครงสร้าง application ตามรูปแบบ
directory
● สร้าง directory streams เพื่อเก็บไฟล์ video ต่างๆ
ที่เราจะใช้ streaming
● คอนฟิ คค่า application

14. สร้างส่วน Client

15. FlowPlayer
● FlowPlayer เป็ น video player ที่ทำาตัวเป็ น client
ซึ่งทำาหน้าที่เล่นไฟล์ video แบบต่างๆบนเว็บให้
เรา
● เล่นได้ท้งแบบ ธรรมดา และ streaming ผ่าน
ั
โปรโตคอล rtmp

16. สร้าง FlowPlayer ให้เล่น video จาก
streaming server
● โหลด flowplayer
● โหลด flowplayer rtmp flugin
● สร้าง tag a เพื่อให้เป็ นตำาแหน่ งสำาหรับ player มา
แทรกไว้

17. โค้ด script สำาหรับ FlowPlayer
<a class="player" id="fms">
<img src="http://static.flowplayer.org/img/player/btn/showme.png" />
</a>
<script>
$f("fms", "../flowplayer-3.2.2.swf", {
clip: {
url: 'avatar-vp6',
provider: 'streamingserver'
},
plugins: {
streamingserver: {
url: 'flowplayer.rtmp-3.2.1.swf',
netConnectionUrl: 'rtmp://192.168.1.34/myserver'
}
}
});
</script>

18. โค้ดเล่นไฟล์ mp3
<a class="player" id="fms">
<img src="http://static.flowplayer.org/img/player/btn/showme.png" />
</a>
<script>
$f("fms", "../flowplayer-3.2.2.swf", {
clip: {
url: 'mp3:audio.mp3',
provider: 'streamingserver'
},
plugins: {
streamingserver: {
url: 'flowplayer.rtmp-3.2.1.swf',
netConnectionUrl: 'rtmp://192.168.1.34/myserver'
}
}
});
</script>

19. โค้ดเล่นไฟล์ mp4
<a class="player" id="fms">
<img src="http://static.flowplayer.org/img/player/btn/showme.png" />
</a>
<script>
$f("fms", "../flowplayer-3.2.2.swf", {
clip: {
url: 'mp4:audio.mp4',
provider: 'streamingserver'
},
plugins: {
streamingserver: {
url: 'flowplayer.rtmp-3.2.1.swf',
netConnectionUrl: 'rtmp://192.168.1.34/myserver'
}
}
});
</script>

20. เล่นหลายๆ stream
<a class="player" id="fms">
<img src="http://static.flowplayer.org/img/player/btn/showme.png" />
</a>
<script>
$f("fms", "../flowplayer-3.2.2.swf", {
clip: {
streams: [
{ url: 'metacafe', duration: 10 },
{ url: 'honda_accord', start: 2, duration: 10 },
{ url: 'metacafe', start: 10, duration: 10 },
{ url: 'honda_accord', start: 10, duration: 10 },
{ url: 'metacafe', start: 20, duration: 10 },
{ url: 'honda_accord', start: 20, duration: 10 },
{ url: 'metacafe', start: 30, duration: 10 },
{ url: 'honda_accord', start: 30, duration: 10 }
],
provider: 'streamingserver'
},
// plugins config ................................................................
</script>