Question

当视频在视口中部分可见时，我尝试自动播放，并且与视频完全隐藏后一样，我想停止播放。到目前为止，它仅在窗口滚动中可以正常工作。

问题是，当视频在页面加载的查看端口上完全可见时，视频无法播放，有人可以建议出什么问题吗？

因此以下代码无法正常工作：-

videojs("myPlayerID").ready(function() {
  var myPlayer = this;

  window.onscroll = checkIfVideoInView;

  function checkIfVideoInView() {
    if (isScrolledIntoView(myPlayerID)) {
      myPlayer.play();
    } else {
      myPlayer.pause();
    }
  }

  function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return (
      elemBottom > docViewTop &&
      elemTop < docViewBottom
    );
  } 
});

Codepen网址：-

https://codepen.io/burner/pen/bxbzmR

Answer 1

使用window.onload = checkIfVideoInView，它将尝试在加载时开始播放。某些浏览器（例如Chrome）要求用户与文档进行交互，然后才能播放带有声音的视频。这意味着要使自动播放在所有情况下都能正常工作，您还需要向视频html标签添加muted属性。

  <video id="myPlayerID" muted ...></video>

https://codepen.io/theaos/pen/BOBggq

在视口中可见时无法播放视频？

1 个答案: