15
votos
Aceito
Como é criado aqueles vídeos de pré-visualização da thumbnail nos players?
Primeiramente, O Google deve ter uma API que pega alguns frames do vídeo e gera um .WEBP, esse é um formato que assim como o .GIF tb aceita animações.
Veja que em um sistema do tamanho do Youtube ...
- 66,6mil
12
votos
Como criar um novo arquivo .M3U corretamente? (Sendo que ja tenho o streaming .TS)
TL;DR
Use o FFmpeg.
Para recriar o m3u8 a partir de apenas um arquivo .ts:
ffmpeg -i arquivo_original.ts -codec copy -hls_flags single_file -hls_list_size 0 nova_playlist.m3u8
O comando para ...
- 3.208
6
votos
Como aciono um evento js quando um vídeo html atingir um dado segundo?
Use o evento timeupdate (que é suportado tanto por ambos <video> e <audio>) junto com a propriedade HTMLMediaElement.currentTime (retorna o valor em segundos)
Nota: Veja mais eventos e ...
- 100mil
5
votos
Como rodar arquivos .mkv em todos navegadores?
O HTML não suporta nenhum formato de vídeo, e o HTML5 não especifica quais formatos os navegadores devem suportar.
Cabe então aos navegadores decidir quais formatos eles escolhem suportar. ...
- 9.764
4
votos
Aceito
Tratar 404 no video html5
Se for para verificar se um vídeo existe ou não, talvez seja melhor verificar isso antes de carregar a tag video. Se o vídeo existir você monta a tag, caso contrário monta uma mensagem de erro no HTML ...
- 23,7mil
4
votos
Aceito
Gravar arquivo de vídeo após captura no site
Vou postar apenas a parte do envio do JavaScript, como você vai receber no PHP e vai processar a Stream, isto irei deixar ao seu criterio.
Para o exemplo abaixo, irei utilizar um input:file, nele ...
- 23,1mil
4
votos
Aceito
Problema com reprodução de vídeos usando tag nativa do HTML5
Tente converter o video para mp4 mas desta vez usando o codec H.264
Video H.264
Audio AAC
HTML5 Video Encoding
- 3.235
4
votos
Inserir Vídeo em HTML
Provavelmente você esta subindo o video via FTP e talvez esteja assumindo o upload como ASCII, para que não perca dados faça o upload como binário, por exemplo no Filezilla vá em:
Transfer > Transfer ...
- 100mil
4
votos
Aceito
Otimizar vídeo em HTML 5
Seguem minhas dicas.
Primeiro adicione um poster poster="1frame-do-video.jpg" na sua tag de <video> e coloque o atributo preload="auto". Assim enquanto o vídeo não carrega fica a imagem de ...
- 66,6mil
4
votos
Como colocar um Vídeo dentro de um Texto com CSS? É possível colocar um Vídeo como background de texto?
Como não obtive resposta vou postar um resultado que consegui usando mix-blend-mode https://developer.mozilla.org/pt-BR/docs/Web/CSS/mix-blend-mode
A propriedade mix-blend-mode descreve como um ...
- 66,6mil
4
votos
Aceito
Controls de tag video não estão funcionando
O erro está na escrita de "scr", o certo seria "src".
3
votos
Otimizar vídeo em HTML 5
O tamanho do vídeo não deveria ser problema. O formato do vídeo sim.
Encontrei este artigo que discorre sobre isso. O mais importante é o seguinte:
Here’s where this whole “mp4 streaming”, which ...
- 23,7mil
3
votos
Aceito
Como remover opção de download de vídeo
Achei uma solução: https://jsfiddle.net/u1wqb4kz/
// Remove botão de download de vídeos
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-...
- 1.926
3
votos
Aceito
Mudar cursor no evento "onhover" para HTML5 <video>
Dei uma pesquisada e vi que existem esses pseudo-elementos que talvez você possa usar:
video::-webkit-media-controls-play-button
video::-webkit-media-controls-volume-slider-container
video::-...
- 5.905
3
votos
Aceito
Desabilitar botão de download HTML5 Video
Escondendo o botão com um Blob
Ao fazer um blob do vídeo e depois um parse para URL (usando URL.createObjectURL), o Google Chrome automaticamente esconde o botão:
var video = document.querySelector('...
- 10,1mil
3
votos
Como fazer um vídeo iniciar e reiniciar automaticamente?
Solução nada bonita mas eficaz:
document.getElementById('vid').play();
<video controls src="https://ia800701.us.archive.org/26/items/SampleVideo1280x7205mb/SampleVideo_1280x720_5mb.mp4" type="...
- 1.094
2
votos
Aceito
Erro desconhecido causado pela biblioteca do videojs
Resolvi o problema, mudando a regra do "autoplay", pois no chrome não estava executando o "autoplay", sem antes completar carregamento no Dom do vídeo:
$(function() {
var myPlayer = videojs("...
- 12,2mil
2
votos
Otimizar vídeo em HTML 5
Você pode colocar o seu vídeo para carregar após a página e todo o seu conteúdo forem carregados. Exemplo:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/...
- 2.873
2
votos
Como os sites de compartilhamento de vídeos realizam o autoplay com áudio no chrome
O próprio HTML5 tem um atributo na tag vídeo de autoplay
<video controls autoplay>
<source src="https://www.w3schools.com/TAgs/movie.mp4" type="video/mp4">
<source src="https:...
- 2.439
2
votos
Como rodar arquivos .mkv em todos navegadores?
A extensão .mkv e .mp4 não tem nada haver com o formato do video, você poderia renomear um arquivo com o formato mp4 para a extensão video.foobaz que ainda seria um arquivo .mp4.
Videos não são ...
- 100mil
2
votos
Exibir um vídeo diferente para cada visitante
Claro, é pra isso que servem os "Cookies": https://developer.mozilla.org/pt-BR/docs/Web/HTTP/Cookies
Pequei parte do código em https://www.w3schools.com/js/js_cookies.asp
Você só precisa criar um ...
- 324
2
votos
Legendas não aparecem em HTML5 video tag
Existem alguns pontos a serem corrigidos no seu arquivode legendas... O separador decimal para os millesegundos deve ser o . e não a ,. É recomendado que você inicie a primeira linha do seu .vtt com a ...
- 9.440
1
voto
Aceito
WEBCAM sem Flash
Seu único erro é estar chamando a função na hora de declarar:
window.addEventListener("DOMContentLoaded", startCamera())
O correto é o próprio DOMContentLoaded chamar, ficando assim:
window....
- 100mil
1
voto
Aceito
Vídeo como Background HTML 5 não funciona no Safari e Chrome no Mac
Thayna eu não tenho um Mac aqui para testar, mas a sua tag do video pode ser construída com o source dentro da tag video, o que é mais adequado. Pode ser que assim funcione no Mac..., mas como falei ...
- 66,6mil
1
voto
Copiar <video> com seus respetivos atributos
A cópia do elemento HTML está correta, mas infelizmente você não vai conseguir reproduzir o stream em formato MPEG-DASH diretamente pela tag video do HTML5. No caso, o dash.js é que está fazendo ...
1
voto
Como colocar um vídeo para abrir em fullscreen automaticamente em uma página HTML?
O HTML 5 não fornece nenhuma maneira de fazer um vídeo em tela cheia, mas a especificação em Fullscreen paralela fornece o método requestFullScreen que permite que elementos arbitrários (incluindo ...
- 3.326
1
voto
Como colocar um vídeo para abrir em fullscreen automaticamente em uma página HTML?
Você pode alterar o style do vídeo:
<video id=video autobuffer autoplay="true">
<source src="media_v/video.mp4">
<object type="video/mp4" data="media_v/video.mp4" min-width: 100% ...
1
voto
Aceito
Tag video dentro do Slick
Encontrei uma resposta no SOen que provavelmente soluciona o teu problema, adaptei um pouco a resposta p/ se adequar melhor ao teu contexto.
Sabendo que a url do vídeo está correta, você irá precisar ...
- 5.905
1
voto
Aceito
Problemas com a legenda de vídeos em HTML5
Não existe muito segredo no HTML5, mas a maior parte dos problemas ocorre porque:
O navegador/player do usuário simplesmente não oferece o suporte à legendas, ainda que ofereça suporte à vídeo.
O ...
Wiki da comunidade
Only top scored, non community-wiki answers of a minimum length are eligible
Tags relacionadas
html5-video × 69javascript × 33
html5 × 27
html × 14
video × 12
css × 9
reprodutor-de-video × 8
jquery × 6
css3 × 5
google-chrome × 4
videojs × 3
javascript-eventos × 2
html-select × 2
firefox × 2
html5-audio × 2
cross-browser × 2
php × 1
java × 1
android × 1
asp.net-mvc × 1
node.js × 1
twitter-bootstrap × 1
asp.net-mvc-5 × 1
ios × 1
mobile × 1