javascript - 在手机和平​​板电脑的 Iframe 上自动播放的解决方法

Question

是否有任何 CSS(或任何东西)我可以添加到我的媒体查询中以识别视频正在播放的设备？当视频试图在任何不允许自动播放的设备上播放时，我希望在我的网站上显示一个播放按钮。让我知道您的想法，我的网站已上线并发布在http://www.rosemont.edu/admissionstest

Javascript 隐藏按钮:

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

  }
});

Answer 1

我不认为有一个干净的 css 解决方案。有个相关问题here

也许你可以默认显示播放按钮并在媒体元素的播放事件(不是播放事件，而是播放)被触发时隐藏它？如果您向它添加转换，它不会为支持自动播放的设备闪烁。

有点像

var video = document.getElementsByTagName("video")[0];
video.addEventListener("playing", function() {
  // Hide or fade out the initial play button
});