CODEWITHSUNDEEP
csshtmlhtml5-videocss-animations
Fernando
Fernando

Reputation: 771

CSS Animations and Video Tag working in certain mobile devices

I have some simple animations and a video tag in my website (I'm showing the code at the end). As you might imagine, on the desktop it works perfectly but not on smart devices. I've tried it in several ones:

  1. Galaxy mini 1: Neither the animations nor the video work, several browsers tried. (Android 2.2)
  2. Huawei G-Ascend 3000: Neither the animations nor the video work, several browsers tried. (Android 4.0.3)
  3. Galaxy Tablet: The animations work, the video is buffered but not played. (Android 4.X, not quite sure which it was, my bad).
  4. Sony Xperia T2: Everything works. (Android 5.0)

To 'simulate' an autoplay on smart-devices, I have a button which plays the video on its onclick event. Anyway, that's another issue. What's my concern is why all this works in some devices and not in others, how can I isolate a rule to say: 'hey, on this device I should not include the animations or the video, or I should one of them but not the other' (or what should I include for compabilities?). I'm specially concerned about the animations.

Thanks in advance.

CSS3 Animation

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-moz-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-o-keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

div {
    animation: fadeIn 1s ease-in-out 11s forwards;
    -webkit-animation: fadeIn 1s ease-in-out 11s forwards;
    -moz-animation: fadeIn 1s ease-in-out 11s forwards;
    -o-animation: fadeIn 1s ease-in-out 11s forwards;
}

HTML5 Video tag

<video  autoplay preload="auto" loop poster="./images/starry_sky.jpg" id="video-background">
    <source src="./videos/time_lapse.webm" type="video/webm">
    <source src="./videos/time_lapse.mp4" type="video/mp4">
    <source src="./videos/time_lapse.ogv" type="video/ogg">
    <img src="./images/starry_sky.jpg">
</video>

UPDATE

Video properties:

1280x680 pixels each frame, 30 fps, 540bps, 13 secs, no sound.

Upvotes: 0

Views: 926

Answers (1)

user4563161
user4563161

Reputation:

Right Firstly the keyframes I cant think of a real viable reason as to why the devices wouldn't like them unless they browsers are not fully supporting CSS3.

You would probably be better just using Jquery/javascript for your fade effect.

Now your video's, Android has had a history of being a mental case with video's.

Some devices prefer .mkv and others prefer .webm you should definitely consider adding a .mkv video to your site.

also remove the type attribute from your videos or at least remove it from the ones you know android is going to use mkv or webm as it gets funny with it I honestly don't have an explanation as to why my guess is its just a bug.

With regards to play you must allways call play for android devices using Jquery or javascript but by the looks of it you have noticed this.

Also encoding on some devices can be a bit mad sometimes devices will not play a video if its not the correct sizes it expects and I think your video is wonky at 1280px width it should have a 720px height to maintain correct aspect ratio some devices wont play videos that don't adhere to the strict codec formats it's probably worth your time checking out the android video encoding guidelines found here http://developer.android.com/guide/appendix/media-formats.html

Upvotes: 1

Related Questions