1. m3u8视频流兼容问题

使用hls.js 可以解决android和iphone微信的播放问题 https://github.com/video-dev/hls.js

2. 直播平台使用阿里云，涉及到的服务： 直播推流，拉流，对象存储和CDN（用于点播放）

3. 页面视频大小对于不同屏幕自动适配问题， 看下面代码 

4. 获取手机屏幕宽度， document.body.clientWidth 

5. 区分安卓和苹果手机，  if(navigator.userAgent.indexOf('Android') > 0) // 安卓

6. 获取播放视频的实际尺寸，  videoObj.on("xxx" ){    this.videoWidth  ; this.videoHeight ; } 

<video width="100%" id="video"
                   preload="auto"
                   x-webkit-airplay="allow"
                   x5-video-player-type="h5"
                   x5-video-player-fullscreen="true"
                   x5-video-orientation="portrait"
                   webkit-playsinline
                   playsinline
                   controls
                >
                </video>

<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>

 <script>
var platForm = navigator.userAgent
        if(platForm.indexOf('Android') > 0 ) {
            if (Hls.isSupported()) {
                var video = document.getElementById('video');
                var hls = new Hls();
                hls.loadSource('http://live-xj2.freelayer.net/xiaolaba_push_{$authUid}/{$authUid}.m3u8');
                hls.attachMedia(video);
                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    video.play();
                });
            }

            var myvObj = document.getElementById("video");
            myvObj.addEventListener("loadedmetadata", function () {
                var contH = this.videoHeight
                var w = document.body.clientWidth
                var contW = this.videoWidth
                var scale = contW/w
                $("#video_box_o" ).css("height", contH/scale )
            });
        }else {
            $("#video" ).attr("src", 'http://live-xj2.freelayer.net/xiaolaba_push_{$authUid}/{$authUid}.m3u8' )
            // $("#video")[0].play()
            $("#video").load()

            var myvObj = document.getElementById("video");
            myvObj.addEventListener("canplay", function () {
                var contH = this.videoHeight
                var w = document.body.clientWidth
                var contW = this.videoWidth
                var scale = contW/w
                $("#video_box_o" ).css("height", contH/scale )
                $("#tab_boxs").css("height", "100%")
            });
        }
</script>