- Messages
- 514
- Reaction score
- 0
- Points
- 26
Mas maganda kapag ang website mo mismo ang nag-hohost ng ng mga video kaysa mag-eembed ka mula sa YouTube. Para magawa ito, ang gagamitin natin ay "Flowplayer". Flash-based siya at sinusuportahan niya ang 2 format: Flash Video (.*flv) at H.264 (*.mp4). I recommend na ito ang mga file format na gagamitin niyo kapag mag-sasave kayo ng video kasi magiging maganda ang quality. Pero kapag hindi mo na makita ang source file at kailangan mo siyang i-convert sa mga format na ito, gamitin mo ang Any Video Converter (http://www.any-video-converter.com/products/for_video_free). Kapag ang mga video mo ay nasa mga nasabing format na puwede mo na siyang i-upload sa website mo via FTP client.
INSTALLATION
Para ma-install ang player na ito, i-download ang Flowplayer mula sa http://www.flowplayer.org at i-upload ang mga file nito sa iyong website. Para hindi malito, ilagay ang mga file sa folder na ipapangalan mong "flowplayer". Ngayon na natapos ka ng gawin yun, handa ka ng ilagay ito sa iyong webpage:
Sa head tag, nakita natin ang JavaScript file. Ang <a> tag ay ginamit sa pag-identify kung anong video ang i-plaplay at kung saan ito ilalagay. Ang href attribute ay naka-specify kung saang folder ilalagay ang video - dito, kasama ng HTML page ang video na ito sa isang folder, pero puwede mong ilagay ito sa videos folder at i-call ito gamit ang href="videos/video.mp4".
Ginamit ng style attribute ang CSS para i-define ang pixel dimensions ng player na naroon sa page. Dapat magkamatch sila doon sa size ng video para maganda ang quality.
Puwede kang maglagay ng maraming video player gamit ang FlowPlayer na hindi nawawala ang performance nito. Para magawa ito ng FlowPlayer, hindi pinagsasabayin sa pag-play ang mga video.
MAKING A SPLASH
Sa FlowPlayer, ang content na pinapakita bago ang video ay ang splash. Ang splash ay puwedeng image o HTML code. Puwede kang pumili ng from mula sa video o ang malaking play button at ilang text na nag-dedescribe sa video. Puwede mong i-customize ang background ng spash gamit ang CSS background-image property at bibigyan ng image para mag-display:
Lahat ng ibang content para sa splash, tulad ng mga image o text, ay puwedeng gawin sa pagdagdag ng HTML sa body ng tag na nag-hohost sa player. Puwede mo ring i-customize ang hitsura ng player, kasama na ang control bar, na gamit ang HTML, CSS, at custom images.
CONFIGURATION
Puwede mong i-configure ang video player sa pag-passs ng mga extra option sa flowplayer() function bilang pangatlong parameter.
Ang code na ito ay gagawa ng player gamit ang video na naka-specify sa video reference sa href attribute ng player tag. Ang video na ito ay hindi mag-auautoplay pagkatapos mag-load ang page.
Ang playlist ay ang serye ng mga video na i-plaplay ng FlowPlayer na naka-sequence. Pwede mong i-set ang properties ng bawat video sa playlist, pero ang pinakasimpleng paraan para gumawa ng isa ay mag-lista ng video na gusto mong ipakita:
Kapag gusto mong i-customize ang behavior ng video player mo, makakapaghanap ka ng maraming configuration properties sa website ng FlowPlayer.
Ang pag-host ng mga video ay hindi pang-kalahatan. Totoo, mas maraming kakaining oras kapag ganito ang gagawin niyo pero mas professional looking naman. Ang kagandahan ng YouTube ay dahil isa ito sa mga top ranking websites sa Alexa ranking, mapapansin ang mga video mo.
INSTALLATION
Para ma-install ang player na ito, i-download ang Flowplayer mula sa http://www.flowplayer.org at i-upload ang mga file nito sa iyong website. Para hindi malito, ilagay ang mga file sa folder na ipapangalan mong "flowplayer". Ngayon na natapos ka ng gawin yun, handa ka ng ilagay ito sa iyong webpage:
Code:
<!DOCTYPE html>
<head>
<script src="flowplayer/flowplayer-3.1.4.min.js">
</script>
</head>
<body>
<a href="video.mp4" style="display: block; width:452 px;height:300 px;id="player"></a>
<script>
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf");
</script>
</body>
</html>Sa head tag, nakita natin ang JavaScript file. Ang <a> tag ay ginamit sa pag-identify kung anong video ang i-plaplay at kung saan ito ilalagay. Ang href attribute ay naka-specify kung saang folder ilalagay ang video - dito, kasama ng HTML page ang video na ito sa isang folder, pero puwede mong ilagay ito sa videos folder at i-call ito gamit ang href="videos/video.mp4".
Ginamit ng style attribute ang CSS para i-define ang pixel dimensions ng player na naroon sa page. Dapat magkamatch sila doon sa size ng video para maganda ang quality.
Puwede kang maglagay ng maraming video player gamit ang FlowPlayer na hindi nawawala ang performance nito. Para magawa ito ng FlowPlayer, hindi pinagsasabayin sa pag-play ang mga video.
MAKING A SPLASH
Sa FlowPlayer, ang content na pinapakita bago ang video ay ang splash. Ang splash ay puwedeng image o HTML code. Puwede kang pumili ng from mula sa video o ang malaking play button at ilang text na nag-dedescribe sa video. Puwede mong i-customize ang background ng spash gamit ang CSS background-image property at bibigyan ng image para mag-display:
Code:
<style>
.player {
width: 425 px; height: 300px; bacground-image: url("splash.jpg");
}
</style>
<div href="video.flv" class="player">
<img src="play-button.jpg"/>Lahat ng ibang content para sa splash, tulad ng mga image o text, ay puwedeng gawin sa pagdagdag ng HTML sa body ng tag na nag-hohost sa player. Puwede mo ring i-customize ang hitsura ng player, kasama na ang control bar, na gamit ang HTML, CSS, at custom images.
CONFIGURATION
Puwede mong i-configure ang video player sa pag-passs ng mga extra option sa flowplayer() function bilang pangatlong parameter.
Code:
<script>
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf", {
clip: {url:"video.flv", autoPlay: false, accelerated: true }
</script>Ang code na ito ay gagawa ng player gamit ang video na naka-specify sa video reference sa href attribute ng player tag. Ang video na ito ay hindi mag-auautoplay pagkatapos mag-load ang page.
Ang playlist ay ang serye ng mga video na i-plaplay ng FlowPlayer na naka-sequence. Pwede mong i-set ang properties ng bawat video sa playlist, pero ang pinakasimpleng paraan para gumawa ng isa ay mag-lista ng video na gusto mong ipakita:
Code:
<script>
flowplayer("player", "flowplayer/flowplayer-3.1.5.swf", {
clip: { autoPlay:false}, playlist: [ "video-1.flv", "video-2.flv" ]
</script>Kapag gusto mong i-customize ang behavior ng video player mo, makakapaghanap ka ng maraming configuration properties sa website ng FlowPlayer.
Ang pag-host ng mga video ay hindi pang-kalahatan. Totoo, mas maraming kakaining oras kapag ganito ang gagawin niyo pero mas professional looking naman. Ang kagandahan ng YouTube ay dahil isa ito sa mga top ranking websites sa Alexa ranking, mapapansin ang mga video mo.
ang galing hanga talaga ako sa mga ganito.
