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