javascript HTML5视频仅触发播放一次

up9lanfz 于 2023-05-12 发布在 Java

关注(0)|答案(2)|浏览(389)

我正在使用一个脚本来播放html5视频，一旦一个元素在视口中。一旦视频播放，我希望它保持暂停，但一旦我开始滚动视频再次开始播放。你知道如何只触发一次游戏吗？
脚本：

jQuery.fn.isInViewport = function() {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight();

    var viewportTop = jQuery(window).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};

jQuery(window).on('resize scroll', function() {
    if (jQuery('.videoblock').isInViewport()) {
jQuery('video.full_screen_sections_video').trigger('play');
    } 
});

编辑：我添加了jQuery(this).removeClass('videoblock');到我的函数。这解决了它，不确定这是最好的方法吗？

JavaScript

来源：https://stackoverflow.com/questions/76230171/trigger-play-for-html-5-video-only-once

2条答案

按热度按时间

62lalag41#

您可以只删除事件侦听器，它在视频进入视口后启动视频：

jQuery(window).on('resize scroll', function() {
    if (jQuery('.videoblock').isInViewport()) {
      jQuery('video.full_screen_sections_video').trigger('play');
      // Remove the event listener once the video is started
      jQuery(window).off('resize scroll');
    } 
});

赞(0）回复(0）举报 2023-05-12

7kqas0il2#

添加jQuery（this）.removeClass（'videoblock'）;将从viewport中的元素中删除videoblock类，这将阻止if条件在后续滚动时为true。但是，这种解决方案可能不是最有效的，因为它会在每个滚动事件上修改DOM，这可能会降低页面的性能。
更有效的解决方案是使用标志变量来跟踪视频是否已经播放。下面是一个示例代码：

var videoPlayed = false;

  jQuery(window).on('resize scroll', function() {
  if (jQuery('.videoblock').isInViewport() && !videoPlayed) {
   jQuery('video.full_screen_sections_video').trigger('play');
   videoPlayed = true;
  }
  });

本代码中，videoPlayed变量初始化为false。第一次播放视频时，videoPlayed变量设置为true，后续滚动时不会再次播放，因为if条件会失败。这个解决方案避免了在每个滚动事件上修改DOM，这应该可以提高页面的性能。

赞(0）回复(0）举报 2023-05-12

我来回答

javascript HTML5视频仅触发播放一次

2条答案

相关问题

热门标签

最新问答