0

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);

});
  • does checking the `canplay` event help (would only fire once loaded and ready) https://www.w3.org/2010/05/video/mediaevents.html – Offbeatmammal Feb 03 '23 at 03:32

0 Answers0