Video Tag Android Phone

Timsen

Ein freundliches "Hallo" an alle,

ich bin am Verzweifeln... folgender code:

HTML

<video class="hide-in-ie8" controls="true" height="" width="100%">                 
<source src="video/beipiel.theora.ogv" type="video/ogg" />
<source src="video/beipiel.m4v" type="video/mp4" /> 
<source src="video/beipiel.mp4" type="video/mp4" /> 
<source src="video/beipiel.webm" type="video/webm" />
</video>

Das Video funktioniert in allen Browsern auf dem PC, jedoch auf meinen Android Endgeräten nur im Firefox.
Wie bekomme ich das Video auch im "Chrome Mobile" und den Standard IE von Android zum laufen?
Ich bin für alle Vorschläge sehr dankbar!

LG Timsen

explanator

Zeige mal den gesamten Code der Seite inklusive deinem Doctype.

Timsen

HTML

<!doctype html>
<html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"><style type="text/css">@import url(css/ie8.css);</style> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<!--[if gte IE 9]>       <style type="text/css"> .gradient {filter: none;}</style><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>test</title>
<meta name="description" content="test"/>
<meta name="viewport" content="width=device-width">    
    <link rel="SHORTCUT ICON" href="icon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">  
    <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>                               
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/script.js"></script>
</head>




<body>
    <div id="fb-root"></div>
    <script>
        (function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
    <div id="container">
        <header> 
            <a href="index.html"><img src="css/logo.png" id="logo"></a>
                <nav>
                    <ul id="navMain">
                        <li><a href="index.html">Startseite</a></li>
                        <li><a href="vita.html">Vita</a></li>
                        <li><a href="videos.html">Videos</a></li>
                        <li><a href="kontakt.php">Kontakt</a></li>
                        <li><a href="impressum.html">Impressum</a></li>
                    </ul>
                </nav>
        </header>
        <div id="content">    
        <img src="css/test.jpg" id="headerpic">
                <video class="hide-in-ie8" controls="true" height="" width="100%"> 
                <source src="video/beispiel.m4v" type="video/mp4" /> 
                <source src="video/beispiel.mp4" type="video/mp4" /> 
                <source src="video/beispiel.theora.ogv" type="video/ogg" />
                <source src="video/beispiel.webm" type="video/webm" />
                </video> 
                <!--[if lt IE 9]>
                <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" 
                      codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
                      height="480" type="application/x-shockwave-flash" width="640">
                   <param name="movie" value="player.swf" />
                   <param name="flashvars" value="file=video/beispiel.flv" />
                   <param name="allowfullscreen" value="true" /> 
                   <param name="allowscriptaccess" value="always" />
                   <img src="myvideo.png" alt="Alternatives Bild" width="639" height="452" /></a>
                </object>
                <![endif]-->
        </div>

<footer>
        <div id="f-container">
            <section>
                <br />Navigation:</br><br />
                <a class="blacklink" href="beispiel.html"><i class="fa fa-arrow-right"></i> Startseite</a><br />
                <a class="blacklink" href="beispiel.html"><i class="fa fa-arrow-right"></i> Vita</a><br />
                <a class="blacklink" href="beispiel.html"><i class="fa fa-arrow-right"></i> Videos</a><br />    
                <a class="blacklink" href="beispiel.html"><i class="fa fa-arrow-right"></i> Kontakt</a><br />    
                <a class="blacklink" href="beispiel.html"><i class="fa fa-arrow-right"></i> Impressum</a>                                
            </section>
            <section>
            </section>
            <section>
                <br />"Like" uns auf Facebook:<br />
                <div class="fb-like" data-href="https://www.facebook.com/beispiel" data-width="150" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>
                <br /><br />&copy; <a class="blacklink" href="beispiel">beispiel<br />beispiel</a>    
            </section>
        </div>
    </footer>
    </div>








</body>
</html>

Alles anzeigen

explanator

Du solltest nur ein mp4 video haben und das sollte das Format H.264 haben. Check das mal.

Die Angabe beim Video-Element von width und height ist falsch. Das müssen Pixel-Angaben sein.

Die Angabe des Attributs controls="true" ist falsch.

Beispiel

HTML

<video class="hide-in-ie8" controls="controls" height="480" width="600">

siehe http://www.w3.org/TR/html-markup/video.html

Diese Zeile ist auch falsch

HTML

<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

muss so lauten

HTML

<!--[if gt IE 8]> <html class="no-js"> <![endif]-->

Timsen

Hilft leider alles nicht. Aber danke für die Fehlermeldungen.
Das Video habe ich jetzt noch einmal neu bearbeitet: 480x320 / h264 / mp4 / AAC
und den Code jetzt mal total minimiert:

HTML

<!doctype html>
<html>
<head>
</head>
<body>    
<video controls="controls" height="480" width="320">         
<source src="bigbuck.mp4" type="video/mp4" />     
</video> 
</body>    
</html>

Hier kannst du es mal testen, bei mir geht es nicht auf Chrome unter Android:
http://www.tian-music.de/home2/videos2.html

Benutzer und Passwort: test

Vielleicht hast du noch eine Idee?

LG

explanator

Ist das Video nicht vorhanden? Es sollte hier sein http://www.tian-music.de/home2/bigbuck.mp4
Irgendwas stimmt mit der Datei nicht.
Nimm mal einen anderen Converter, zum Beispiel http://www.xmedia-recode.de/

Timsen

Habe das Video nochmal neu gemacht. Und der Pfad stimmt natürlich auch, es geht ja auf dem PC (natürlich nur auf Chrome und Safari, da *.mp4)
Es geht trotzdem nicht auf Adroid Geräten mit Chrome!

Kannst du mir vielleicht ein 3-5 sec Video schicken, was auf jeden Fall gehen sollte?
Wenn das dann nicht geht kann es ja vielleicht noch am Server liegen oder?
Hab da irgendwas über MIME Typen gelesen.

LG

explanator

Also das Video startet bei mir nicht.

Hier mal dein Response Header vom Server.

Code

Status=OK - 200
Date=Fri, 14 Mar 2014 13:19:53 GMT
Content-Type=video/mp4
Content-Length=2506183
Connection=keep-alive
Last-Modified=Fri, 14 Mar 2014 11:51:51 GMT
Etag="82552cd1-263dc7-4f48fb21036b4"
Accept-Ranges=bytes
Server=UD Webspace 3.0

Wie du siehst ist der Mime-Type korrekt und auch die Länge wird angegeben, dennoch startet das Video nicht auch nicht im VLC-Media-Plugin.

Vielleicht mal beim Hoster nachfragen, kann ja sein das da was falsch ist.

Timsen

Ist ja unglaublich!

Habe bei meinem Hoster angerufen: Der sagte mir es könnte an der htaccess liegen, die den Bereich schützt. Und so ist es auch... ( hab sie entfernt )
Es wäre von Anfang an gegangen, auch mit width="100%" - soll ja responsive sein.

Aber vielen lieben Dank für deine Hilfe, hätte sonst nie beim Hoster angerufen!

LG

Tags