14
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 provavelmente nada é feito "na mão" é uma escala muito grande, e muito provavelmente essa API na hora do upload do vídeo gera esse WEBP, assim como o thumbnail de ...
respondida 10/10/18 às 13:07
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
12
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 multiplos arquivos é:
ffmpeg -i "concat:arquivo0.ts|arquivo1.ts|arquivo2.ts|arquivo3.ts" -c copy -hls_list_size 0 nova_playlist.m3u8
Ele gerará um novo arquivo ...
respondida 16/06/17 às 6:56
Daniel
3.15811 medalhas de ouro1717 medalhas de prata3939 medalhas de bronze
5
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. Aparentemente, o Chrome roda .mkv,entretanto não é uma obrigação dos outros navegadores reproduzirem o mesmo arquivo. Tanto que, repentinamente pode desaparecer esse ...
respondida 9/10/17 às 20:28
UzumakiArtanis
9.41566 medalhas de ouro4040 medalhas de prata8787 medalhas de bronze
4
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 por exemplo.
Para verificar se um arquivo existe na internet e é alcançável por quem está navegando em sua página, você pode fazer assim:
Sem felicidade ...
respondida 18/05/16 às 14:50
Garoto de Programa
22,9mil66 medalhas de ouro5454 medalhas de prata115115 medalhas de bronze
4
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 você deve realizar o upload de um video qual quer, o importante aqui é como vamos fazer para enviar um Blob (a sua variavel stream) com um arquivo para o servidor.
...
4
Tente converter o video para mp4 mas desta vez usando o codec H.264
Video H.264
Audio AAC
HTML5 Video Encoding
4
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 type > e troque Auto por Binary
Como na imagem:
Então faça o upload novamente.
respondida 4/08/17 às 18:23
4
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 fundo e não a tela em branco. Tipo assim.
<video id="video-elem" preload="auto" muted="muted" poster="img/sader-poster.jpg">
Repare que eu coloquei muted="...
respondida 13/12/17 às 17:12
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
3
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 works like WebM, comes from. The thing is, in the beginning of a regular mp4-compressed video file, the size of the whole container is defined. Thus we can’t stream ...
respondida 13/12/17 às 16:40
Garoto de Programa
22,9mil66 medalhas de ouro5454 medalhas de prata115115 medalhas de bronze
3
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::-webkit-media-controls-volume-slider
video::-webkit-media-controls-fullscreen-button
Aqui ta a lista completa com mais detalhes: webkit-pseudo-elements
Me ...
respondida 9/03/17 às 12:54
Mathiasfc
5.81911 medalhas de ouro1010 medalhas de prata3030 medalhas de bronze
3
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('video');
var xml = new XMLHttpRequest(); // Objeto XML
xml.open("GET", '/aqui-seu-video'); // Get do vídeo
xml.responseType = "blob"; // Mudando o tipo de ...
respondida 27/12/16 às 20:20
Samir Braga
9.92855 medalhas de ouro2525 medalhas de prata4949 medalhas de bronze
3
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 elemento de conteúdo deve ser mesclado com os elementos abaixo dele no background.
No caso a valor lighten significa que a cor preta quando está sobre um fundo ...
respondida 24/10/18 às 13:58
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
3
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="video/mp4 controls" height="180%"width="100%" autoplay loop muted playsinline id="vid">
</video>
Resumindo, alguns navegadores exigem ...
3
O erro está na escrita de "scr", o certo seria "src".
2
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("player", {
"controls": false,
"autoplay": false, //tirei o autoplay
"preload": "auto",
"width": 750,
...
respondida 31/08/16 às 14:57
Ivan Ferrer
11,9mil33 medalhas de ouro2525 medalhas de prata6868 medalhas de bronze
2
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-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
<video src="http://...
2
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/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" >
//Esse trecho só é executado depois da página ser ...
2
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://www.w3schools.com/TAgs/movie.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
respondida 15/06/18 às 15:13
Netinho Santos
2.31111 medalhas de ouro1010 medalhas de prata1919 medalhas de bronze
2
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 reproduzidos simplesmente pelo HTML, a tag <video> depende dos CODECs instalados na máquina ou que veem com o navegador:
Wiki: CoDec é o acrônimo de ...
respondida 10/10/17 às 17:28
2
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 cookie com o número de acessos e então ficar pegando o resto da divisão do número de acessos pela quantidade de vídeos. E assim você vai saber qual o vídeo que ...
2
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 assinatura WEBVTT. Seus arquivos podem ser validados nesse site.
WEBVTT
1
00:00:26.460 --> 00:00:30.434
Boa noite, senhoras e senhores.
Estamos prestes a ...
respondida 4/02/19 às 19:09
Leandro Angelo
9.19533 medalhas de ouro1919 medalhas de prata3535 medalhas de bronze
1
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.addEventListener("DOMContentLoaded", startCamera)
O outro erro é que a propriedade srcObject não é mais suportada desde Novembro de 2017, então deve usar algo ...
respondida 20/07/18 às 15:52
1
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 aqui não tenho como testar ness plataforma.
Outro detalhe, troque teste trocando o position:absolute por relative, nessa classe .wrap > .bg-video { position: ...
respondida 10/05/18 às 21:01
hugocsl
64,3mil1414 medalhas de ouro5353 medalhas de prata119119 medalhas de bronze
1
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 download dos segmentos do stream, realizando o demuxing e delegando cada stream (audio, video) para a tag video através do MSE (Media Source Extensions).
Sendo ...
1
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 elementos ) sejam criados em tela cheia.
Possui suporte experimental em vários navegadores.
Ou seja, você pode usar esta função arbitraria mas deve ficar atento, ...
respondida 26/10/17 às 23:10
Luiz Santos
3.16811 medalhas de ouro77 medalhas de prata2828 medalhas de bronze
1
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% min-height: 100%">
</object>
</video>
1
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 de dois eventos para sincronizar o slider com o vídeo.
Quando chegar no slide do vídeo, pausa o slider e da play no vídeo:
$('.comercial').on('afterChange', ...
respondida 30/08/17 às 14:23
Mathiasfc
5.81911 medalhas de ouro1010 medalhas de prata3030 medalhas de bronze
1
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 link para o src está errado, tente baixar manualmente pelo endereço indicado para ver o que aparece. Curiosamente o seu é filmes/leghe da.vtt.
O arquivo VTT de ...
Apenas as respostas wiki não pertencentes à comunidade mais votadas e de um tamanho mínimo se qualificam
Tags relacionadas
html5-video × 63javascript × 29
html5 × 25
video × 12
html × 10
css × 8
reprodutor-de-video × 7
jquery × 6
css3 × 5
google-chrome × 4
videojs × 3
html-select × 2
firefox × 2
html5-audio × 2
cross-browser × 2
php × 1
java × 1
android × 1
asp.net-mvc × 1
ajax × 1
node.js × 1
twitter-bootstrap × 1
asp.net-mvc-5 × 1
ios × 1
apache-cordova × 1