微信公众号 中的video

<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>

  

微信公众号 中的video

上一篇:jmeter生成HTML报告


下一篇:think php 上下架修改+jq静态批量删除+ajax删除+全选