在 JWPlayer 中将控制栏与视频内容区域分开

Question

我正在使用 JWPlayer 播放我的视频。是否有如下设计将控制栏与视频内容分开：

或任何添加 margin/padding 的方法来创建此白色 space。我试图检查该对象以更改 css 但也许它是一个块

谢谢，肯

Answer 1

控件栏保留在播放器 div 内，但我们可以更改 div 内每个元素的宽度和高度。

这是第一个例子： http://codepen.io/fdambrosio/pen/rmJGrq

html:

<body class="playerpage">
  <div id='divplayer'></div> 
</body>

css:

.playerpage #divplayer {
    background-color: white;
}
.playerpage video.jw-video {
    width: 400px ;
    height: 200px ;
}
.playerpage .jw-controlbar {
    width: 450px ;
    left: 50px ;
}

js:

var playerInstance = jwplayer("divplayer"); 
playerInstance.setup({
file:'//video...',
width: 544, 
height: 306
});

另一种解决方案是使用 JS 构建自定义控制栏 API，这样您就可以在需要的地方使用该控制栏

在 JWPlayer 中将控制栏与视频内容区域分开

Separate controls bar from video content area in JWPlayer

html

css

jwplayer