带有jQuery的视频海报中的ACF中继器图像

时间:2019-04-04 作者:Dario B.

jquery无法将url从图像发送到html标记。我解释;我有一个带有5个变量的ACF中继器,其中包括一个用于制作视频海报的图像,我想做的是,通过jquery,在900px的较小屏幕中,将属性“海报”添加到视频标签中。

这是我的代码:

<div class="video">
      <video class="thevideo" loop muted>
             <source src="<?php echo $previews[\'volles-video\']; ?>" type="video/mp4">
             <source src="<?php echo $previews[\'kurzes-video\']; ?>" type="video/webm">
             Your browser does not support the video tag.
     </video>
</div>
 <script>
     $(document).ready(function () {
                   if (document.documentElement.clientWidth < 900) {
                     $(\'.video video\').attr(\'poster\' ,"<?php echo $previews[\'poster\']; ?>");

                }


          });


     </script>
代码检查器打印此

   <div class="video">
        <video class="thevideo" loop="" muted="" poster="">
               <source src="http://www.die-lounge.com/test/dlb/wp-content/uploads/2019/01/VerifiableTerrificHind.mp4" type="video/mp4">
               <source src="http://www.die-lounge.com/test/dlb/wp-content/uploads/2019/01/VerifiableTerrificHind.webm" type="video/webm">
                Your browser does not support the video tag.
        </video>
 </div>
  <script>
       $(document).ready(function () {
             if (document.documentElement.clientWidth < 900) {
                 $(\'.video video\').attr(\'poster\' ,"http://privateurl/test/dlb/wp-content/uploads/2019/01/Verklebt-oder-nicht-verklebt-das-ist-in-diesem-Teilspiel-von-Handycrash-die-Frage.jpg");
             }

      });


  </script>
也就是说,jquery识别url,但不会将其传递给海报,我不知道为什么,事实上jquery会将海报添加到视频标记中。要说一切都在其相应的foreach中,php函数工作正常,由var\\u dump检查,事实上,如果没有这个,web已经准备好了。除了这个脚本让我抓狂之外,一切都很正常。我尝试通过javascript这样做:

<script>
  var url = "<?php echo $previews[\'poster\']; ?>";
  $(\'.video video\').attr(\'poster\' ,url);
<script>
我甚至试着把它作为背景,同样的事情也发生了。但是,如果我使用inspector的直接url并将其粘贴到我的代码中,它就会起作用

有什么想法吗?

感谢

1 个回复
SO网友:Dario B.

经过深思熟虑,我自己用以下方法解决了这个问题:

if (document.documentElement.clientWidth < 900) {

    $(\'video\').each(function () {
        const poster = $(this).data(\'poster\');
        $(this).attr(\'poster\', poster);
    });
}
谢谢大家

相关推荐

我怎样才能在特色图片html上添加一个“data-pin-noopin”呢?

我真的很想防止我的特色图片被钉住。这看起来很简单,但我只是没有足够的知识来做这件事。我找到了这个,但它不起作用。我有divi主题,如果这很重要的话。add_filter( \'post_thumbnail_html\', function( $html ){ if ( false !== stripos( $html, \'data-pin-nopin\' ) ) { return $html; } // Add \'data-pin-nopin\' t