最近需要實(shí)現(xiàn)h5 視頻全屏也就是橫屏，橫屏后需要將相關(guān)視頻展現(xiàn)在側(cè)邊欄?？紤]到h5是不能讓手機(jī)強(qiáng)制橫屏的，只能考慮用css 樣式上橫屏顯示video
思路就是--利用position:fixed 定位，對(duì)于視頻容器元素?transform 旋轉(zhuǎn)90deg，容器的寬高調(diào)整為如下
position: fixed;
left: 0;
top: 0;
width: 100vmax;
height:100vmin;
transform-origin: top left;
transform: rotate(90deg) translateY(-100vmin);
z-index: 100000;但是遇到一個(gè)問題，就是旋轉(zhuǎn)后，video 與自己寫的進(jìn)度條和播放控件都會(huì)備視頻遮蓋，video的層級(jí)為最高，也試了單獨(dú)對(duì)video旋轉(zhuǎn)，不會(huì)有這種現(xiàn)象。只要是在父元素下transform 就會(huì)出現(xiàn)video 層級(jí)問題。后面百度后的 解決方案是
還是在父元素下transform，然后在播放控制條下加 transform: translateZ(100px),試了下沒問題。
顯示問題解決了，但還有一個(gè)問題，就是橫屏后，在不同的手機(jī)瀏覽器上元素有部分會(huì)被遮擋，原因就是100vmax 可能不準(zhǔn)確 會(huì)把底部和頭部的距離算上。后面解決方案就是，用js 獲取文檔的高度和寬度進(jìn)行賦值。文章來源：http://www.zghlxwxcb.cn/news/detail-542187.html
const w = document.body.clientWidth;
const h = document.body.clientHeight;
document.getElementsByClassName('player-fulled')[0].style.width = h + 'px';
document.getElementsByClassName('player-fulled')[0].style.height = w + 'px';還需要處理若用戶手機(jī)自己橫屏后，去除我們自己寫的橫屏樣式?文章來源地址http://www.zghlxwxcb.cn/news/detail-542187.html
去除寬高的設(shè)定
document.getElementsByClassName('player-fulled')[0].removeAttribute('style');
樣式上
transform: none;
width: 100% !important;
height: 100% !important;到了這里，關(guān)于h5 視頻全屏-橫屏實(shí)現(xiàn)，遇到問題以及解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
