Recentemente, eu estava escrevendo uma função de reprodução de vídeo em grade de 9 quadrados que precisa ser reproduzida automaticamente, mas encontrei um problema. Alguns navegadores proíbem a reprodução automática de vídeos com áudio. Mesmo que alguns possam ser reproduzidos automaticamente, o vídeo não será reproduzido automaticamente depois a página é atualizada. .
Procurei informações posteriormente e descobri que como a reprodução de vídeo com áudio é proibida, basta silenciar o vídeo.
O vídeo tem um atributo silenciado que indica se ele deve ser reproduzido silenciosamente. A configuração muted=muted o reproduzirá automaticamente. Ele será reproduzido automaticamente independentemente do navegador ou da atualização.
Outra forma é usar js para monitorar e executar o método play().
Se quiser que o som seja reproduzido, você pode primeiro silenciá-lo e depois definir o volume após 500
<video
width="100%"
height="100%"
:src="video.videoUrl"
:poster="video.liveVideoThumbnail"
autoplay
muted
>Renderizações anexadas
Há também um problema de layout de estilo aqui. A tag de vídeo tem largura e altura que podem ser definidas. Geralmente, o vídeo é agrupado em um contêiner. Se o vídeo estiver definido para 100% de largura e altura, o vídeo exibirá automaticamente a imagem completa conteúdo de vídeo em uma proporção de 16:9.
O vídeo também tem um atributo, object-fit:contain. O padrão é contains, o que significa que o vídeo é adaptável no contêiner. Você também pode definir object-fit:cover. Se quiser que ele seja totalmente coberto, é object -ajuste:preencher.
Você pode simplesmente definir a largura do vídeo e, em seguida, tornar a altura do vídeo adaptável
Função de captura de tela de vídeo
const myVideo=document.getElementById("video1");
const canvas = document.getElementById('canvas')
// can.width = myVideo.offsetWidth
canvas.width = Math.ceil(myVideo.offsetHeight /9) * 16 // 获取视频画面的真实宽度
canvas.height = myVideo.offsetHeight
canvas.getContext('2d').drawImage(myVideo, 0, 0, can.width, can.height)
let img = canvas.toDataURL('image/png', 1.0)
document.getElementById("img").src = img