CODEWITHSUNDEEP
htmlvideo
Fernando
Fernando

Reputation: 771

HTML5 video not working on mobile phone

I'm trying to get a HTML5 video working on my web. On the desktop it works perfectly but it doesn't happen the same with my mobile phone. Instead, it appears the typical video-like image to show it's supposed to be a video there but wasn't loaded. I used EasyHTML5Video to convert my video to several different formats and according to this SW, it should be compatible with lots of platforms... After the conversion, it gives you some code to use, which I modified to adapt the paths and the style.

My mobile phone uses Android 4.0.

HTML

<video id="video-background" preload="auto" autoplay="autoplay" poster="./images/starry_sky.jpg" loop="loop">
    <source src="./videos/time_lapse.m4v" type="video/mp4" />
    <source src="./videos/time_lapse.webm" type="video/webm" />
    <source src="./videos/time_lapse.ogv" type="video/ogg" />
    <source src="./videos/time_lapse.mp4" />
    <object type="application/x-shockwave-flash" data="./videos/flashfox.swf">
        <param name="movie" value="./videos/flashfox.swf" />
        <param name="allowFullScreen" value="false" />
        <param name="flashVars" value="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=false&loop=true&poster=./images/starry_sky.jpg&src=time_lapse.m4v" />
        <embed src="./videos/flashfox.swf" flashVars="autoplay=true&controls=false&fullScreenEnabled=false&posterOnEnd=false&loop=true&poster=./images/starry_sky.jpg&src=./videos/time_lapse.m4v"  allowFullScreen="false" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
        <img alt="time_lapse" src="./images/starry_sky.jpg"/>
    </object>
</video>

Edit

I've tried to open it with the default browser. When I tried with Google Chrome the image inside the object tag was loaded but still not the video.

Upvotes: 0

Views: 4062

Answers (1)

herrbischoff
herrbischoff

Reputation: 3326

According to this (rather old) post, you might need to add the following JavaScript code to make playback work on Android:

function myOnload() {
  var ua = navigator.userAgent;
  if (typeof ua != “undefined” && ua.match(/Android.* 2\.[0 – 2](\.[0 – 9]+)*[^.0 – 9]/i) !== null) {
    var vid = document.getElementById(“video”);
    vid.addEventListener(“click”, function() {
      vid.play();
    }, false);
  }
}
window.onload = myOnload;

Also, according to this SO question, you may need to write the video tag like this:

<video class="video" poster="/assets/video/posters/example.jpg" controls width="768" height="432" preload="none">
  <source src="/assets/video/example.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
  <source src="/assets/video/example.ogv" type='video/ogg; codecs="theora, vorbis"' />
</video>

Upvotes: 0

Related Questions