web-dev-qa-db-fra.com

Comment faire fonctionner une vidéo HTML5 avec IE10

J'espère que quelqu'un aura une idée de ce que je peux faire pour m'aider à lire des vidéos HTML5 sur mon intranet local.

Mon serveur Web = Windows Server 2008 R2 Standard 64 bits Version IIS = IIS7

Environnement utilisateur de test = Windows 7 Enterprise

La vidéo se lit parfaitement à l'aide de "Google Chrome" 

La vidéo ne parvient pas à lire avec "IE10"

Mon code html est le suivant:

<!DOCTYPE html>
<html>
    <body>
        <video src="AccReadings.mp4" width="400" height="300" preload controls>
        </video>
    </body>
</html>

Ma machine de test utilisant IE10 lit HTML5Rocks video ' http://craftymind.com/factory/html5video/CanvasVideo.html '

Cordialement,

Chris

windows-7iis-7html5-videowindows-server-2008-r2internet-explorer-10
12
user2211781

Assurez-vous que le serveur Web utilise un type MIME video/mp4 pour .mp4. J'ai accidentellement paramétré le fichier .mp4 pour utiliser le type MIME video/mpeg. La vidéo est lue dans Chrome mais pas dans IE11.

Vous devez également vous assurer que la vidéo utilise le codec vidéo H264 et le codec audio AAC. 

11
Adamy

Je viens d'avoir un problème similaire, mon propre site HTML5 ne fonctionnait pas du tout. Aucun message d'erreur juste vide.

La raison en était Windows 7 N (UE - pas de lecteur multimédia).

Après l’installation du Windows Media Player , ceci (ainsi que d’autres problèmes) est corrigé . J'espère que cela vous aidera :)

9
Rafal Powierski

Pour une raison quelconque, il ne semble pas que cela fonctionne dans Win7 + IE10. Tout le reste a l'air bien. Testé par rapport aux pages suivantes, qui incluent ie.Microsoft.com test.

http://ie.Microsoft.com/testdrive/graphics/videoformatsupport/default.htmlhttp://www.w3.org/2010/05/video/mediaevents.html

Win7 IE9 - OK

Win7 IE10 - Nope

Win8 IE10 - OK

Win7 IE11 - OK

Win8 IE11 - OK

Captures d'écran de BrowserStack pour la page de test MS . http://www.browserstack.com/screenshots/9083c865675d0821ee8b1030a43f5bd36bff469

3
greg.kindel

Peut-être avez-vous un problème de pilote de carte vidéo mentionné dans Impossible de lire la vidéo HTML5 IE10 ni la vidéo des applications d'interface utilisateur moderne .

Désactivez le rendu GPU dans IE en tant que:

Options Internet> Avancé> Graphiques accélérés> Utiliser le rendu logiciel au lieu du rendu GPU

Et voir si ça marche.

1
Mohsenme

Je n'ai pas installé IE10, cependant, selon caniuseit , mp4 est pris en charge dans IE9 et 10 .

Le code HTML ci-dessous fonctionne pour IE9 et Chrome. Notez que votre fichier vidéo doit se trouver dans le même dossier que votre page HTML sur le serveur (dans cet exemple).

<!DOCTYPE html>
<html>
    <body>
        <video src="abc.mp4" width="640" height="480" preload controls></video>
    </body>
</html>

Edit: J'ai installé IE10 et je peux également confirmer que cela fonctionne.

Edit: Étant donné que Firefox ne prend pas en charge mp4 et que les anciens navigateurs ne prennent pas en charge la vidéo de manière native, il est préférable de fournir plusieurs sources (formats) et de recourir à un lecteur flash.

<!DOCTYPE html>
<html>
    <body>
        <video width="640" height="480" preload controls>
            <!-- mp4 supported by Chrome & IE9/10 -->
            <source src="abc.mp4" type="video/mp4"></source>
            <!-- webm supported by Firefox -->
            <source src="abc.webm" type="video/webm"></source>

            <!-- last element in video is fall back for native video support, usually a flash player -->
            <object type="application/x-shockwave-flash ...>
                <!-- last element flash player is usual fall back for flash support, usually some "not supported text" -->
                <div>
                Your browser does not natively support flash and you do not have flast installed.
            </div>
            </object>
        </video>
    </body>
</html>
1
Graham King

J'ai eu beaucoup de problèmes avec IE10 lors de la lecture de vidéos html5 . La dernière chose que j'ai vérifiée était le bon oe: les vidéos étaient compressées au format gzip . Vérifiez la configuration de votre serveur !!!

EDIT: Pour savoir si vos vidéos sont compressées par le serveur, utilisez un renifleur de proxy réseau tel que Charles par exemple, ou même le débogueur d’IE et vérifiez l’en-tête de la réponse à la demande de fichier vidéo. Si vous trouvez Content-Encoding:gzip, alors vous devriez vérifier la configuration de votre serveur . Dans mon cas, je devais désactiver la compression gzip sur les fichiers vidéo de mon fichier .htaccess.

0
Armel Larcier

C'est le code que j'utilise pour mes vidéos html5:

<div>
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="none" width="auto" height="auto"
poster="path/to/image.png"
data-setup='{"example_option":true, "autoplay": true}'>
    <source src="path/to/video.ogv" type='video/ogg' />
    <source src="path/to/video.webm" type='video/webm' />
    <source src="path/to/video.mp4" type='video/mp4' />
    <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
    <object class="vjs-flash-fallback" width="640" height="360" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":["path/to/image.png", {"url": "path/to/video.flv","autoPlay":false,"autoBuffering":true}]}' />
        <!-- Image Fallback. Typically the same as the poster image. -->
        <img src="path/to/image.png" width="640" height="264" alt="Poster Image" title="No video playback capabilities." />
    </object>
</video>

Cela devrait fonctionner sur tous les appareils/navigateurs. J'ai appelé les wideos dans cet ordre spécifique pour permettre aux navigateurs modernes de les charger plus rapidement (chrome peut jouer à ogg/webm/mp4 - à partir du test de mes vidéos, ogg/webm semble se charger plus rapidement que mp4 afin de réduire les temps de mise en mémoire tampon) 

0
mcneela86

J'ai eu exactement le même problème. Ma résolution originale de la vidéo était 1920x1200. Semble que IE10 a des problèmes avec ça. Les premiers tests avec des vidéos de résolution inférieure ont résolu le problème.

0
Nico M