O vídeo HTML5 não será reproduzido apenas no Chrome

Question

algum histórico

Testei meu vídeo no FF e no Safari (incluindo iDevices) e ele é reproduzido corretamente, mas não no navegador Chrome.Como você pode ver no código abaixo, criei arquivos mp4, m4v, webM e ogv e testei todos eles em meu computador para detectar quaisquer problemas de reprodução.

os sintomas/problema

No Chrome, o vídeo parece carregar e há sem erros no log do console.Quando o botão play é pressionado, ele carrega uma parte do arquivo, mas não o reproduz.No entanto, curiosamente, se eu clicar arbitrariamente em um momento posterior na barra de tempo, digamos, na metade, serão reproduzidos cerca de 5 segundos do vídeo, mesmo com as legendas, mas não áudio.

minha pesquisa

Eu li sobre quaisquer problemas que possam estar causando isso, mas não encontrei nenhuma ideia que funcione.Para observar, escrevi o seguinte em meu arquivo .htaccess:

# ----------------------------------------------------------------------
# Proper MIME type for all files
# ----------------------------------------------------------------------

# Audio
AddType audio/ogg                      oga ogg
AddType audio/mp4                      m4a
AddType audio/webm                     webm

# Video
AddType video/ogg                      ogv
AddType video/mp4                      mp4 m4v
AddType video/webm                     webm

# Assorted types
AddType image/x-icon                        ico
AddType image/webp                          webp
AddType text/cache-manifest                 appcache manifest
AddType text/x-component                    htc
AddType application/x-chrome-extension      crx
AddType application/x-opera-extension       oex
AddType application/x-xpinstall             xpi
AddType application/octet-stream            safariextz
AddType application/x-web-app-manifest+json webapp
AddType text/x-vcard                        vcf
AddType text/plain                          srt

Além disso, estou usando a biblioteca mediaelement.js.

o código

Aqui está o HTML:

<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
      <!-- M4V for Apple -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" />
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" />
      <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
      <source type="video/webm" src="assets/vid/PhysicsEtoys.webm" />
      <!-- Ogg/Vorbis for older Firefox and Opera versions -->
      <source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" />
      <!-- Subtitles -->
      <track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" />
      <track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" />
      <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
      <object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf">
          <param name="movie" value="flashmediaelement.swf" />
          <param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" />
          <!-- Image as a last resort -->
          <img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playback capabilities" />
      </object>
</video>

Aqui está o js simples:

$('video,audio').mediaelementplayer({
    features: ['playpause','progress','current','tracks','volume'],
    startLanguage: 'en'
});

Alguma ideia?

Obrigado por toda e qualquer ajuda neste assunto!

Answer 1

Com a ajuda de outra pessoa, descobrimos que era um problema de ordenação dos arquivos de origem dentro do arquivo HTML.Aprendi que os navegadores aceitam o primeiro formato utilizável e parece haver um problema com o arquivo .m4v, então comecei com .mp4 e depois .webm.Esta é a ordem que funciona no Safari (até no meu iPhone 5), Firefox, e cromo:

<video width="100%" height="400" poster="assets/img/myVideo.jpg" controls="controls" preload="none">
      <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.mp4" />
      <!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
      <source type="video/webm" src="assets/vid/PhysicsEtoys.webm" />
       <!-- M4V for Apple -->
      <source type="video/mp4" src="assets/vid/PhysicsEtoys.m4v" />
      <!-- Ogg/Vorbis for older Firefox and Opera versions -->
      <source type="video/ogg" src="assets/vid/PhysicsEtoys.ogv" />
      <!-- Subtitles -->
      <track kind="subtitles" src="assets/vid/subtitles.srt" srclang="en" />
      <track kind="subtitles" src="assets/vid/subtitles.vtt" srclang="en" />
      <!-- Flash fallback for non-HTML5 browsers without JavaScript -->
      <object width="100%" height="400" type="application/x-shockwave-flash" data="flashmediaelement.swf">
          <param name="movie" value="flashmediaelement.swf" />
          <param name="flashvars" value="controls=true&file=assets/vid/PhysicsEtoys.mp4" />
          <!-- Image as a last resort -->
          <img src="assets/img/myVideo.jpg" width="320" height="240" title="No video playback capabilities" />
      </object>
  </video>

Agora, terei que verificar novamente a codificação no arquivo m4v (talvez um problema de Baseline vs Main, High, etc.).

Answer 2

Experimente isso

<video autoplay loop id="video-background" muted plays-inline>
            <source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
            </video>

Obrigado

Answer 3

Eu tive um problema semelhante: nenhum vídeo era reproduzido no Chrome.Tentei instalar o beta de 64 bits, voltando ao lançamento do Chrome de 32 bits.

A única coisa que funcionou para mim foi atualizando meus drivers de vídeo.

Eu tenho a NVIDIA GTS 240.Baixei, instalei os drivers e reiniciei e o Chrome 38.0.2125.77 beta-m (64 bits) voltou a reproduzir vídeos HTML5 no youtube, vimeo e outros.Espero que isso ajude mais alguém.

Answer 4

Você já tentou definir o tipo MIME do seu .m4v para "video/m4v" ou "video/x-m4v"?

Os navegadores podem usar o canPlayType método internamente para verificar se um <source> é candidato à reprodução.

No Chrome, tenho estes resultados:

document.createElement("video").canPlayType("video/mp4"); // "maybe"
document.createElement("video").canPlayType("video/m4v"); // ""
document.createElement("video").canPlayType("video/x-m4v"); // "maybe"

Answer 5

Para todos vocês que chegaram aqui e não encontraram a solução certa, descobri que o vídeo MP4 precisa se ajustar a um formato específico.

Meu problema é que recebi um vídeo de 1920x1080 que não carrega no Chrome (no Firefox funcionou perfeitamente).Depois de horas de pesquisa, finalmente consegui resolver o problema, os primeiros streams eram 1912x1088, então o Chrome não reproduz (obtive o tamanho exato do stream na ferramenta Informações de mídia).Então, para consertar, apenas redimensionei para 1920x1080 e funcionou.