Incorporar vídeo na página web (HTML)

StackOverflow https://stackoverflow.com/questions/1200719

Pergunta

Eu quero inserir um vídeo em uma página web.
Eu não quero usar o flash porque ele não está disponível para um grande número de plataformas.
Estou relutante em usar HTML5 becase que não é muito normal ainda (é padrão, mas a maioria das pessoas não têm navegadores que suportam)

Existe alguma outra maneira? Ou devo ficar com HTML5 e uma bandeira enorme dizendo às pessoas para atualizar seu navegador?

Foi útil?

Solução

Existem algumas maneiras de combinar vídeo HTML5 com fallbacks para navegadores não-sustentável. Algumas soluções específicas foram demonstradas.

Um exemplo é vídeo para Todos por Camen projeto, que está em conformidade com HTML5, e usa comentários condicionais para IE e uma marca de objeto aninhado para navegadores mais antigos. Este deve ser compatível com os padrões, compatível com versões anteriores, e à prova de futuro.

Outras dicas

HTML 5 não é padrão. É um projecto. Ele provavelmente vai se tornar padrão o primeiro dia. Ele provavelmente irá mudar primeiro.

Se você quiser incorporar vídeo em uma página, em seguida, hoje, pelo menos, o Flash é a melhor opção suportada que você tem disponível. Eu fornecer um link para uma versão para download regular como uma opção para pessoas que não têm o Flash (ou que querem apenas assistir ao vídeo em um player de vídeo dedicada).

pessoas dizendo para atualizar seu navegador não vai ajudar muito. Tanto quanto eu sei, o único navegador com suporte a vídeo em uma versão estável é o Firefox. O Chrome não suporta-lo, exceto na versão de desenvolvimento. Eu não acho Opera trouxe para fora uma compilação estável com suporte. Microsoft certamente não adicionou-o para o Internet Explorer ainda. Safari Eu não tenho certeza sobre.

Se você realmente quer evitar Flash, então você pode usar um objeto HTML 4.01. 

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

... e espero que o usuário tem um plug-in capaz de lidar com o vídeo instalado.

Acabei de se deparar Cortado . É um applet Java que desempenha um OGG. I actualy tenho que agradecer a David Dorward para isso, já verificando o status do HTML5 me deparar com ela. Firefox sugere o uso de algo como: 

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>

Java está disponível para muito mais plataformas do que flash, e, neste caso, se apenas um fallback para HTML5.

( fonte )

Eu sei que é um pouco tarde, mas você ter um olhar para VLC?

Ele pode ser incorporado em um site, roda em Windows, Mac OS e Linux, é livre, de código aberto, suporta um monte de formato de vídeo / áudio ...

A desvantagem é que ele não tem uma interface gráfica agradável com play / pause / volume set / ... funções, você tem que criá-los.

Você pode ter um olhar para este artigo: http: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

Por que você acha um monte de grandes sites usam Flash para reprodução de vídeo? Provavelmente não por causa de sua indisponibilidade ... Claro que existem alternativas para conteúdos de vídeo incorporar em uma página da web, mas se a disponibilidade é um problema, o Flash é a melhor maneira de ir no momento.

Eu trabalhei sobre este problema como eu estou muito interessado em XHTML + RDFa e eu encontrei uma maneira de reproduzir um vídeo em um documento XHTML 1.0 Strict em HTML5 navegadores sem bloquear nem HTML5 browsers.

publiquei um plugin jQuery aqui: https://github.com/charlycoste/xhtml-video

E uma demonstração aqui: http://demo.ccoste.fr/video

Na verdade, isso é muito menos poderoso do que usar um tag HTML5, mas pelo menos ... funciona!

A solução se baseia em javascript e lona, ??mas pode ser graciosamente degradado usando códigos <object> (que é o meu plugin jQuery faz).

O que eu faço é realmente simples:

  1. eu crio um novo vídeo elemento (não é uma tag) na memória, mas eu não adicionar para o documento DOM: 

    var video = document.createElement('video');

  2. Eu criar um novo canvas elemento na memória, mas eu não adicione para o documento DOM: 

    var canvas = document.createElement('canvas');

  3. Eu criar um novo img elemento e eu adicioná-lo para o DOM. 

    // var parent = ... ;
// var width = ...;
// var height = ...;
var img = document.createElement('img');

img.setAttribute('width', width);
img.setAttribute('height', height);

parent.appendChild(img);

  4. Quando o vídeo está jogando (video.play()), eu faço-lhe desenhar cada quadro na tela (o que não é visível, porque não adicionado ao DOM - o que torna a estadia DOM válido documento XHTML 1.0) 

    canvas.getContext("2d").drawImage(video, 0, 0, width, height);

  5. Finalmente eu uso o método toDataURL() do elemento canvas para obter uma imagem codificada de base 64 para o quadro e colocá-lo para o atributo src do elemento img. 

    img.setAttribute('src', canvas.toDataURL());

Ao fazer isso, você faz objetos JavaScript reproduzir um vídeo fora do DOM e empurre cada quadro em um elemento img DOM. Então você pode reproduzir o vídeo usando os recursos de HTML5 do navegador, mas sem a necessidade de um documento HTML5.

E se o navegador não possui recursos HTML5 ou se ele não pode lidar com o codec utilizado, ele vai cair para trás sobre o comportamento <object> nativa (em geral ... o navegador irá procurar um plugin como o VLC, ou assim por diante ...)

E se não há nenhuma maneira para que a reprodução do vídeo (sem plug-in para ele), será usado o conteúdo alternativo fornecido dentro da tag <object>.

aspecto Performance: como isso resulta em um processo muito alta consumindo, a reprodução pode piscar ... Para evitar isso, você pode diminuir a qualidade de renderização usando compressão JPEG desta forma: canvas.toDataURL('image/jpeg', quality) onde quality é um valor entre 0 e 1.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top