Question

当初始化Jwplayer时，他们会注入一个带有

的CSS的类

.jwplayer.jw-flag-aspect-mode {
  height: auto !important;
}

我的代码是

<div style="height: 80vh; width: 100%">
  <div style="height: 90%; width: 100%;>
    <div style="height: 100%; width: 100%;>
      <!-- JwPlayer here -->
      <div id="sample-video"></div>
    </div>
  </div>
  <div style="height: 10%; width: 100%;>
    <!-- actions bar here -->
  </div>
</div>

<script type="text/javascript">
  //psuedo code
  jwplayer('#sample-video").setup({
    sources: sources,
    autostart:true,
    width: '100%'
  });
</script>

问题是，当jwplayer注入自己的css时，即使我手动设置内联或通过上面提到的类设置，它们也会覆盖高度。

反过来会导致视频播放器忽略父母并在下面溢出。如果我可以改变高度：auto to height：100％;,那么我的预期行为是正确的。

我已尝试here中的所有答案，并且所有答案都列在jwplayer的支持网站上。

Answer 1

设置高度的jwplayer设置选项。如果明确设置，它将保持100％。

jwplayer('div').setup({
    height: 100%,
    width: 100%
});

在完整显示中运行~~此片段~~ Plunker并调整窗口大小，它完全响应并且不会超过它的容器的高度。

PLUNKER

<德尔> ##段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JW Auto Height</title>
<script src="http://p.jwpcdn.com/6/12/jwplayer.js?"></script>
<style></style>
</head>

<body>
<!-- div is 80% height of this screen -->
<div style="height: 80vh; width: 100%; outline: 5px dotted red;">
  <!-- section is 90% height of div -->
  <section style="height: 90%; width: 100%; outline: 3px dashed blue;">
    <!-- main is 100% height of section -->
    <main style="height: 100%; width: 100%; outline: 1px solid black;">
    	<!-- jw is 100% height of main -->
      <div id="jw"></div>
      
    </main>
  </section>
  <!-- nav is 10% height of div -->
  <nav style="height: 10%; width: 100%; outline: 2px solid grey; background: grey"></nav>
</div>
<div style="margin: 30px auto;">This is 20% of the screen's height</div>
<script>
//Real code

jwplayer("jw").setup({ 
	sources: [{
		file: "http://glvid.s3.amazonaws.com/jwp/test/3clox.mp4"
	}],	
  width: "100%",		
  height: "100%"		
});		



</script>
</body>
</html>

Answer 2

因为这看起来更像是答案而不是评论：

您也可以不介意使用.jwplayer.jw-flag-aspect-mode { min-height:100%; max-height:100%; }：

class Parameter(object):
    def  __init__(self ):
            self.parser = ArgumentParser()
            self.parser.add_argument("-db", type = str , action= "store", dest = "database", required=True)   
            self.parser.add_argument("-coll",  type=str,  action="store",  dest="collection",  required=True)
            self.parser.add_argument("-sys",  type=bool,  action="store",  dest="system",  default="TRUE")
            self.args = self.parser.parse_args()


    def checkArgs(self, connect):
            right = True
            with MongoConnection(connect) as conMongo:
                    all_dbs = conMongo.conMongo.database_names()

                    if self.args.database not in all_dbs:
                            right = False
                            raise ValueError("\nThe given database name does not exists.\n" % (self.args.database))
            return right



if __name__ == '__main__':
    connection = 'server connection information'
    params = Parameter()
    try:
            params.checkArgs(connection)
    except ValueError as e:
            print(e)

您可以在其中设置值以约束元素所需的固定或非固定高度值

我怎么能包含一个高度为auto的子div-Jwplayer

2 个答案: