<div class="block-video">
    {if $live_url}
    <div class="videowrap">
        <video class="video vjs-fluid"
        webkit-playsinline="" 
        playsinline="" 
        x5-playsinline="" 
        x-webkit-airplay="allow" 
        src="{$live_url}" 
        id="player" 
        controls="controls">  
        </video>
    </div>
    {/if}
</div>

必須加controls 才能被定位後顯示出來 然後給固定的大小 點選會全屏顯示 加上webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow"這些屬性 點選播放就不會顯示了

.videowrap {
        width: 200px;
        height: 200px;
        position: fixed;
        top: 150px;
        right: 10px;
        z-index: 999;
    }
    #player {
        width: 150px;
        height: 200px
    }
    video {
        height: 150px !important;
        width: 200px !important;
        object-fit: contain !important;//按視訊比例大小 
    }
    .vjs-fluid {
        padding-top: 0 !important;
    }
    .block-video{
        width: 100%;
        height: 200px;
        z-index: 2;
    }
    .block-video .video {
        height: 100%;
        width: 100%;
        object-position: 0 0;
        object-fit: contain;
    }

微信中 video 不支援自動播放

ios中寫入如下的js程式碼 才能自動播放

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script> 
        //   必須在weixin JSAPI的WeixinJSBridgeReady才能生效
          document.addEventListener('WeixinJSBridgeReady',function(){
              document.getElementById('player').play();
          },false);
</script>