www.eprace.edu.pl » webtv » Jak umieścić film na stronie internetowej? » Własny YouTube

Własny YouTube

Szczegóły osadzenia filmu na stronie WWW zostaną omówione na przykładzie najpopularniejszej obecnie technologii FlashVideo. Do osiągnięcia bardzo efektownego rezultatu wystarczą tylko 3 kroki:

1. przekodowanie materiału filmowego do formatu „.flv”,

2. ściągnięcie odtwarzacza w formie pliku „.swf”,

3. osadzenie aplikacji flash na stronie HTML.

Przekodowanie filmu do „FlashVideo”

Do uzyskania pliku w formacie „.flv” użyjemy darmowego programu FFmpeg. Jego zaletą jest obsługa oszałamiającej liczby kodeków i dostępność na licencji open source. Aby rozpocząć konwersję filmu, nie musimy nawet wiedzieć, w jakim jest formacie – FFmpeg wykryje to automatycznie – wystarczy podać nazwę naszego pliku przez opcję -i (ang. input). Aby wybrać format wyjściowy, posługujemy się opcją -f – dla FlashVideo ma ona postać: „-f flv”. Przykładowe wywołanie programu FFmpeg może mieć postać:

$ ffmpeg -i spotkanie1_3.mpg -f flv -s 384x208 -ar 22050 spotkanie1_mi.flv

W powyższym przykładzie, po określeniu pliku wejściowego i pożądanego formatu, używamy opcji -s (ang. size), określając jaki rozmiar klatki ma być zapisywany oraz opcji -ar (ang. audio rate) do określenia częstotliwości dźwięku. Ostatnim obowiązkowym argumentem jest nazwa pliku, do którego ffmpeg ma zapisać wynik pracy.

Poniżej znajduje się przykładowa treść komunikatów wypisywanych na konsolę podczas pracy konwertera ffmpeg.

[lewar@olimp eud]$ ffmpeg -i spotkanie1_3.mpg -f flv -s 384x208 -ar 22050 \

spotkanie1_mi.flv

FFmpeg version SVN-r10693, Copyright (c) 2000-2007 Fabrice Bellard, et al.

configuration: --arch=x86_64 --prefix=/usr --libdir=/usr/lib64 --shlibdir=/usr/lib64

libavutil version: 49.5.0

libavcodec version: 51.45.0

libavformat version: 51.14.0

built on Feb 5 2008 17:03:27, gcc: 3.3.6 (PLD Linux)

Compiler did not align stack variables. Libavcodec has been miscompiled

and may be very slow or crash. This is not a bug in libavcodec,

but in the compiler. You may try recompiling using gcc >= 4.2.

Do not report crashes to FFmpeg developers.

Input #0, mpeg, from 'spotkanie1_3.mpg':

Duration: 00:18:02.3, start: 0.592556, bitrate: 3509 kb/s

Stream #0.0[0x1e0]: Video: mpeg1video, yuv420p, 640x480, 3300 kb/s, 29.97 fps (r)

Stream #0.1[0x1c0]: Audio: mp2, 32000 Hz, stereo, 128 kb/s

Output #0, flv, to 'spotkanie1_mi.flv':

Stream #0.0: Video: flv, yuv420p, 384x208, q=2-31, 200 kb/s, 29.97 fps(c)

Stream #0.1: Audio: libmp3lame, 22050 Hz, stereo, 64 kb/s

Stream mapping:

Stream #0.0 -> #0.0

Stream #0.1 -> #0.1

Press [q] to stop encoding

frame=32438 fps=157 q=7.7 Lsize= 36357kB time=1082.3 bitrate= 275.2kbits/s

video:26746kB audio:8456kB global headers:0kB muxing overhead 3.279749%

[lewar@olimp eud]$

Po zakończeniu pracy w bieżącym katalogu pojawi się plik wyjściowy. W naszym przykładzie będzie to spotkanie1_mi.flv.

Pobranie odtwarzacza

W internecie można znaleźć dużą liczbę darmowych odtwarzaczy w technologii Flash. My posłużymy się „JW FLV Media Player” firmy LongTail Video.

W tym celu pobieramy plik ze strony producenta (patrz rysunek 2) a następnie rozpakowujemy jego zawartość do katalogu na serwerze WWW, który zawiera naszą stronę. Niezbędne są nam tylko 2 pliki: player.swf i swfobject.js.

Rysunek 2: http://www.longtailvideo.com/players/jw-flv-player/ – strona umożliwiająca pobranie oprogramowania „JW FLV Media Player”http://www.longtailvideo.com/players/jw-flv-player/

Osadzenie odtwarzacza na stronie

W katalogu z naszą stroną HTML umieszczamy przygotowany wcześniej plik FlashVideo – w naszym przykładzie jest to spotkanie1_mi.flv.

Wewnątrz kodu naszej strony umieszczamy następujący fragment:

<p id='preview'>Odtwarzacz pojawi się w tym akapicie.</p>

<script type='text/javascript' src='swfobject.js'></script>

<script type='text/javascript'>

var s1 = new SWFObject('player.swf','player','400','300','9');

s1.addParam('allowfullscreen','true');

s1.addParam('allowscriptaccess','always');

s1.addParam('flashvars','file=spotkanie1_mi.flv');

s1.write('preview');

</script>

Wewnątrz wstawianego kodu znajduje się parametr flashvars, w którym możemy przekazać odtwarzaczowi szereg przydatnych zmiennych konfigurujących. W powyższym fragmencie przekazujemy tylko zmienną file, której wartość to nazwa pliku do prezentacji.

„JW FLV Media Player” obsługuje listy utworów, które są zalecanym sposobem przekazywania adresu pliku z filmem do tego odtwarzacza. Mimo to przekazujemy odtwarzaczowi gotowy plik „.flv” zamiast listy utworów, aby nie komplikować naszego przykładu.

Korzystanie

Odtwarzacze w technologii Flash oferują ogromną elastyczność w konfiguracji i dostosowywaniu do własnych potrzeb. Możliwe jest oglądanie plików w formatach innych niż „.flv” (w tym H.264 wewnątrz kontenera MP4), a także korzystanie z protokołów innych niż HTTP.

Dzisiaj za darmo możemy korzystać z zaawansowanych technologii, które jeszcze niedawno komercyjne firmy oferowały tylko po uiszczeniu opłaty licencyjnej.

komentarze

Przeszukaj ePrace

Copyright © 2008-2010 EPrace oraz autorzy prac.