關於如何在微信裏面讓video不全屏播放

時間 2019-12-04

標籤關於如何微信裏面 video 全屏播放简体版

原文原文鏈接

發現一個更簡單的解決方法，加上一條屬性便可。x5-video-player-type=」h5″。經過設置這個屬性，讓video開啓同層H5播放器。另外在X5內核裏，video是單獨的一個view，會覆蓋在任何元素之上，聽說是爲了統一用戶體驗，加上這個屬性以後，也能夠讓其餘元素浮在video上面了。css

通過測試，在IOS設備，依然還須要添加以下屬性html

1  x-webkit-airplay=」true」 playsinline webkit-playsinline=」true」

<video id="video" src="mp4.mp4" x-webkit-airplay="true" playsinline webkit-playsinline="true" x5-video-player-type="h5"></video>

另外還有幾個屬性 x5-video-player-fullscreen=」true」，視頻播放時將會進入到全屏模式。css3

x5videoorientation，聲明播放器支持的方向，可選值： landscape 橫屏, portraint豎屏，此屬性只在聲明瞭x5videoplayertype=」h5″狀況下生效。web

1 <video src="m.mp4" playsinline="true" webkit-playsinline="true" 
2 x-webkit-airplay="true" x5-video-player-type="h5" x5-video-orientation="h5" 
3 x5-video-player-fullscreen="true" preload="auto" style="object-fit:fill;"></video>

preload="auto" 開啓視頻緩衝，頁面加載完即加載視頻chrome

webkit-playsinline="true" 控制當前視頻在當前設置的div裏面播放，不脫離文檔流微信

x-webkit-airplay="true" 支持Airplay的設備app

x5-video-player-type="h5" 開啓同層播放器，取消播放器的默認的播放按鈕和播放器控制器控制面板，整個頁面只保留微信默認自帶的返回和關閉菜單ide

x5-video-player-type="h5" x5-video-player-fullscreen="true" 同層播放器設置類型爲h5和設置視頻播放爲全屏幕post

style="object-fit:fill;" css3樣式設置填充整個屏幕測試

經過屬性的設置和樣式的控制讓視頻全屏顯示。

請看demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<style>
    *{margin:0;padding: 0}
    html,body,video{width: 100%;height: 100%; position: relative;overflow: hidden;}
    video{ object-fit: cover;}
    div,#endBtn{ position: absolute; width: 100px;height: 100px; left: 50%;top: 50%; margin-left: -50px;margin-top: -50px; background: red;z-index: 100;color: #fff;text-align: center;font-size: 14px; line-height: 100px;border:none;
        transition: all 1s ease;-webkit-transition: all 1s ease;
      }
    div.move{
        transform: translate3d(0,-688px,0);
        -webkit-transform: translate3d(0,-688px,0);
    }
    #endBtn{
    transition: all 1s ease;-webkit-transition: all 1s ease;
    transform: translate3d(0,688px,0);
        -webkit-transform: translate3d(0,688px,0);
    }
    #endBtn.move{
        transform: translate3d(0,0px,0);
        -webkit-transform: translate3d(0,0,0);
    }
</style>
<body>
    <div id="div">點擊播放</div>
    <video id="video" src="http://itakeo.com/down/video/mp4.mp4" poster="poster.jpg" muted x-webkit-airplay="true" playsinline  webkit-playsinline="true"  x5-video-player-type="h5"  ></video>
    <button id="endBtn">再次播放</button>
</body>
<script>
    div.ontouchend = div.onclick = function(){
        this.classList.add('move')
        video.play()
    }
    endBtn.ontouchend = endBtn.onclick = function(){
        this.classList.remove('move')
        video.play()
    }
    video.addEventListener('ended',function(){
       endBtn.classList.add('move')
    })
</script>
</html>

2017-12-06 23:54:32