这段时间在做一个直播项目，有直播需求，也有视频播放需求，要求能在微信中以半屏的方式播放，另外半屏可以做一些操作，还有些组件需要悬浮在视频上方。
网上各种扒拉，各种实验，以求在微信中实现不全屏就能播放和自动播放，最终还是用了单纯的video标签。自动播放到目前还是没找到完美的解决方法。
非全屏播放视频
loop
autoPlay
src={url}
controls={true}
poster={pic}
playsinline
webkit-playsinline
x5-video-player-type="h5-page"
/>
这么多属性，能在微信中起到决定做用的还是最后一个
x5-video-player-type="h5-page"
注意，网上很多说这个属性的值是h5,但实际上不是，是h5-page才有作用，但这种方式也只能播放视频，直播流(m3u8)还是会跳出原来的文档流，变成全屏。所以我的做法是加了一个判断，是直播流的情况下用另外几个属性：
src={url}
controls={true}
poster={pic}
playsInline
webkit-playsinline
x-webkit-airplay="true"
x5-playsinline="true"
/>
播放直播流的时候不能加上上面起决定作用的那个属性，否则还是会变成全屏，而且，如果是在react下，必须给后两个属性写上值，不能使用react下不写值默认等于true的特性，否则，还是不会起作用。
另，关于自动播放，之前也找到一个方案，在一个网站上右键查看源代码扒拉下来的一个js文件,没有文档，也不知道来源，名字叫hls-0.6.14.min.js， 一看就是和hls有关的，可以实现自动播放，但仅限于播放m3u8的视频，注意，是视频，不是直播流，别的都放不了，但能实现不全屏自动播放。
使用方法是：
let Hls = (window as any).Hls;
if (Hls && Hls.isSupported()) {
this.hls = new Hls();
this.hls.on(Hls.Events.MANIFEST_PARSED, () => {
if (this.player) {
this.player.play();
}
});
}
//----------
this.player = document.findElementById('video');
if (this.hls && url && this.player) {
this.hls.loadSource(url);
this.hls.attachMedia(this.player);
}
代码中的Hls 就是引用了那个Js文件后得到的全局对象，由于此处不能上传附件，就只能简单说一下使用方法，如果有哪位同学知道这个js的来源或文档，希望能在下方流言说明一下。