Question

我正在使用fancy box打开包含video.js播放器的html片段。

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

我正在使用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文件中搜索＆＃39; .trigger（＆＃34; play＆＃34;）＆＃39;并删除它。如果此修复程序出现任何问题，我会更新。

Answer 2

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

video: { autoStart: false }

video.js和fancybox - 视频在fancybox上自动播放

2 个答案: