通过单击图像叠加开始自动播放视频。需要为多个视频工作

Posted 2023-05-09

【中文标题】通过单击图像叠加开始自动播放视频。需要为多个视频工作

【英文标题】：Start autoplaying video by clicking image overlay. Need to work for multiple videos

【发布时间】：2019-02-22 00:44:48

【问题描述】：

我有一些代码在工作，当单击覆盖图像时会删除图像并允许其对应的视频自动播放。我正在苦苦挣扎的是，如果有多个视频，每个视频都有自己的叠加图像，如何使这项工作发挥作用。

这里是codepen的链接：https://codepen.io/NewbCake/pen/qMMQZo

问题在于，当单击任何叠加层时，它会删除所有叠加层并仅播放第一个视频。我怎样才能让它单独为每个人工作？我注意到当我将 f = $f[0] 的索引更改为 f = $f[1] 时，它会播放第二个视频（甚至点击第一个视频）。如何让它选择被点击的索引？

我还想知道使用它是否有任何可预见的缺点...可以在移动设备上使用还是会导致问题？

提前感谢您的帮助！

html

<section>
  <div class="video-intro">
    <div class="image">
      <div class="play-button btn"></div>
      <a href="javascript:" id="btn_play" class="btn">
        <img src="http://placekitten.com/960/540"  />    
      </a>
    </div>
    <iframe src="https://player.vimeo.com/video/66991893?api=1&title=0&amp;byline=0&amp;portrait=0&amp;color=57c0d4"   frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
  </div>
</section>

CSS

section 
  display:grid;
  grid-template-columns:10vw 500px;


/* video intro */
.video-intro 
  grid-column: 2 ;
  box-shadow:0px 0px 7px #ddd;
  margin:0 auto 50px !important;
  width:90%;
  position:relative;
  max-width:960px;

.image 
  position:absolute;
  top:0;
  left:0;
  z-index:20;

img 
  width:100%;
  height:auto;

JS

$(function()
  var $parent = $('.video-intro'),
  $f = $parent.find('iframe'),
  $image = $parent.find('.image'),
  f = $f[0],
  url = $f.attr('src').split('?')[0];

  window.addEventListener('message', function(e)
    var d = JSON.parse(e.data);
  , false);

  $('.btn').click(function()
    var $t = $(this);
    runCommand('play');
    $image.hide();
  );

  function runCommand(cmd)
    var data = method : cmd;
    f.contentWindow.postMessage(JSON.stringify(data), url);
  

  // fitvids
  $('.video-intro').fitVids();

);

【参考方案1】：

试试这个：

这将播放相应的视频，如果您单击另一个视频，它将暂停当前视频并播放新视频。希望这会有所帮助:)

$(function()

      window.addEventListener('message', function(e)
        var d = JSON.parse(e.data);
      , false);


      $('.btn').click(function()

        parent_video = $(this).parent().parent();

        $('.video-intro').each(function()
             if(!$(parent_video).is($(this)))
               var $iframe = $(this).find('iframe');
               $iframe[0].src = $iframe[0].src;
               $(this).find('.image').show(0);
             
        );

        var $t = $(this);
        var $iframe = $t.parent().parent().find('iframe');
        setTimeout(function()
          runCommand('play', $iframe);
        , 200);

        $t.parent().fadeOut(200); //hide the .image div
      );


      function runCommand(cmd, $f)
        var data = method : cmd,
        url = $f.attr('src').split('?')[0];
        $f[0].contentWindow.postMessage(JSON.stringify(data), url);
      

      // fitvids
      $('.video-intro').fitVids();

);

https://codepen.io/andrejagovski/pen/XPyajE