Question

我可以添加到我的媒体查询中的CSS（或任何内容）可以识别视频正在播放的设备吗？当视频尝试在任何不允许自动播放的设备上播放时，我希望在我的网站上显示播放按钮。让我知道您的想法，我的网站是实时的，并在How does MongoDB avoid the SQL injection mess?

发布

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

针对手机和平板电脑的iframe自动播放的解决方法

1 个答案: