I have a problem with detect of showing poster.
On macbook and iphone the video tag isn't working so well, so I decided to use the poster tag instead.
I have a small jQuery code to change poster dynamically with some fadeout and in effect. But I want to use this effect only when video is not playable.
So I am looking for a solution that helps me to detect if the video is not playable on a device.
UPDATE: canPlayType() isn't a good solution, because the result is "maybe" (almost on every device) for 'video/mp4' but it doesn't play on Safari...
$(document).ready(function() {
//HERE I WANT TO CHECK IF VIDEO NOT PLAYABLE
var poster_array = [
"picture_1", "picture_2", "picture_3", "picture_4"
];
var i = 1;
setInterval(function() {
$("#customcontent8 video").fadeOut(200);
$("#customcontent8 video").promise().done(function() {
$("#customcontent8 video").attr("poster", poster_array[i]).fadeIn(200);
});
i++;
if (i == 4) {
i = 0;
}
}, 7000);
});