Tweet
Boa tarde galera do GH!
Alguem poderia me indicar algum tutorial de como botar para rodar videos no site?
agradeço a todos
Alguem poderia me indicar algum tutorial de como botar para rodar videos no site?
agradeço a todos
-
-
Videos com HTML5 eu presumo.
Bem não tenho um tutorial , mas vo comentar basicamente.
Primeiro coloque as tags de abertura do video
<video>
</video>
Simples não ?
Depois vamos setar algumas coisas
podemos definir altura,largura ou se queremos controles
vamos setar os controles para aprecerem
<video controls=controls>
</video>
Agora temos os controles do video
porém não temos video ainda.
Ae que está o problema do HTML5 ou melhor dos navegadores
Cada navegar exige um formato especifico de video
Como WebM ,Ogg ou MP4 em alguns Casos o mov atende as necessidade também ( no MacOS videos incorporados em mov funcionão normal, mas isso se deve ao Safari eu acredito não ao HTML5 )
Para inserir o video é simples
bastar fazer algo como
<video>
<source src="link/para/video.mp4" />
<source src="link/para/video.ogg" />
<source src="link/para/video.webm" />
</video>
(OBS : você pode procurar um fallback em Flash para o video )
Agora vem a parte legal, você pode controlar por JavaScript o video
vou usar as normas da EMAC5 então não funciona em todos os navegadores , caso queira adaptar fique a vontade
Código:<DOCTYPE html> <html> <head> <meta charset=utf8> <title>Teste</title> </head> <body> <video id="videoMeu" controls=controls> <source src="link/para/video.mp4" /> <source src="link/para/video.ogg" /> <source src="link/para/video.webm" /> </video> <script> (function(){ }()); </script> </body> </html> -
Ops não sei o porque mas o meu Chrome do Ubuntu postou automaticamente a mensagem quando apertei espaço
devia estar fora de foco, de qualquer forma não tem problema eu continuo
a parte do script que faltava
Código:<script> (function(){ var Video = document.querySelector("#meuVideo"); Video.play();// Para dar play ao video setTimeout(function(){ Video.stop(); },5000);// para parar depois de 5 segundos }()); </script>Comment
-
muito obrigado pela ajuda vo tentar aki.Comment
Comment