Question

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

但是首先，myscript.js在condition =“ device not mobile”或类似条件下修改视频src。

Chrome调试器显示DOM已使用新的URL更新，但是click事件仍按照原始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>

用于更新DOM的js代码...

(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更新的视频src

1 个答案: