video.js 和 fancybox - 视频在 fancybox 打开时自动播放

Question

我正在使用 fancy box to open an html snippet that includes a video.js 播放器。

我的问题是播放器在灯箱中打开时自动播放，与灯箱初始化有关的内容触发了视频播放。我不希望视频自动播放，我希望灯箱打开并正常显示视频，播放按钮位于所选的海报图像上。当在灯箱外部使用相同的代码时，视频加载正常并且不会自动播放。

我正在使用 jekyll 开发 chrome。

这是我在灯箱中打开的 html 片段：

<div style="display: none" class="video-lightbox" id="acwedding">
  <div class="lb-vid-content">
    <div class="lb-vid">
      <video
        class="video-js vjs-big-play-centered vjs-16-9"
        controls
        preload="auto"
        poster="posters/acwedding.jpg"
        data-setup='{}'>
        <source src="https://player.vimeo.com/external/248666889.hd.mp4?s=efe468ee4ee8ae545fa9cf0a8a985788bb4409d9&profile_id=175" type="video/mp4"></source>
        <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that
          <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
        </p>
      </video>
    </div>
    <div class="lb-vid-desc">
      <h2 class="lb-vid-title">Chris and Allison's Wedding Video</h2>
    </div>
  </div>
</div>

我对 javaScript 不太熟悉，但我想我可以做一些事情来延迟 video.js 播放器的初始化，直到灯箱打开。但我不确定该怎么做，也不知道这是否是正确的做法。感谢您的帮助！

Answer 1

fancybox 中似乎有一个 play() 触发器导致 video.js 播放器播放。我只是从 fancybox 代码中删除了这个触发器，到目前为止一切顺利！可能不是一个理想的解决方案，因为它有点快速和肮脏，但到目前为止，就我的目的而言，它正在完成这项工作。

如果您遇到同样的问题并且喜欢使用我的修复程序，请在 fancybox js 文件中搜索“.trigger("play")”并将其删除。如果此修复出现任何问题，我会更新。

Answer 2

将以下选项添加到您的 fancybox 中：

video: { autoStart: false }

video.js 和 fancybox - 视频在 fancybox 打开时自动播放

video.js and fancybox - video plays automatically on fancybox open

javascript

jquery

video

fancybox

video.js