直播项目中微信半屏播放视频及自动播放的探索与实践
我目前正在做一个直播项目，既需要直播，又需要视频播放，要求视频在微信上半屏播放，另一半屏幕可以进行一些操作，还需要一些组件悬浮在视频上方。在网上搜索和尝试了很多方法，尝试在微信中实现非全屏播放和自动播放，但最终还是用了一个简单的video标签，还没有找到完美的自动播放方案。
以非全屏模式播放视频
<p><pre> <code class="language-js"><video
loop
autoPlay
src={url}
controls={true}
poster={pic}
playsinline
webkit-playsinline
x5-video-player-type="h5-page"
/></code></pre></p>
在微信的众多属性中，最后一个属性是最重要的。
https://i9.taou.com/maimai/p/26735/8439_87_22ssNEdbMnFnrzhy
<p><pre> <code>x5-video-player-type="h5-page"</code></pre></p>
注意网上很多人说这个属性的值为h5，其实不然，只有h5页面才有效。但是这种方法只能播放视频，直播流（m3u8）还是会跳出原文档流，变成全屏。所以我的做法是加一个判断，在直播流的情况下用到其他几个属性：
<p><pre> <code class="language-js"><video
src={url}
controls={true}
poster={pic}
playsInline
webkit-playsinline
x-webkit-airplay="true"
x5-playsinline="true"
/></code></pre></p>
播放直播的时候，上面的决定性属性不能加，不然还是会变成全屏的。而且如果是在react下，最后两个属性一定要写值，不能用react默认为true的特性而不写值，不然不行。
https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2FdN6I3MjzTpdaeZNKLKpAhWdlf3KJHqhpzymdt6Aw0Cbk31524536288580transferflag.png&thumbnail=650x2147483647&quality=80&type=jpg
另外关于自动播放，之前我也找到过解决办法，在一个网站右键查看源码，拉出一个js文件，没有文档，来源不明，名字叫hls-0.6.14.min.js，明显和hls有关，能实现自动播放，但是仅限于播放m3u8视频，注意是视频，不是直播，不能播放其他的，但是可以实现不全屏的自动播放。
使用方法：
<p><pre> <code class="language-js">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);
}</code></pre></p>
代码中的hls是引用Js文件后得到的全局对象，由于这里不能上传附件，我只能简单说一下使用方法，如果有同学知道这个js的出处或者文档，希望可以在下面的辟谣中解释一下。
页:
[1]