css 重新创建YouTube的内联滚动功能

55ooxyrt 于 2023-11-19 发布在其他

关注(0)|答案(1)|浏览(203)

下面是一个包含一些视频的HTML代码片段。视频有控件，但你必须点击它们才能开始播放。我不喜欢点击。因此，我希望屏幕上的视频自动开始播放，而不需要用户点击它。视频必须在用户向上或向下滚动时停止播放，这会导致屏幕上出现的新视频开始播放。当用户滚动离开时，视频必须停止，（已经取代了旧视频的地方）必须开始播放.这是我想要的.如果你不明白我的意思，只需在您的移动的上打开YouTube并向下滚动主页一段时间。您将看到视频自动开始播放并在您滚动其主页时停止。在下面给出的片段中必须创建相同的效果。
注意事项：屏幕上同时有大约3个视频。这三个视频不能一起播放。位于中心或占据屏幕最大空间的视频应该自动开始播放（就像YouTube移动的应用程序一样）
此功能在PC的YouTube网站上不起作用。在那里，开始播放的唯一视频是用户悬停的视频，一旦用户将鼠标指针移开，缩略图就会再次显示。（我可能会使用poster属性向此视频添加缩略图）
这就是

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <video src="/Main/images/squirrel_on_a_wood (1080p).mp4" controls playsinline></video>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <video src="/Main/images/squirrel_on_a_wood (1080p).mp4" controls playsinline></video>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <video src="/Main/images/squirrel_on_a_wood (1080p).mp4" controls playsinline></video>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <video src="/Main/images/squirrel_on_a_wood (1080p).mp4" controls playsinline></video>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <video src="/Main/images/squirrel_on_a_wood (1080p).mp4" controls playsinline></video>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <video src="/Main/images/squirrel_on_a_wood (1080p).mp4" controls playsinline></video>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
    <video src="/Main/images/squirrel_on_a_wood (1080p).mp4" controls playsinline></video>
</div>
</div>

<style>
    video{
        width: 90%;
        margin: 5%;        
    }
</style>

字符串
说了这么多，我的问题是，虽然我知道HTML和CSS，我的JavaScript的知识是不是太好做这一切。请为我做这件事，并向我解释它是如何工作的，这样我就可以在我的主要项目中使用它，并增加我对Web开发的知识。或者，如果你不会这样做，至少给予我一个详细的提示，这样我就可以问ChatGPT或任何其他聊天机器人如何做，如果它是不可能的，你可以帮助。

css

来源：https://stackoverflow.com/questions/77466294/recreating-the-inline-scrolling-feature-of-youtube

1条答案

按热度按时间

ltskdhd11#

这是一个非常复杂的问题，所以我们需要将其分为几个步骤：

Step 1 -运行JS

在解析HTML之后运行JavaScript代码，以便JS“看到”HTML内容
如果你想把JS代码和HTML放在同一个文件中，你需要把<script>标签和代码放在HTML文件的最后（作为body中的最后一个元素）。
如果你的JS在一个单独的文件中，你应该使用script标签的defer属性：

<script src="/path/to/file.js" defer />

字符串
这可以放在HTML的任何地方，不一定要放在最后。defer属性将导致您的代码在HTML解析后运行。

Step 2 -检测进入/离开viewport

下一步是设置某种监听器，这样你就可以知道你的视频元素何时进入或离开页面。最有效的方法是使用IntersectionObserver Web API。在文档中，你可以看到一些使用这个API的例子。
你需要为HTML中的每个视频元素设置一个观察者，所以你可以这样做：

const videos = document.querySelectorAll('video');

for (const video of videos) {
  // set up an observer here
}

型
在你的情况下，我建议将观察者的threshold选项设置为1.0，这样只有当元素完全在视口中时才会触发，而不仅仅是部分。
在observer回调函数中，你可以使用entry对象的isIntersecting字段来检查元素是否刚刚进入或离开viewport。示例：

function observerCallback(entries) {
  const isVisible = entries[0].isIntersecting;
  if (isVisible) {
    // the element is visible, you can play the video
  }
  else {
    // the element is not visible, you can pause the video
  }
}

型

步骤3 -播放或暂停视频

要播放或暂停视频，可以使用video元素的play和pause方法。

video.play();
video.pause();

型

进一步改进

为了在视频接近视口中间时开始播放视频（而不是在视频进入视口时立即播放），可以使用IntersectionObserver的rootMargin选项
为了一次只播放一个视频，您可以在变量中跟踪当前播放的视频，如：

// place this variable somewhere so that it's accessible to the function below
// and its value is not lost
let currentlyPlayingVideo;

// run this function in the observer callback
function playAnotherVideo(newVideo) {
  if (currentlyPlayingVideo !== undefined)
    currentlyPlayingVideo.pause();

  newVideo.play();
  currentlyPlayingVideo = newVideo;
}

赞(0）回复(0）举报 2023-11-19

我来回答

css 重新创建YouTube的内联滚动功能

1条答案

Step 1 -运行JS

Step 2 -检测进入/离开viewport

步骤3 -播放或暂停视频

进一步改进

相关问题

热门标签

最新问答