通过单击图像叠加开始自动播放视频.需要处理多个视频 [英] Start autoplaying video by clicking image overlay. Need to work for multiple videos

问题描述

我有一些代码可以工作，单击叠加图像时，该图像将删除图像并允许其相应的视频自动播放.我正在努力的是，如果有多个视频，每个视频都有自己的叠加图像，那么如何使这项工作有效.

I have a bit of code working which when clicking on an overlay images removes the image and allow it's corresponding video to autoplay. What I am struggling with is how to make this work if there are multiple videos, each with its own overlay image.

这里是指向代码笔的链接: https://codepen.io/NewbCake/pen/qMMQZo

Here is a link to the codepen: https://codepen.io/NewbCake/pen/qMMQZo

问题是，当单击任何覆盖图时，它会删除所有覆盖图并仅播放第一个视频.我该如何使其分别适用于每个人?我注意到，当我将f = $ f [0]的索引更改为f = $ f [1]时，它将播放第二个视频(甚至单击第一个视频).如何获取它以选择要单击的索引的索引?

The problem is that when clicking on any overlay it removes all overlays and plays only the first video. How can I make it work for each one individually? I notice when I change the index of f = $f[0] to f = $f[1] it plays the second video (even clicking on the first video). How do I get it to select the index of the one that it is clicked on?

我还想知道使用此功能是否存在任何可预见的缺点...将在移动设备上运行还是会引起问题?

I am also wondering if there are any foreseeable drawbacks to using this...will work on mobile or will it cause problems?

在此先感谢您的帮助！

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" alt="play video" />    
      </a>
    </div>
    <iframe src="https://player.vimeo.com/video/66991893?api=1&title=0&amp;byline=0&amp;portrait=0&amp;color=57c0d4" width="960" height="540" 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();

});

推荐答案

尝试一下:

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

This will play the corresponding video, and if you click on another one it will pause the current one and play the new one. Hope this helps :)

$(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

这篇关于通过单击图像叠加开始自动播放视频.需要处理多个视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！