web-dev-qa-db-fra.com

La vidéo HTML5 ne sera pas lue dans Chrome uniquement

quelques antécédents

J'ai testé ma vidéo dans FF et Safari (y compris les iDevices) et elle fonctionne correctement, mais elle ne sera pas lue dans le navigateur Chrome. Comme vous pouvez le voir dans le code ci-dessous, j'ai créé des fichiers mp4, m4v, webM et ogv, et je les ai tous testés sur mon ordinateur pour tout problème de lecture.

les symptômes/problèmes

Dans Chrome, la vidéo semble se charger, et il y a aucune erreur dans le journal de la console. Lorsque le bouton de lecture est enfoncé, il charge une partie du fichier, mais ne le lit pas. Pourtant, fait intéressant, si je clique arbitrairement sur une date ultérieure dans la barre de temps, disons environ à mi-parcours, il jouera environ 5 secondes de la vidéo même avec les sous-titres, mais non l'audio.

ma recherche

J'ai lu tous les problèmes qui pourraient être à l'origine de cela, mais je n'ai trouvé aucune idée qui fonctionne. Pour noter, j'ai écrit ce qui suit dans mon fichier .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

J'utilise également la bibliothèque mediaelement.js.

le code

Voici le 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>

Voici les js simples:

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

Des idées?

Merci pour toute aide à ce sujet!

html5google-chromehtml5-videomediaelement.js
21
Chris Lindgren

Avec l'aide d'une autre personne, nous avons compris qu'il s'agissait d'un problème de commande des fichiers source dans le fichier HTML. J'ai appris que les navigateurs acceptent le premier format utilisable, et leur semble être un problème avec le fichier .m4v, j'ai donc commencé avec le .mp4, puis .webm. Voici l'ordre qui fonctionne dans Safari (même sur mon iPhone 5), Firefox, et Chrome:

<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>

Maintenant, je vais devoir revérifier l'encodage sur le fichier m4v (peut-être un problème de Baseline vs Main, High, etc.).

18
Chris Lindgren

Essaye ça

<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>

Merci

1
subindas pm

J'ai eu un problème similaire, aucune vidéo ne pouvait être lue dans Chrome. J'ai essayé d'installer la version bêta 64 bits, pour revenir à Chrome version 32 bits.

La seule chose qui a fonctionné pour moi était mise à jour de mes pilotes vidéo.

J'ai le NVIDIA GTS 240. Téléchargé, installé les pilotes et redémarré et Chrome 38.0.2125.77 beta-m (64 bits) recommencer à lire des vidéos HTML5 sur youtube, vimeo et autres. aide quelqu'un d'autre.

1
idreamincode

Avez-vous essayé de définir le type MIME de votre .m4v sur "video/m4v" ou "video/x-m4v"?

Les navigateurs peuvent utiliser la méthode canPlayType en interne pour vérifier si un <source> est candidat à la lecture.

Dans Chrome, j'ai ces résultats:

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