如何制作仅含全屏按钮的视频？解决WP视频短代码Chrome兼容问题

使用WordPress的[video]短代码实现循环自动播放视频时，视频在Firefox中可正常运行，但在Chrome中无法播放。

原代码如下：

<div class="fullscreen-button-only">
[video mp4="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-still-life.mp4" poster="" muted="true" loop="true" autoplay="true"]
</div>

外层div用于添加CSS类，实现隐藏除全屏按钮外的所有控件，全屏按钮仅在鼠标悬停视频时显示。

改用原生<video>标签可在Chrome中正常运行，但难以实现仅显示全屏按钮的效果：

<div class="fullscreen-button-only">
<video src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-still-life.mp4" preload="true" autoplay="true" muted="true" loop="true" playsinline width="100%" poster=""></video>
</div>

需求：找到能让WordPress原生[video]短代码实现循环+自动播放的方案，或实现既能跨浏览器正常自动播放循环、又仅显示全屏按钮的替代方案。

以下是实现仅含全屏按钮、且支持跨浏览器循环自动播放的视频方案，基于VC.One的代码修改优化而来：

HTML代码 #

<div id="animatedgif_1" class="fx_fadeIn" style="position: relative; width: 100%; text-indent: 0px; ">
  <video class="centrer-verticalement" width="100%" style="" muted playsinline loop autoplay>
    <source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-wish.mp4" type="video/mp4"></video>
  <div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute;">
    <img id="img_btn_fs" width="40" src="https://i.sstatic.net/dI5kS.png">
  </div>
</div>

&nbsp;

<div id="animatedgif_2" class="fx_fadeIn" style="position: relative; width: 100%; text-indent: 0px; padding-bottom:0em !important; ">
  <video class="centrer-verticalement" width="100%" style="" muted playsinline loop autoplay>
    <source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-hobbit-1280crf.mp4" type="video/mp4"></video>
  <div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute;">
    <img id="img_btn_fs" width="40" src="https://i.sstatic.net/dI5kS.png">
  </div>
</div>

CSS代码 #

.fx_fadeIn img {
  opacity: 0%;
  transition: opacity 0.5s;
}

.fx_fadeIn:hover img {
  opacity: 100%;
  transition: opacity 1s;
}

.centrer-verticalement[style*="background: transparent"]+#btn_fs img {
  opacity: 20%;
  transition: opacity 0.5s;
}

.centrer-verticalement[style*="background: transparent"]+#btn_fs img:hover {
  opacity: 100%;
  transition: opacity 0.5s;
}

.fx_fadeIn .centrer-verticalement[class*="background: none"]+#btn_fs img {
  opacity: 0%;
  transition: opacity 0.5s;
}

.fx_fadeIn:hover .centrer-verticalement[style*="background: none"]+#btn_fs img {
  opacity: 100%;
  transition: opacity 1s;
}

#btn_fs {
  bottom: 1em;
  right: 1em;
}

WordPress专属适配CSS #

WordPress会自动在<video>标签后插入<p>标签，需补充以下CSS适配：

.centrer-verticalement[style*="background: black"]+p+#btn_fs img {
  opacity: 20%;
  transition: opacity 0.5s;
}

.centrer-verticalement[style*="background: black"]+p+#btn_fs img:hover {
  opacity: 100%;
  transition: opacity 0.5s;
}

.fx_fadeIn .centrer-verticalement[class*="background: #010101"]+p+#btn_fs img {
  opacity: 0%;
  transition: opacity 0.5s;
}

.fx_fadeIn:hover .centrer-verticalement[style*="background: #010101"]+p+#btn_fs img {
  opacity: 100%;
  transition: opacity 1s;
}

移动端全屏图标强制显示CSS #

若需在手机、iPad等触摸设备上始终显示全屏图标，添加以下媒体查询代码：

@media only screen and (max-width: 768px) {
  .fx_fadeIn img {
    opacity: 20% !important
  }
}

@media only screen and (hover: none) and (pointer: coarse) {
  .fx_fadeIn img {
    opacity: 20% !important
  }
}

JavaScript代码（更新版） #

var bool_isFullscreen = false;

//# access DIV that is container for [ video + button image ].
var myVideoGIF; //# = document.getElementById("animatedgif");

//# access DIV that is a click "hotspot" to enter fullscreen.
var myBtn_FS; //# = document.getElementById("btn_fs");

//# access IMG for button that will change mode to fullscreen.
//var img_myBtn_FS; //# = document.getElementById("img_btn_fs");

window.addEventListener('fullscreenchange', on_FS_Change, false);

function on_FS_Change(evt) {
  //######################################
  //# detect event for screen mode change
  //#is "null" when page/element is not in Fullscreen
  if (document.fullscreenElement != null) {
    bool_isFullscreen = true;
  }

  //# assume is already in Fullscreen mode
  else {
    bool_isFullscreen = false;
    exit_FullScreen();
  }

}

function go_FullScreen(input) {
  //# NOTE : child elements are in order of appearance in setup
  //# Parent == DIV as container
  //# children[0] == VIDEO tag is first child element
  //# children[1] == DIV for button icon is second child element

  //##############################################################
  //## Get access to the specific clicked item's Parent (container)
  myVideoGIF = document.getElementById(input.parentNode.id);
  myBtn_FS = myVideoGIF.children[1];

  //########################################
  //## Check if screen mode is : Fullscreen
  //## If already Fullscreen then just do the "on exit fullscreen" code 
  //## then quit (RETURN) from this function (ignores rest of code below)
  if (bool_isFullscreen == true) {
    exit_FullScreen(); //# handle on exit fullscreen
    return; //# quit/exit code here...
  }

  //##############################################################
  //## Will continue onto code below if NOT Fullscreen (no return)

  function openFullscreen(elem) {
    //# for most browsers
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    }

    //# for Safari (older versions)
    else if (elem.webkitRequestFullscreen) {
      elem.webkitRequestFullscreen();
    }

    //# for Safari (newer versions)
    else if (elem.webkitEnterFullscreen) {
      elem.webkitEnterFullscreen();
    }

    //# for Safari iPhone (where only the Video tag itself can be fullscreen)
    else if (elem.children[0].webkitEnterFullscreen) {
      elem.children[0].webkitEnterFullscreen();
      //toggle_controls(); //# your own function to show/hide iOS media controls
    }

    //# for Internet Explorer 11
    else if (elem.msRequestFullscreen) {
      elem.msRequestFullscreen();
    }
  }

  openFullscreen(myVideoGIF);

  myVideoGIF.children[0].style.width = "100%"
  myVideoGIF.children[0].style.height = "100%"
  myVideoGIF.children[0].style.background = "black"

  //# set to true (helps "exit_FullScreen" function )
  bool_isFullscreen = true;

}

var videoContainer = document.getElementByClassName('fx_fadeIn');
var video = videoContainer.getElementsByTagName('video');

function toggleVideoFullscreen() {

  if (video.webkitEnterFullScreen) {
    // Toggle fullscreen in Safari for iPad
    video.webkitEnterFullScreen();
  } else {
    // Toggle fullscreen for other OS / Devices / Browsers 
  }
}

function exit_FullScreen() {

  if (bool_isFullscreen == true) {
    bool_isFullscreen = false;

    //#########################################
    //# check IF browser can use this method...
    if (document.exitFullscreen) {
      document.exitFullscreen()
        .then(() => console.log("Document Exited from Full screen mode"))
        .catch((err) => console.error(err));

      myVideoGIF.children[0].style.background = "#010101"

    }

    //## OR ELSE try other browser options

    /* for Safari */
    else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }

    /* for IE11 */
    else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  }

}

备注 #

这些视频在小米浏览器中无法自动播放，属于浏览器自身限制问题，与代码无关。

内容的提问来源于stack exchange，提问作者TB54