fancybox 忽略通过 DOM 更新的视频源

Question

Fancybox 在点击时显示我的本地视频内容。

但首先，myscript.js 根据条件 = "device not mobile" 或类似条件修改视频 src。

Chrome 调试器显示 DOM 已更新为新 URL，但点击事件仍按照原始 html 播放旧视频 url代码。

HTML 作为

<a data-fancybox href="#safetyvideo" data-small-btn="false">
   <img class="card-img-top img-fluid" src="assets/images/DJI_0857.JPG" />
   <img class="card-img-top img-fluid" src="assets/images/play.png" />
</a>

<video poster="assets/images/safetyposter.jpg" width="640" height="360" controls preload="auto" id="safetyvideo"  style="display:none;">
   <source src="/myvideoHD.mp4" type="video/mp4">
   Your browser doesn't support HTML5 video tag. </video>

js 代码更新 DOM...

(function($) {

  // Override video to LD version.

  $("source").each(function() {

    var myHD = $(this).attr("src");
    $(this).attr('src', '/samples/home07LD.mp4');
    var thisLD = $(this).attr("src");
    console.log(myHD+' becomes '+thisLD);

  });

}(jQuery));

Answer 1

首先，这个问题与fancybox完全无关！！！我怎么强调找出任何问题真正原因的重要性都不为过。对于您的情况，这非常简单 - 从您的视频中删除 style="display:none;"。你现在看到了什么？它显示原始视频，而不是您所期望的视频。这意味着 - fancybox 可以按照您的指示正常工作 - 显示原始视频。

现在，为什么视频源没有改变？因为视频已经加载，你需要告诉它加载新的源，像这样：

$(this).parent()[0].load();

演示 - https://codepen.io/anon/pen/jXEXmg?editors=1010

fancybox 忽略通过 DOM 更新的视频源

fancybox ignores video src updated via the DOM

jquery

fancybox