Question

我在页面上嵌入了一个youtube视频，其上有一个重叠的div。由于div与视频重叠，因此无法访问视频控制器。

如何在视频开始播放时隐藏重叠的div，并在视频停止播放时再次显示。

这是我的嵌入代码

<div class="wrap">
    <iframe id="player" type="text/html" width="640" height="390"
      src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"
      frameborder="0">
    </iframe>
    <div class="title">
      Hide this div when video starts playing and show it when video is paused
    </div>
 </div>

Demo

Answer 1

您可以使用youtube api。检查下面的代码。多视频支持。

<强> Demo

HTML

NSString *responseInHTML = @"<html><body> Some html string </body></html>";
NSAttributedString * attrStr = [[NSAttributedString alloc] initWithData:[responseInHTML dataUsingEncoding:NSUnicodeStringEncoding] options:@{ NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType } documentAttributes:nil error:nil];

DLOG(@"String = %@",attrStr.string);

的CSS

<div class="wrap js-player" id="1">
    <div class="js-video" data-id="1" data-src="CJlKYk9lbqg"></div>
    <div class="js-title">
        Hide this div when video starts playing and show it when video is paused
    </div>
</div>

<div class="wrap js-player" id="2">
    <div class="js-video" data-id="2" data-src="u1zgFlCw8Aw"></div>
    <div class="js-title">
        Hide this div when video starts playing and show it when video is paused
    </div>
</div>

的js

.wrap {
  position: relative;
  display: inline-block;
  height: 390px;
  width: 640px;
}

.js-title{
  background:rgba(255, 0, 0, 0.7) ;
  padding: 20px;
  position: absolute;
  bottom: 0; 
  left:0; 
  right:0;
  color: white; 
  font-size: 20px
}

Answer 2

试试这个。视频播放完毕后会出现提醒框。您可以根据视频状态更改条件。在播放条件下，您可以隐藏div，在暂停条件下，您可以使用脚本显示div。

val newDF = Seq(("Y",0)).toDF("srcVal", "newVal")
// +------+------+
// |srcVal|newVal|
// +------+------+
// |     Y|     0|
// +------+------+

val df = Seq((1,"Y"),(2,"N"),(3,"Y")).toDF("key","value")
// +---+-----+
// |key|value|
// +---+-----+
// |  1|    Y|
// |  2|    N|
// |  3|    Y|
// +---+-----+

val finalDf = df.join(newDF, $"value" === $"srcVal", "left_outer").drop($"srcVal")
// +---+-----+------+
// |key|value|newVal|
// +---+-----+------+
// |  1|    Y|     0|
// |  2|    N|  null|
// |  3|    Y|     0|
// +---+-----+------+

http://jsfiddle.net/7Gznb/

播放YouTube视频时隐藏div

2 个答案: