1臂痕、不彈窗口出在當(dāng)前頁面小屏幕播放
只需在video標(biāo)簽加個(gè)webkit-playsinline屬性即可,這個(gè)屬性基本上在基于webkit內(nèi)核的移動(dòng)端都是沒問題的昌简,此全屏非彼全屏辈灼,它是在瀏覽器視窗內(nèi)的全屏,并不是占居整個(gè)手機(jī)的全屏甸鸟,當(dāng)然我們做web端需要的就是在document的body內(nèi)的視窗范圍的全屏。
playsinline="true" /IOS微信瀏覽器支持小窗內(nèi)播放/
or
webkit-playsinline="true"/這個(gè)屬性是ios 10中設(shè)置可以讓視頻在小窗內(nèi)播放兵迅,也就是不是全屏播放/
or
playsinline webkit-playsinline
2抢韭、poster視頻封面
封面因?yàn)閳D片大小兼容問題有的居中顯示沒有全屏,可以設(shè)置css來控制
style="object-fit:fill" /加這個(gè)style會(huì)讓 Android / web 的視頻在微信里的視頻全屏恍箭,如果是在手機(jī)上預(yù)覽刻恭,會(huì)讓視頻的封面同視頻一樣大小 / fill or cover
video {
object-fit: cover;
}
3、controls /這個(gè)屬性規(guī)定瀏覽器為該視頻提供播放控件/
4扯夭、x-webkit-airplay="true" /這個(gè)屬性還不知道作用/
5鳍贾、x5-video-player-type="h5" /啟用H5播放器,是wechat安卓版特性/
6鞍匾、x5-video-orientation="h5" /播放器支付的方向,landscape橫屏骑科,portraint豎屏橡淑,默認(rèn)值為豎屏/
7、x5-video-player-fullscreen="true" /全屏設(shè)置咆爽,設(shè)置為 true 是防止橫屏/
8梁棠、preload="auto" /這個(gè)屬性規(guī)定頁面加載完成后載入視頻/
<video controls poster="./images/poster.png" width="100%" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5"x5-video-player-fullscreen="true">
<source src="xxx.mp4"
type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>