最近做了一个小需求。大概是微信H5端点击视频。然后全屏播放；功能挺简单的吧。这边用的就是html的video组件。也遇到点问题就记录一下。这边贴一下微信的X5内核浏览器的一些接入规范可以看一下

##视频组件 这边加了一些属性的描述--我发现有的属性介绍说是起什么作用的。但是发现并没有生效。可能是因为有的属性共同存在导致不生效吧。具体的也没有去试了

         <video
                    ref={this.videoRef}
                    id="video"
                    src={videoUrl}//视频连接
                    controls //使用浏览器提供的播放控件；
                    autoplay={'autoplay'} //视频加载好会自己默认播放
                    poster={poster}//封面
                    webkit-playsinline="true" //这个就是下面的不同版本时间
                    playsinline='true' //当配置了这个他们都不会默认全屏了
                    style={{
                        width: 300,
                        height: 200,
                        backgroundColor: 'black',
                    }}
                    x5-video-player-fullscreen="true" //视频播放时将会进入到全屏模式
                    x5-video-player-type="h5" //x5-video-player-type 启用H5同层播放器-可以在视频上方显示html元素。
                    x5-video-orientation={'landscape'}
                />

#####退出全屏的方法这边只记录微信X5内核的方法-- 本来安卓的方法呢是官方提供的但是发现ios端并不生效安卓端可以使用就用了这个办法进入全屏的我没测试不晓得了。。 #####IOS：

document.getElementById('voide').addEventListener('pause', () => {
             todo 
            });

#####android:

document.getElementById('video').addEventListener("x5videoexitfullscreen", function(){
alert("exit fullscreen")
})
 
document.getElementById('video').addEventListener("x5videoenterfullscreen", function(){
alert("enter fullscreen")
})

如果有幸有人看了这篇文章。有好的办法可以评价下。谢谢；暂时就记录到这个吧。