我已经做出了反应,其中我有一个带有媒体播放器和其他组件的页面。我已经做了一个div来适应这样的玩家。
现在只是一个空的div。这是我的组件的一部分,其中定义了整页
return (
<div className={c.container}>
<div className='video-section'>
<div className='video-container'>
<div className='video-player'></div>
</div>
<div className='video-title'> {name} </div>
<div className='process-list'>
{
PROCESS_LIST.map((x,i)=> (
<div
className='process-item'
key={i}> {x} </div>
))
}
</div>
</div>
<div className='details-section'>
<VideoDetails/>
</div>
</div>
)
以下是此组件的css
:local(.container)
display flex
flex 1
.video-section
margin 24px
flex 1
.details-section
margin 24px
width 33vw
flex-shrink 0
display flex
flex-direction column
// border-left 1px rgba(#000, 0.12) solid
.video-container
width 100%
background-color #000
ratio-box(16/8)
.video-title
font-size 2.4em
margin-top 4vh
margin-bottom 4vh
.video-section .process-list
display flex
width 100%
.process-item
flex 1
background-color #D7D7D7
padding 18px 30px
font-size 1em
text-align center
border-radius 8px
margin 0 4px
cursor pointer
&:hover
background-color darken(@background-color, 10%)
:local(.container)
.video-details-container
flex 1
display flex
flex-direction column
.comments-section, .tabbed-section
min-height 100px
background-color #fff
border 1px rgba(#000, 0.12) solid
box-shadow 0 4px 24px 0 rgba(#000, 0.12)
.comments-section
height 180px
.flex-vertical
display flex
flex-direction column
height 100%
.flex-fill
flex 1
.tabbed-section
flex 1
margin-bottom 20px
display flex
flex-direction column
.tab-content
flex 1
.table-footer, .comments-footer
clearfix()
text-align right
padding 10px
border-top 1px rgba(#000, 0.2) solid
#comments-input
flex 1
border none
padding 20px
outline none
.flags-table
.red-box
width 16px
height 16px
margin 3px 5px
background-color red
所以现在当我把一个视频播放器放在这样的div中时,它不适合黑盒子。 VideoJs目前在我的代码中定义了自己的宽度和高度道具。但是当我删除那些认为js会自动采用黑盒子尺寸的道具时,这种情况并没有发生。它的尺寸异常。我还包括我的视频js代码摘要。
<div className={c.container}>
<div className='video-section'>
<div className='video-container'>
<Player/>
</div>
<div className='video-title'> {name} </div>
videojs
assign(props, {
ref: 'video',
controls: true,
width: "960", height: "600"
});
return (
<div>
<video {... props}>
<source src={this.props.src} type={this.props.type} id={this.props.id}/>
</video>
</div>)
}
在视频播放器div中包含播放器后更新了视图。
更新
完成此操作后
.video-container
position: relative
width: 500px
height: 300px
.video-player
position absolute
width 50vw
height 30vh
<div className='video-section'>
<div className='video-container'>
<div className='video-player'>
<Player/>
</div>
</div>
我还是得到了这个
答案 0 :(得分:0)
您可以将以下样式分配给视频播放器div:
//!重要的是禁用默认样式 //根据您的要求设置宽度
.video-player {
position: relative !important;
width: 100% !important;
height: auto !important;
}
干杯:)