Adição de vídeos no Dreamweaver

Última atualização em 25 de set de 2023

Saiba como incorporar vídeos em páginas da Web e inserir arquivos FLV no Dreamweaver.

Incorporar vídeos em páginas da Web (HTML5)

O HTML5 oferece suporte a tags de vídeo e de áudio que permitem que os usuários reproduzam arquivos de vídeo e de áudio em um navegador, sem um plug-in ou player externo. O Dreamweaver oferece suporte a dicas de códigos para adicionar tags de vídeo e de áudio.

A Visualização dinâmica processa o vídeo, fornecendo uma visualização do vídeo que você está incorporando na página da Web.

Nota

Embora você possa incorporar qualquer vídeo na sua página da Web, a Visualização dinâmica nem sempre processa todos os vídeos. As tags de áudio e de vídeo são compatíveis com o Dreamweaver usando o plug-in Apple QuickTime. No Windows, se o plug-in Apple QuickTime não estiver instalado, a página da Web não processará o conteúdo de mídia.

Para saber como inserir vídeos HTML5, consulte Inserção de vídeo HTML5 no Dreamweaver.

Inserir arquivos FLV

Inserir arquivos FLV

Você pode facilmente adicionar vídeo FLV às suas páginas da Web sem usar a ferramenta de criação do Flash. Você deve ter um arquivo FLV codificado antes de começar.

Dreamweaver insere um componente SWF que exibe o arquivo FLV; quando visualizado em um navegador, este componente exibe o arquivo FLV selecionado, bem como um conjunto de controles de reprodução.

O arquivo FLV selecionado e um conjunto de controles de reprodução

Dreamweaver oferece as seguintes opções para entrega de vídeo FLV aos visitantes do site:

Vídeo de download progressivo

Faz o download do arquivo FLV para o disco rígido do visitante do site e em seguida o reproduz.Ao contrário dos métodos tradicionais de "baixar e reproduzir" de entrega de vídeo, no entanto, o download progressivo permite que o arquivo de vídeo comece a ser reproduzido antes que o download seja concluído.

Vídeo de fluxo contínuo

Transmite o conteúdo do vídeo e o reproduz em uma página da Web após um curto período de buffer que garante a reprodução contínua. Para ativar o vídeo de fluxo contínuo nas páginas da Web, acesse o Adobe® Flash® Media Server.

Você deve ter um arquivo FLV codificado para que possa usá-lo no Dreamweaver. É possível inserir os arquivos de vídeo criados com dois tipos de codecs (tecnologias de compactação/descompactação): Sorenson Squeeze e On2.

Como com arquivos SWF normais, quando você insere um arquivo FLV, o Dreamweaver insere um código que detecta se o usuário possui a versão correta do Flash Player para exibir o vídeo. Se o usuário não tiver a versão correta, a página exibe o conteúdo alternativo que informa o usuário para baixar a versão mais recente do Flash Player.

Nota

Para exibir arquivos FLV, os usuários devem ter o Flash Player 8 ou posterior instalado em seus computadores. Se um usuário não tiver a versão requerida do Flash Player, mas tiver o Flash Player 6.0 r65 ou posterior instalado, o navegador exibe um instalador expresso do Flash Player em vez do conteúdo alternativo. Se o usuário declinar a instalação expressa, então a página exibe o conteúdo alternativo.

Para obter mais informações sobre como trabalhar com vídeo, visite o Centro de tecnologia de vídeo em www.adobe.com/go/flv_devcenter_br.

Inserir um arquivo FLV

Selecione Inserir > HTML > Vídeo do Flash.

Inserir vídeo do Flash
Inserir vídeo do Flash

Na caixa de diálogo Inserir FLV, selecione Download progressivo ou Vídeo em fluxo no menu pop-up Tipo de vídeo.
Complete as demais opções da caixa de diálogo e clique em OK.
Nota

Microsoft Internet Information Server (IIS) não processa tags object aninhadas.Para páginas ASP, o Dreamweaver usa código object/embed aninhado em vez de código object aninhado ao inserir arquivos SWF ou FLV.

Definir opções para vídeo de download progressivo

A caixa de diálogo Inserir FLV permite definir opções para entrega de download progressivo de um arquivo FLV inserido em uma página da Web.

Selecione Inserir > HTML > Vídeo do Flash (ou clique no ícone Vídeo do Flash na categoria HTML do painel Inserir).

Na caixa de diálogo Inserir FLV, selecione Vídeo de download progressivo no menu Tipo de vídeo.
Inserir vídeo do Flash
Inserir vídeo do Flash

Especifique as seguintes opções:

URL

Especifica um caminho relativo ou absoluto para o arquivo FLV. Para especificar um caminho relativo (por exemplo, meucaminho/meuvideo.flv), clique no botão Procurar, navegue até o arquivo FLV e selecione-o. Para especificar um caminho absoluto, digite a URL (por exemplo, http://www.example.com/myvideo.flv) do arquivo FLV.

Capa

Especifica a aparência do componente de vídeo. Uma visualização do skin selecionado aparece abaixo do menu pop-up Skin.

Largura

A largura do arquivo FLV, em pixels. O Dreamweaver determina a largura do arquivo FLV e você pode ver que a largura aparece automaticamente nesse campo.

Altura

A altura do arquivo FLV, em pixels. O Dreamweaver otimiza automaticamente a altura do arquivo FLV e você pode ver que a altura aparece automaticamente nesse campo.

Nota

Total com capa é a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.

Restringir

Mantém a mesma proporção entre a largura e a altura do componente de vídeo. Esta opção é selecionada por padrão.

Executar automaticamente

Especifica se o vídeo deve ser reproduzido quando a página da Web for aberta.

Retroceder automaticamente

Especifica se o controle de reprodução retorna à posição inicial após o término da reprodução do vídeo.

Clique em OK para fechar a caixa de diálogo e adicionar o arquivo FLV à sua página da Web.

O comando Inserir FLV gera um arquivo SWF do reprodutor de vídeo e um arquivo SWF de skin que são usados para exibir seu conteúdo de vídeo em uma página da Web. (Para ver os novos arquivos, talvez seja necessário clicar no botão Atualizar no painel Arquivos.) Esses arquivos são armazenados no mesmo diretório que o arquivo HTML ao qual você está adicionando conteúdo de vídeo. Quando você faz upload da página HTML contendo o arquivo FLV, o Dreamweaver faz upload desses arquivos como arquivos dependentes (contanto que você clique em Sim na caixa de diálogo Colocar arquivos dependentes).

Definir opções de vídeo de fluxo contínuo

A caixa de diálogo Inserir FLV permite definir opções para download de vídeo em fluxo de um arquivo FLV inserido em uma página da Web.

Selecione Inserir > HTML > Vídeo do Flash (ou clique no ícone Vídeo do Flash na categoria HTML do painel Inserir).

Selecione Vídeo de fluxo contínuo no menu pop-up Tipo de vídeo.
Definir opções de vídeo de fluxo contínuo
Definir opções de vídeo de fluxo contínuo

URI do servidor

Especifica o nome do servidor, nome do aplicativo e nome da instância no formato rtmp://www.example.com/app_name/instance_name.

Nome do fluxo contínuo

Especifica o nome do arquivo FLV que você deseja reproduzir (por exemplo, meuvideo.flv). A extensão .flv é opcional.

Capa

Especifica a aparência do componente de vídeo. Uma visualização da capa selecionada aparece abaixo do menu pop-up Capa.

Largura

A largura do arquivo FLV, em pixels. O Dreamweaver determina a largura do arquivo FLV e preenche automaticamente a largura em pixels nesse campo.

Altura

A altura do arquivo FLV, em pixels. O Dreamweaver determina a altura do arquivo FLV e preenche automaticamente a altura em pixels nesse campo.

Nota

Total com capa é a largura e a altura do arquivo FLV mais a largura e a altura da capa selecionada.

Restringir

Mantém a mesma proporção entre a largura e a altura do componente de vídeo. Esta opção é selecionada por padrão.

Feed de vídeo ao vivo

Especifica se o conteúdo do vídeo é dinâmico. Se a opção Feed de vídeo dinâmico estiver selecionada, o Flash Player reproduzirá a alimentação de vídeo dinâmico com fluxo do Flash® Media Server. O nome do feed de vídeo ao vivo é o nome especificado na caixa de texto Nome do fluxo contínuo.

Nota

Para ativar o Feed de vídeo ao vivo, você deve selecionar uma das opções de capa do Halo no campo Capa. Quando você seleciona Feed de vídeo ao vivo, somente o controle de volume aparece na capa do componente, pois não é possível manipular o vídeo ao vivo. Além disso, as opções Executar automaticamente e Retroceder automaticamente não têm nenhum efeito.

Executar automaticamente

Especifica se o vídeo deve ser reproduzido quando a página da Web for aberta.

Retroceder automaticamente

Especifica se o controle de reprodução retorna à posição inicial após o término da reprodução do vídeo.

Tempo de buffer

Especifica o tempo, em segundos, necessário para o buffer antes do início da reprodução do vídeo. O tempo de buffer padrão é definido como 0 para que o vídeo comece a ser reproduzido imediatamente após o botão Reproduzir ser clicado. (Se Reprodução automática estiver selecionada, o vídeo começa a ser reproduzido assim que uma conexão for estabelecida com o servidor.) Convém definir um tempo de buffer se você estiver fornecendo vídeo com taxa de bits superior à velocidade de conexão do visitante do site ou quando o tráfego da Internet puder causar problemas de largura de banda ou conectividade. Por exemplo, se você quiser enviar 15 segundos de vídeo para a página da Web antes que ela comece a reproduzir o vídeo, defina o tempo de buffer como 15.

Clique em OK para fechar a caixa de diálogo e adicionar o arquivo FLV à sua página da Web.

O comando Inserir FLV gera um arquivo SWF de player de vídeo e um arquivo SWF de capa que são usados para exibir seu vídeo em uma página da Web. O comando também gera um arquivo main.asc que você deve fazer upload para seu Flash Media Server. (Para ver os novos arquivos, talvez seja necessário clicar no botão Atualizar no painel Arquivos.) Esses arquivos são armazenados no mesmo diretório do arquivo HTML ao qual você está adicionando conteúdo de vídeo. Ao fazer upload da página HTML que contém o arquivo FLV, não se esqueça de fazer upload dos arquivos SWF para seu servidor web e do arquivo main.asc para seu Flash Media Server.

Nota

Se você já tiver um arquivo main.asc em seu servidor, consulte o administrador do servidor antes de fazer upload do arquivo main.asc gerado pelo comando Inserir FLV.

Você pode facilmente fazer upload de todos os arquivos de mídia necessários selecionando o espaço reservado do componente de vídeo na janela Documento do Dreamweaver e clicando no botão Fazer upload de mídia no inspetor de Propriedade (Janela > Propriedades). Para ver uma lista de arquivos necessários, clique em Mostrar arquivos necessários.

Nota

O botão Fazer upload de mídia não faz upload do arquivo HTML que contém o conteúdo de vídeo.

Editar informações de download do Flash Player

Quando você insere um arquivo FLV em uma página, o Dreamweaver insere um código que detecta se o usuário possui a versão correta do Flash Player. Em caso negativo, a página exibe um conteúdo alternativo padrão que solicita que o usuário baixe a versão mais recente. Você pode alterar este conteúdo alternativo a qualquer momento.

Este procedimento também se aplica a arquivos SWF.

Nota

Se um usuário não tiver a versão requerida, mas tiver o Flash Player 6.0 r65 ou posterior, o navegador exibe um instalador expresso do Flash Player. Se o usuário declinar a instalação expressa, então a página exibe o conteúdo alternativo.

Na visualização Design da janela Documento, selecione o arquivo SWF ou arquivo FLV.

Clique no ícone de olho no arquivo SWF ou FLV.

Nota

Você também pode pressionar Ctrl + ] para alternar para a visualização de conteúdo alternativo. Para retornar à visualização SWF/FLV, pressione Ctrl + [ até que todo o conteúdo alternativo seja selecionado. Em seguida, pressione Ctrl + [ novamente.

Edite o conteúdo da mesma forma que editaria qualquer outro conteúdo no Dreamweaver.
Nota

Não é possível adicionar arquivos SWF ou arquivos FLV como conteúdo alternativo.

Clique no ícone de olho novamente para retornar à visualização de arquivo SWF ou FLV.

Solução de problemas em arquivos FLV

Esta seção detalha algumas das causas mais comuns de problemas com arquivos FLV.

Problemas de visualização causados pela ausência de arquivos relacionados

O código gerado pelo Dreamweaver CS4 e versões posteriores depende de quatro arquivos dependentes, diferentes do próprio arquivo FLV:

  • swfobject_modified.js

  • expressInstall.swf

  • FLVPlayer_Progressive.swf

  • O arquivo de capa (por exemplo, Clear_Skin_1.swf)

Observe que há dois arquivos dependentes a mais para o Dreamweaver CS4 e versões posteriores, em comparação ao Dreamweaver CS3.

Os dois primeiros desses arquivos (swfobject_modified.js e expressInstall.swf) são instalados em uma pasta chamada Scripts, que o Dreamweaver cria na raiz do local se ela ainda não existir.

Os outros dois arquivos (FLVPlayer_Progressive.swf e o arquivo de skin) são instalados na mesma pasta que a página na qual o FLV está incorporado.O arquivo de skin contém os controles do FLV, e seu nome depende da skin escolhida nas opções descritas na Ajuda do Dreamweaver.Por exemplo, se você escolher Clear Skin, o arquivo se chamará Clear_Skin_1.swf.

Todos os quatro arquivos dependentes DEVEM ser carregados no servidor remoto para que o FLV seja exibido corretamente.

Esquecer de fazer upload desses arquivos é a causa mais comum de arquivos FLV não serem executados corretamente em uma página da Web.Se um dos arquivos estiver faltando, você pode ver uma "caixa branca" na página.

Para garantir que você carregou todos os arquivos dependentes, use o painel Arquivos do Dreamweaver para carregar a página na qual o FLV aparece.Quando você carrega a página, o Dreamweaver pergunta se deseja carregar arquivos dependentes (a menos que tenha desativado essa opção).Clique em sim para fazer upload dos arquivos dependentes.

Problemas de visualização ao visualizar páginas localmente

Devido a atualizações de segurança no Dreamweaver CS4, não é possível usar o comando Visualizar no navegador para testar uma página com um FLV incorporado, a menos que você defina um servidor de teste local na definição do site do Dreamweaver e use o servidor de teste para visualizar a página.

Normalmente, você precisa de um servidor de teste apenas se estiver desenvolvendo páginas com ASP, ColdFusion ou PHP (consulte Configurar o computador para desenvolvimento de aplicativos).Se você estiver criando sites que usam apenas HTML e não tiver definido um servidor de teste, pressionar F12 (Windows) Opt+F12 (Macintosh) produz uma confusão de controles de aparência na tela.A solução alternativa é definir o servidor de teste e usar o servidor de teste para visualizar a página, ou carregar os arquivos em um servidor remoto e visualizá-los lá.

Nota

É possível que as configurações de segurança também sejam responsáveis pela incapacidade de visualizar conteúdo FLV local, mas a Adobe não conseguiu confirmar isso.Você pode tentar alterar as configurações de segurança. Para obter mais informações sobre como alterar suas configurações de segurança, consulte Tech Note 117502.

Outras possíveis causas de problemas com arquivos FLV

  • Se você estiver tendo dificuldades para visualizar arquivos localmente, verifique se a opção Visualizar usando arquivo temporário está desmarcada em Editar > Preferências > Visualização em tempo real.

  • Verifique se você possui o plug-in mais recente do FlashPlayer

  • Tenha cuidado ao mover arquivos e pastas fora do Dreamweaver. Quando você move arquivos e pastas fora do Dreamweaver, ele não garante os caminhos corretos para os arquivos relacionados ao FLV.

  • É possível substituir temporariamente o arquivo FLV com problemas por um arquivo FLV em boas condições. Se o arquivo FLV de substituição funcionar, o problema está no arquivo FLV original e não no navegador ou no computador.

Editar ou excluir um componente FLV

Altere as configurações do vídeo em sua página da Web selecionando o alocador de espaço do componente de vídeo na janela Documento do Dreamweaver e usando o Inspetor de propriedades. Outro modo é excluir o componente de vídeo e reinseri-lo, selecionando Inserir > Mídia > Vídeo do Flash.

Editar o componente FLV

Selecione o espaço reservado do componente de vídeo na janela Documento do Dreamweaver clicando no ícone FLV no centro do espaço reservado.
Abra o inspetor de propriedades (Janela > Propriedades) e faça as alterações.
Nota

Não é possível alterar tipos de vídeo (de download progressivo para streaming, por exemplo) usando o Inspetor de propriedades.Para alterar o tipo de vídeo, exclua o componente FLV e insira-o novamente selecionando Inserir > Mídia > FLV.

Excluir o componente FLV

Selecione o espaço reservado do componente FLV na janela Documento do Dreamweaver e pressione Excluir.

Adicionar vídeo (outros formatos)

Para saber como adicionar vídeos que não sejam arquivos .flv, consulte Adicionar vídeo (não FLV)

Você também pode querer saber como inserir conteúdo de plug-in no Dreamweaver para reproduzir arquivos .mp3 ou vídeos do QuickTime no site do Dreamweaver.