在 React 项目中以 16/8 div 适合 videojs 播放器

Question

我有一个 div，宽度为 100%，高度为 50%。基本上是 16/8 的比例 div。现在我想在其中安装视频 js 播放器。呈现这个 16/8 div 的组件是这个（你可以在 video-container div

中看到 Player 组件

return (
            <div className={c.container}>
                <div className='video-section'>
                    <div className='video-container'>
                        *<Player/>*
                    </div>

css 用于视频容器

.video-container
        width 100%
        background-color #000
        padding-bottom:  50%;

我有一个像这样的播放器组件

assign(props, {
        ref: 'video',
        controls: true,
        width: "960", height: "600"
    });


return (
    <div class="video-wrapper">
        <video {... props}>
            <source src={videoSrc} type="video/mp4"/>
        </video>
    </div>)

videoplayer.css

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.video-wrapper > video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

我正在屏幕上看到这个这是更新到现在

编辑后的新更新

.video-container
            width 100%

并从视频标签中删除宽度和高度。

我要的就是这个

index.js

return (
            <div className={c.container}>
                <div className='video-section'>
                    <div className='video-container'>
                        <Player/>
                    </div>
                    <div className='video-title'> {name} </div>
                    <div className='process-list'>
                        {
                            PROCESS_LIST.map((x,i)=> (
                                <div
                                    className='process-item'
                                    key={i}
                                    onClick={this.toHome.bind(this)}> {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 80%

    .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

新更新

Answer 1

您可以通过 CSS 使用此方法。这基本上是常见问题，这是他常用的解决方案。

http://jsfiddle.net/t1gsrsu5/3

只需在 React wrapper div 和 video element 中渲染，css 会为您处理比例。

.playerDiv
   .video-wrapper
      video

视频的比例 16:9 基于 .playerDiv.

的大小

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
}

.video-wrapper > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-wrapper">
<video controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>
</div>

在 React 项目中以 16/8 div 适合 videojs 播放器

Fit videojs player in 16/8 div in react project

javascript

css

video.js

reactjs