默認(rèn)情況下熬甚，video視頻播放的時候會全屏播放你的視頻逢渔，脫離頁面肋坚，嚴(yán)重影響一些例如邊看視頻邊交互的H5應(yīng)用乡括。
在ios下，可以通過playsinline（iOS10之前需要寫成webkit-playsinline）這個屬性來讓視頻不默認(rèn)全屏播放：
<video playsinline="true" x5-playsinline="true" webkit-playsinline="true" />
但是android微信內(nèi)置瀏覽器采用騰訊X5內(nèi)核智厌，不遵循X5web標(biāo)準(zhǔn)诲泌，video強制全屏就是其一。視頻播放完畢后還會出現(xiàn)QQ自己的視頻推薦铣鹏。所以以上設(shè)置僅是解決了ios問題敷扫，下面說一下安卓的解決方法。
1.首先設(shè)置x5-video-player-type='h5'，騰訊x5內(nèi)核系的android微信用的瀏覽器webview的內(nèi)核葵第，使用這個屬性可以讓視頻播放的時候绘迁，視頻上可以有其他dom元素，這時可以解決在視頻播放的時候把視頻作為整頁面的背景卒密，其他dom元素放在視頻之上（非騰訊白名單機制的一種處理措施）缀台。
2.設(shè)置object-fit屬性，object-fit以及object-position可以將真正的視頻放在容器該有的位置哮奇。object-fit指定可替換元素的內(nèi)容應(yīng)該如何適應(yīng)到其使用的高度和寬度確定的框膛腐。object-position規(guī)定了可替換元素的內(nèi)容。
object-fit屬性取值如下：
contain：被替換的內(nèi)容將被縮放鼎俘，以在填充元素的內(nèi)容框時保持其寬高比哲身。 整個對象在填充盒子的同時保留其長寬比，因此如果寬高比與框的寬高比不匹配贸伐，該對象將被添加“黑邊”勘天。
cover：被替換的內(nèi)容在保持其寬高比的同時填充元素的整個內(nèi)容框。如果對象的寬高比與內(nèi)容框不相匹配棍丐，該對象將被剪裁以適應(yīng)內(nèi)容框误辑。
fill：被替換的內(nèi)容正好填充元素的內(nèi)容框。整個對象將完全填充此框歌逢。如果對象的寬高比與內(nèi)容框不相匹配巾钉，那么該對象將被拉伸以適應(yīng)內(nèi)容框。
none：被替換的內(nèi)容將保持其原有的尺寸秘案。
scale-down：內(nèi)容的尺寸與?none?或?contain?中的一個相同砰苍，取決于它們兩個之間誰得到的對象尺寸會更小一些。
完整代碼如下：
html部分:
<video?
????class="videoBox"
????controls
????playsinline="true"?
????x5-playsinline="true"?
????webkit-playsinline="true"?
????x5-video-player-type="h5"?
/>
css部分:
.videoBox: {
????position: relative;
????height: 100%;
????width: 100%';
????objectFit: contain;
}
video::-webkit-media-controls-enclosure {
????-webkit-appearance:none;
}
