0

Is there any CSS (or anything) I can add to my media queries that would recognize what the device the video is playing on? I am looking to have a play button appear on my site when the video attempts to play on any device that does not allow auto play. Let me know your thoughts, my site is live and published at http://www.rosemont.edu/admissionstest

Javascript to hide button:

var supports_video_autoplay = function(callback) {

  var v = document.createElement("video");
  v.paused = true;
  var p = "play" in v && v.play();

  typeof callback === "function" && callback(!v.paused || "Promise" in window && p instanceof Promise);

};

// usage
supports_video_autoplay(function(supported) {
  if (supported) {
    // video autoplay supported!
  document.getElementById("Playing1").style.display = "none";
  } else {
    // no video autoplay support :(
    document.getElementById("playing1")

  }
});
Rob
  • 11
  • 4

1 Answers1

0

I don't think there is a clean css solution for this. There is a related question here

Maybe you could display the play button by default and hide it when the media element's playing event(not the play event, but playing) is triggered? If you add transitions to it it won't blink for devices that has auto-play support.

Something like

var video = document.getElementsByTagName("video")[0];
video.addEventListener("playing", function() {
  // Hide or fade out the initial play button
});
Almonds
  • 13
  • 3
  • Would that script work for a Youtube video also? IF no, how would I change things up to do that? This type of code is over my head! I apologize for all the questions. – Rob Mar 14 '18 at 01:09
  • @Rob it won't work for YouTube as far as I know. Are you using YouTube for all videos where this question is relevant? If yes, I'll see if I get the time to draft a full example using a YouTube video. – Almonds Mar 14 '18 at 07:40
  • I decided to move all of my videos to videos hosted on our site. so I am now using the video tag. Trying to get to work like: If autoplay works, great! If not, provide a button that the user will be able to pause and play. I have attached some Javascript that I am using to have the button display or not. – Rob Mar 14 '18 at 12:31