Dodawanie zawartości wideo w programie Dreamweaver

Ostatnia aktualizacja 25 wrz 2023

Informacje o osadzaniu zawartości wideo na stronach internetowych i wstawianiu plików FLV w programie Dreamweaver.

Osadzanie plików wideo na stronach internetowych (HTML5)

HTML5 obsługuje znaczniki wideo i audio, które umożliwiają użytkownikom odtwarzanie plików wideo oraz plików dźwiękowych bez zewnętrznej wtyczki lub odtwarzacza. Program Dreamweaver dostarcza wskazówki do kodu, gdy dodajesz znaczniki wideo i audio.

Widok aktywny renderuje materiał wideo osadzany na stronie internetowej i wyświetla jego podgląd.

Spostrzeżenie

Chociaż na stronie można osadzić dowolny materiał wideo, widok aktywny nie zawsze renderuje wszystkie takie materiały. Znaczniki wideo i audio są obsługiwane przez program Dreamweaver za pomocą wtyczki Apple QuickTime. W systemie Windows strona internetowa nie renderuje zawartości multimedialnej, jeśli wtyczka Apple QuickTime nie jest zainstalowana.

Wstawianie plików FLV

Wstawianie plików FLV

Możesz łatwo dodać wideo FLV do stron internetowych bez używania narzędzia autorskiego Flash.W tym celu należy dysponować zakodowanym plikiem FLV.

Dreamweaver wstawia komponent SWF, który wyświetla plik FLV; po wyświetleniu w przeglądarce komponent ten pokazuje wybrany plik FLV wraz z zestawem elementów sterujących odtwarzaniem.

Wybrany plik FLV i zestaw formantów odtwarzania

Program Dreamweaver oferuje następujące opcje dostarczania wideo FLV odwiedzającym witrynę:

Wideo pobierane stopniowo

Pobiera plik FLV na dysk twardy odwiedzającego witrynę, a następnie go odtwarza.W odróżnieniu od tradycyjnych metod dostarczania wideo typu „pobierz i odtwarzaj", pobieranie progresywne umożliwia jednak rozpoczęcie odtwarzania pliku wideo przed zakończeniem pobierania.

Strumieniowa transmisja wideo

Dane wideo są przesyłane w postaci strumienia i odtwarzane na stronie internetowej po krótkim czasie buforowania, który gwarantuje płynne odtwarzanie. Aby włączyć obsługę strumieniowej transmisji wideo na stronach internetowych, użytkownik musi mieć dostęp do serwera multimediów Adobe® Flash® Media Server.

Przed wykorzystaniem pliku FLV w programie Dreamweaver należy go zakodować. Na stronach można umieszczać pliki wideo utworzone za pomocą dwóch rodzajów koderów-dekoderów (obiektów zapewniających kompresję i dekompresję): Sorenson Squeeze oraz On2.

Podobnie jak w przypadku zwykłych plików SWF, razem z plikiem FLV program Dreamweaver wstawia kod sprawdzający, czy użytkownik ma właściwą wersję programu Flash Player (to znaczy wersję pozwalającą odtwarzać dany pliki wideo). Jeśli użytkownik nie ma właściwej wersji, przeglądarka wyświetla zawartość zastępczą i monituje o zainstalowanie najnowszej wersji programu Flash Player.

Spostrzeżenie

Aby móc wyświetlać pliki FLV, użytkownicy muszą zainstalować na swoich komputerach program Flash Player w wersji 8 lub nowszej. Jeśli użytkownik nie ma wymaganej wersji programu Flash Player, ale używa wersji Flash Player 6.0 r65 lub nowszej, to przeglądarka otwiera zamiast strony alternatywnej okno ekspresowej instalacji programu Flash Player. Jeśli użytkownik odmówi instalacji ekspresowej, na stronie pojawi się strona alternatywna.

Aby uzyskać więcej informacji o pracy z plikami wideo, odwiedź Centrum technologii wideo na stronie www.adobe.com/go/flv_devcenter_pl.

Wstawianie pliku FLV

Wybierz polecenie Wstaw > HTML > Flash Video.

Wstawianie elementu wideo Flash
Wstawianie elementu wideo Flash

W oknie dialogowym Wstaw FLV wybierz Pobieranie progresywne lub Wideo strumieniowe z menu podręcznego Typ wideo.
Wypełnij pozostałe opcje okna dialogowego i kliknij OK.
Spostrzeżenie

Serwer Microsoft Internet Information Server (IIS) nie przetwarza zagnieżdżonych znaczników obiektów. W przypadku stron ASP program Dreamweaver używa zagnieżdżonego kodu object/embed zamiast zagnieżdżonego kodu object podczas wstawiania plików SWF lub FLV.

Ustaw opcje progresywnego pobierania wideo

Okno dialogowe Wstaw FLV umożliwia ustawianie opcji progresywnego pobierania pliku FLV wstawionego na stronie internetowej.

Wybierz polecenie Wstaw > HTML > Flash Video (lub kliknij ikonę Flash Video w kategorii HTML na panelu Wstaw).

W oknie dialogowym Wstaw FLV wybierz opcję Pobieranie progresywne wideo z menu Typ wideo.
Wstawianie elementu wideo Flash
Wstawianie elementu wideo Flash

Ustaw następujące opcje:

URL

Określa ścieżkę względną lub bezwzględną do pliku FLV. Aby określić ścieżkę względną (na przykład mypath/myvideo.flv), kliknij przycisk Przeglądaj, przejdź do pliku FLV i wybierz go. Aby określić ścieżkę bezwzględną, wpisz Adres URL (na przykład http://www.example.com/myvideo.flv) pliku FLV.

Karnacja

Pozwala określić wygląd składnika wideo. Podgląd wybranej skórki pojawia się pod menu podręcznym Skórka.

Szerokość

Szerokość pliku FLV w pikselach. Program Dreamweaver sprawdza szerokość pliku FLV i automatycznie wstawia ją w tym polu.

Wysokość

Wysokość pliku FLV w pikselach. Program Dreamweaver automatycznie optymalizuje wysokość pliku FLV i wstawia ją w tym polu.

Spostrzeżenie

Opcja Łącznie z karnacją określa szerokość i wysokość pliku FLV wraz z szerokością i wysokością wybranej karnacji.

Zachowaj

Utrzymuje te same proporcje między szerokością a wysokością komponentu wideo. Ta opcja jest domyślnie włączona.

Auto-odtwarzanie

Określa, czy odtwarzać wideo po otwarciu strony internetowej.

Automatycznie przewiń

Określa, czy kontrola odtwarzania powraca do pozycji początkowej po zakończeniu odtwarzania wideo.

Kliknij OK, aby zamknąć okno dialogowe i dodać plik FLV do strony internetowej.

Polecenie Wstaw FLV generuje plik SWF odtwarzacza wideo i plik SWF skórki, które są używane do wyświetlania zawartości wideo na stronie internetowej. (Aby zobaczyć nowe pliki, może być konieczne kliknięcie przycisku Odśwież w panelu Pliki.) Te pliki są przechowywane w tym samym katalogu co plik HTML, do którego dodajesz zawartość wideo. Gdy przesyłasz stronę HTML zawierającą plik FLV, Dreamweaver przesyła te pliki jako pliki zależne (o ile klikniesz Tak w oknie dialogowym Umieść pliki zależne).

Ustawianie opcji strumieniowej transmisji wideo

Okno dialogowe Wstaw FLV pozwala ustawić opcje strumieniowego pobierania pliku wideo FLV wstawionego na stronę internetową.

Wybierz polecenie Wstaw > HTML > Flash Video (lub kliknij ikonę Flash Video w kategorii HTML na panelu Wstaw).

Z wyskakującego menu Typ wideo wybierz opcję Strumieniowa transmisja wideo.
Ustawianie opcji strumieniowej transmisji wideo
Ustawianie opcji strumieniowej transmisji wideo

Identyfikator URI serwera

Określa nazwę serwera, nazwę aplikacji i nazwę instancji w postaci rtmp://www.example.com/app_name/instance_name.

Nazwa strumienia

Określa nazwę pliku FLV, który ma zostać odtworzony (na przykład mojewideo.flv).Rozszerzenie .flv jest opcjonalne.

Karnacja

Pozwala określić wygląd składnika wideo. Podgląd wybranej skórki pojawia się pod menu rozwijanym Skórka.

Szerokość

Szerokość pliku FLV w pikselach. Program Dreamweaver sprawdza szerokość pliku FLV i automatycznie wstawia ją w tym polu.

Wysokość

Wysokość pliku FLV w pikselach. Program Dreamweaver sprawdza wysokość pliku FLV i automatycznie wstawia ją w tym polu (w pikselach).

Spostrzeżenie

Opcja Łącznie z karnacją określa szerokość i wysokość pliku FLV wraz z szerokością i wysokością wybranej karnacji.

Zachowaj

Pozwala zachować istniejące proporcje między szerokością i wysokością składnika wideo. Ta opcja jest domyślnie włączona.

Transmisja dynamiczna wideo

Wskazuje, czy zawartość wideo jest dynamiczna. Jeśli opcja Transmisja dynamiczna wideo jest zaznaczona, program Flash Player będzie odtwarzać aktywny strumień wideo przekazywany z serwera Flash® Media Server. Nazwa aktywnego materiału wideo to nazwa podana w polu tekstowym Nazwa strumienia.

Spostrzeżenie

Aby aktywować dynamiczną transmisję wideo, trzeba wybrać jedną z opcji karnacji Halo w polu Karnacja. Gdy wybierzesz opcję Transmisja dynamiczna wideo, w karnacji komponentu pojawia się tylko kontrolka głośności, ponieważ wideo transmitowanego na żywo nie można modyfikować. Ponadto opcje Auto-odtwarzanie i Automatycznie przewiń nie będą działały.

Auto-odtwarzanie

Określa, czy wideo ma być odtwarzane po otwarciu strony internetowej.

Automatycznie przewiń

Określa, czy sterowanie odtwarzaniem ma powrócić do pozycji początkowej po zakończeniu odtwarzania wideo.

Czas bufora

Określa czas w sekundach wymagany do buforowania przed rozpoczęciem odtwarzania wideo. Domyślny czas bufora jest ustawiony na 0, aby wideo rozpoczęło się natychmiast po kliknięciu przycisku Odtwórz.(Jeśli wybrano opcję Automatyczne odtwarzanie, wideo rozpoczyna odtwarzanie zaraz po nawiązaniu połączenia z serwerem.) Możesz chcieć ustawić czas bufora, jeśli dostarczasz wideo o wyższej szybkości transmisji niż szybkość połączenia użytkownika witryny lub gdy ruch w internecie może powodować problemy z przepustowością lub łącznością. Na przykład, jeśli chcesz wysłać 15 sekund wideo na stronę internetową przed tym, jak strona internetowa rozpocznie odtwarzanie wideo, ustaw czas bufora na 15.

Kliknij OK, aby zamknąć okno dialogowe i dodać plik FLV do strony internetowej.

Polecenie Wstaw FLV generuje plik SWF odtwarzacza wideo i plik SWF skórki, które są używane do wyświetlania wideo na stronie internetowej. Polecenie generuje również plik main.asc, który musisz przesłać do Flash Media Server.(Aby zobaczyć nowe pliki, może być konieczne kliknięcie przycisku Odśwież w panelu Pliki.)Te pliki są przechowywane w tym samym katalogu co plik HTML, do którego dodajesz zawartość wideo. Kiedy przesyłasz stronę HTML zawierającą plik FLV, nie zapomnij przesłać plików SWF na serwer internetowy i plik main.asc na Flash Media Server.

Spostrzeżenie

Jeśli już masz plik main.asc na swoim serwerze, skonsultuj się z administratorem serwera przed przesłaniem pliku main.asc wygenerowanego przez polecenie Wstaw FLV.

Możesz łatwo przesłać wszystkie wymagane pliki multimedialne, wybierając symbol zastępczy komponentu wideo w oknie dokumentu programu Dreamweaver i klikając przycisk Prześlij multimedia w Inspektorze właściwości (Okno > Właściwości). Aby zobaczyć listę wymaganych plików, kliknij Pokaż wymagane pliki.

Spostrzeżenie

Przycisk Prześlij multimedia nie przesyła pliku HTML, który zawiera zawartość wideo.

Edycja informacji dotyczących pobierania danych z programu Flash Player

Wstawiając na stronie plik FLV, program Dreamweaver wstawia również specjalny kod do sprawdzania, czy użytkownicy korzystają z poprawnej wersji programu Flash Player. Jeśli wersja użytkownika jest niepoprawna, na stronie pojawia się zawartość alternatywna, w tym specjalny monit o pobranie najnowszej wersji programu. Zawartość tę można zmienić w dowolnej chwili.

Opisana procedura stosuje się również do plików SWF.

Spostrzeżenie

Jeśli użytkownik nie ma wymaganej wersji, ale używa wersji Flash Player 6.0 r65 lub nowszej, to przeglądarka otwiera okno ekspresowej instalacji programu Flash Player. Jeśli użytkownik odmówi instalacji ekspresowej, na stronie pojawi się zawartość alternatywna.

W widoku Projekt okna Dokumentu wybierz plik SWF lub plik FLV.

Kliknij ikonę oka w pliku SWF lub FLV.

Spostrzeżenie

Można również nacisnąć Control + ], aby przełączyć na widok alternatywnej zawartości.Aby powrócić do widoku SWF/FLV, naciskaj Control + [ dopóki cała alternatywna zawartość nie zostanie wybrana. Następnie naciśnij Control + [ ponownie.

Edytuj zawartość tak samo, jak edytujesz każdą inną zawartość w programie Dreamweaver.
Spostrzeżenie

Nie możesz dodawać plików SWF ani FLV jako alternatywnej zawartości.

Ponownie kliknij ikonę oka, aby powrócić do widoku pliku SWF lub FLV.

Rozwiązywanie problemów z plikami FLV

W tej sekcji szczegółowo opisano niektóre z najczęstszych przyczyn problemów z plikami FLV.

Problemy z wyświetlaniem spowodowane brakiem powiązanych plików

Kod generowany przez program Dreamweaver CS4 i nowszy opiera się na czterech plikach zależnych, różnych od samego pliku FLV:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • Plik karnacji (np. Clear_Skin_1.swf)

Należy zauważyć, że w programie Dreamweaver CS4 i nowszym występują dwa dodatkowe pliki zależne w porównaniu z programem Dreamweaver CS3.

Pierwsze dwa z tych plików (swfobject_modified.js i expressInstall.swf) są instalowane w folderze o nazwie Scripts, który program Dreamweaver tworzy w katalogu głównym witryny, jeśli jeszcze nie istnieje.

Te dwa pliki (FLVPlayer_Progressive.swf i plik skórki) są instalowane w tym samym folderze co strona, w którą osadzony jest plik FLV.Plik skóry zawiera kontrolki dla pliku FLV, a jego nazwa zależy od skóry wybranej w opcjach opisanych w Pomocy Dreamweaver. Na przykład, jeśli wybierzesz Clear Skin, plik nazywa się Clear_Skin_1.swf.

Wszystkie cztery pliki zależne MUSZĄ zostać przesłane na zdalny serwer, aby plik FLV wyświetlał się prawidłowo.

Zapomnienie o przesłaniu tych plików to najczęstsza przyczyna nieprawidłowego działania plików FLV na stronie internetowej. Jeśli brakuje jednego z plików, na stronie może pojawić się „białe pole".

Aby mieć pewność, że przesłano wszystkie pliki zależne, użyj panelu Pliki programu Dreamweaver, aby przesłać stronę, na której pojawia się plik FLV.Podczas przesyłania strony Dreamweaver pyta, czy chcesz przesłać pliki zależne (chyba że wyłączono tę opcję).Kliknij przycisk Tak, aby wysłać pliki zależne.

Problemy z wyświetlaniem podczas podglądu stron lokalnie

Ze względu na aktualizacje zabezpieczeń w programie Dreamweaver CS4 nie możesz używać polecenia Podgląd w przeglądarce do testowania strony z osadzonym plikiem FLV, chyba że określisz lokalny serwer testowy w definicji witryny programu Dreamweaver i użyjesz serwera testowego do podglądu strony.

Normalnie serwer testowy jest wymagany tylko wtedy, gdy tworzysz strony z ASP, ColdFusion lub PHP (patrz Skonfiguruj komputer do tworzenia aplikacji). Jeśli budujesz witryny, które używają tylko HTML i nie zdefiniowałeś serwera testowego, naciśnięcie klawisza F12 (Windows) Opt+F12 (Macintosh) powoduje bałagan elementów sterujących skóry na ekranie. Rozwiązaniem jest albo zdefiniowanie serwera testowego i użycie serwera testowego do podglądu strony, albo przesłanie plików na serwer zdalny i wyświetlenie ich tam.

Spostrzeżenie

Możliwe, że ustawienia zabezpieczeń mogą też być odpowiedzialne za niemożność podglądu lokalnej zawartości FLV, ale Adobe nie było w stanie tego potwierdzić.Możesz spróbować zmienić ustawienia zabezpieczeń i sprawdzić, czy problem ustąpi. Więcej informacji na temat zmiany ustawień zabezpieczeń można znaleźć pod adresem Uwaga techniczna 117502.

Inne możliwe przyczyny problemów z plikami FLV

  • Jeśli występują problemy z wyświetleniem podglądu lokalnego, upewnij się, że opcja „Przeglądaj, używając pliku tymczasowego” w oknie Edycja > Preferencje > Podgląd w czasie rzeczywistym jest wyłączona.

  • Upewnij się, że masz najnowszą wersję wtyczki FlashPlayer.

  • Zachowaj ostrożność przy przenoszeniu plików i folderów poza programem Dreamweaver. Jeśli przeniesie się pliki lub foldery poza programem Dreamweaver, program ten nie będzie mógł zagwarantować poprawności ścieżek do plików powiązanych pliku FLV.

  • Możesz tymczasowo zastąpić plik FLV, który sprawia problemy, sprawdzonym i działającym plikiem FLV. Jeśli takie zastąpienie wyeliminuje problem, to przyczyna problemu tkwi w oryginalnym pliku FLV, a nie w ustawieniach przeglądarki lub komputera.

Edycja lub usuwanie składnika wideo

Aby zmienić ustawienia wideo strony WWW, można zaznaczyć element zastępczy składnika wideo w oknie Dokument programu Dreamweaver i skorzystać z Inspektora właściwości. Inna metoda polega na usunięciu składnika wideo i ponownym wstawieniu go za pomocą polecenia Wstaw > HTML > Flash Video.

Edycja składnika FLV

Wybierz symbol zastępczy komponentu wideo w oknie dokumentu Dreamweaver, klikając ikonę FLV w centrum symbolu zastępczego.
Otwórz inspektora właściwości (Okno > Właściwości) i wprowadź zmiany.
Spostrzeżenie

Nie możesz zmieniać typów wideo (na przykład z pobierania progresywnego na strumieniowanie) za pomocą inspektora właściwości. Aby zmienić typ wideo, usuń komponent FLV i wstaw go ponownie, wybierając Wstaw > Media > FLV.

Usuwanie składnika FLV

Wybierz symbol zastępczy komponentu FLV w oknie dokumentu Dreamweaver i naciśnij DELETE.

Dodawanie zawartości wideo (inne formaty)

Informacje o dodawaniu zawartości wideo, która nie została zapisana w plikach .flv podano w artykule Dodawanie pliku wideo (innego niż plik FLV)

Dostępny jest również opis wstawiania zawartości wtyczek w programie Dreamweaver w celu odtwarzania w serwisie plików .mp3 lub filmów QuickTime.