笔者近来在用 h5 的 video 来开发视频，上面来聊一聊是怎么一步一步填坑的。
一些在开发中的留神点，都在代码里的正文进行形容

根本需要

• 禁止全屏
• 是否自动播放
• 播放器尺寸的设置
• 播放结束时回到初始状态

1. 禁止全屏

webkit-playsInline={true} // ios
x5-playsInline ={true}// android
playsInline ={true}//ios10

留神：笔者在这里用的是 video-react，所以是playsInline，如果应用原生 video 的话，是playsinline

2. 是否自动播放

• 设置自动播放须要设置 autoPlay 属性
• 笔者所遇到的需要是，由后端接口管制是否默认播放，所以在这里分为两个步骤

// 步骤 1：在 video 标签里设置 autoPlay=false
<VideoReact
    src={video_url}
    webkit-playsInline={true}
    x5-playsInline ={true}
    playsInline ={true}

    autoPlay={false} 
</VideoReact>

// 步骤 2：依据接口的返回值来设置自动播放
handleVideoPlay = (is_first) => {let { item: {video_play}, ref_name } = this.props;
    let ref_name_state = this.state.ref_name;
    let video = this[ref_name_state].video;
    if(video_play){// 自动播放, video_play 由后端返回
        if(is_first){
            // 首次播放时加延时，防止了在视频未加载胜利时就播放
            this.video_timeout = setTimeout(() => {video.play();
            }, 300)
        }
    }
}

3. 播放器尺寸的设置

在这里，采纳固定视频的宽度，依据视频的封面尺寸来计算视频的高度的算法。

• 在应用 video-react 时，发现设置 height 时，不能应用 rem 尺寸，只能用 px 和 %，然而后两种单位不能兼容不同的分辨率。所以在这里采纳 管制视频外层 div 的尺寸的办法，而将视频的尺寸都设置为 100%

// 有封面尺寸时，依据封面的宽高比计算高度；没有封面尺寸时，依据 16：9 计算高度
let video_height_cal = cover_width ? ((710 * (cover_height/cover_width)/100)): 3.9938;
return (<div style={{height: video_height_cal+'rem', width: '7.1rem'}}> // 视频外层 div 的尺寸设置
    <VideoReact
        src={video_url}
        webkit-playsInline={true} 
        x5-playsInline ={true}
        playsInline ={true}

        autoPlay={false} 
        width={'100%'}
        height={'100%'}
    </VideoReact>
</div>   
)

• 通过以上设置之后，视频外层 div、播放器、video、封面的尺寸都放弃了统一，然而在实际上，却还是在局部机型上有 黑边 呈现（黑边：播放器的背景色，有黑边阐明视频和封面没有齐全遮蔽播放器）

  • 解决办法：增大封面和视频的尺寸，以使其能齐全遮蔽播放器

.video-react-poster{
    height: 100.1%; // 增大封面的高度，top: -0.1px; // 调整地位
    
    // 额定问题
    // 禁止封面的图片反复展现
    background-repeat: no-repeat; 
    // 尽可能的缩放背景并放弃图像的宽高比例
    background-size: contain; 
    // 设置完上一个属性后，发现图片并不是高低居中的，所以设置了背景的起始地位
    background-position: center; 
}

.video-react-has-started{
        .video-react-video{
            height: 100.3%; // 增大视频的高度
            width: auto;// 视频的宽度自适应
            top: -0.4px; // 调整地位
            left: -0.2px;

            // 额定问题
            // 设置 max-width 是为了防止在将视频全屏播放时，宽度还是 auto 导致超出屏幕宽度的景象
            max-width: 110%;
        }
    }

4. 播放结束时回到初始状态

• 采纳的办法是：播放完结时，从新 load 以后视频

componentDidMount() {this.videoLoadSuccess();
}

videoLoadSuccess = () => {let video = document.querySelector('video');
    let {ref_name}  =this.state;

    // 在视频达到能够播放的状态时，监听其状态变动
    video.addEventListener('canplaythrough', (event) => {
           // 因为 canplaythrough 会触发屡次，所以在这里增加了对 canplaythrough 触发的限度，只有当缓存数组里没有该值时，才去监听
           if(!play_through_cache[ref_name]){play_through_cache[ref_name] = 1;
                this[ref_name].subscribeToStateChange(this.handleStateChange);
            }
    })
}

// 依据视频的状态变动，判断其是否播放实现
handleStateChange = (state, preState) = > {
    // 视频播放完结回到初始状态（进度条）if(state.ended && !prevState.ended){this[this.state.ref_name].video.load();}
}

心愿大家能继续关注哦，留一些个人信息不便大家找到我哦。
github