如何仅在视频可见且全宽时再现视频？

问题描述

我的意思是，我需要在我的网站上放一个视频，它只能在可见时播放，因为视频位于页面中间，我不想在用户位于顶部时播放。我还希望它以全宽播放，以便覆盖整个屏幕。这是我的问题。我设法分开做，但不知道为什么我不能同时做。代码如下：

在可见时播放：

<!DOCTYPE html>
<html>
    <head>
        <title>Video1</title>
        <style>

video{
  max-width: 100%;
}
</style>
</head>
<body>
       <video width= auto>
    <source src="https://www.youtube.com/embed/L7OLY4HCctQ" type='video/mp4' />
</video>

 
<script>
    let options = {
  rootMargin: '0px',threshold: 1.0
}

var ob = new IntersectionObserver((entries,observer) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      entry.target.pause();
    } else {
      entry.target.play();
    }
  });
  
},options);

document.querySelectorAll('video').forEach((item) => {
  ob.observe(item);
});
</script>
</body>

然后我有基本上是css的全宽代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Video</title>
        <style>
        
/* Hide the video on mobile */
.video-container {
  display: none;
  pointer-events: none;
}

/* At everything bigger than mobile,make .video-container fill its parent */
@media (min-width: 768px) {
  .video.full-width {
    height: 450px;
  }

  .video-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .video-container > iframe {
    flex: 0 0 auto;
    max-width: none;
  }
}
</style>
<body>
    <div class="video full-width">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/L7OLY4HCctQ" type='video/mp4' "></iframe>
  </div>
</div>
</body>

如果“在可见时播放基本上是javascript，而“播放全宽”基本上是css，为什么我不能将它们组合起来？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

full-width javascript video video visible

如何仅在视频可见且全宽时再现视频？

问题描述

解决方法

相关问答