成都捷德LIEBE发盘机自带的浏览器是基于chromium内核的,是可以支持h5stream 使用的WS 和RTC,其中Android 支持WS 和RTC。发盘机不仅解决了就餐不刷卡或漏刷卡问题,而且为节约粮食添砖加瓦,启用手机订餐功能后就餐前先订餐,就餐只需刷脸验证通过就自动发放餐盘,未订餐不出盘。如有不清楚可联系微信:JD20170409。
先上代码
-
//html
-
<video
-
id="video1"
-
:src="src_mp4"
-
preload="auto"
-
webkit-playsinline
-
playsinline="true"
-
x-webkit-airplay="allow"
-
x5-video-player-type="h5"
-
x5-video-player-fullscreen="true"
-
x5-video-orientation="portraint"
-
style="object-fit:fill">
-
</video>
-
//js
-
var video = document.querySelector('video');
-
videoMethod(video);
-
function videoMethod(video) {
-
video.addEventListener('touchstart', function () {
-
video.play();
-
});
-
setTimeout(function () { video.play(); }, 1000);
-
document.addEventListener("WeixinJSBridgeReady", function (){
-
video.play();
-
video.pause();
-
}, false);
-
video.addEventListener('ended', function (e) {
-
video.play();
-
})
-
//进入全屏
-
video.addEventListener("x5videoenterfullscreen", function(){
-
window.onresize = function(){
-
video.style.width = window.innerWidth + "px";
-
video.style.height = window.innerHeight + "px";
-
}
-
})
-
//退出全屏
-
video.addEventListener("x5videoexitfullscreen", function(){
-
window.onresize = function(){
-
video.style.width = 原尺寸;
-
video.style.height = 原尺寸;
-
}
-
})
-
}
-
//引用js
-
iphone-inline-video
-
//css
-
.IIV::-webkit-media-controls-play-button,
-
.IIV::-webkit-media-controls-start-playback-button {
-
opacity: 0;
-
pointer-events: none;
-
width: 5px;
-
}
-
.videobox {
-
width: 4.78rem;
-
height: 7.8rem;
-
position: absolute;
-
top: 3.2rem;
-
left: 1.2rem;
-
}
-
video{
-
width: 4.2rem;
-
height: 7.69rem;
-
position: absolute;
-
left: .22rem;
-
top: .7rem;
-
overflow: hidden;
-
margin-top:-.7rem;
-
}
详细解读
属性
preload="auto"
是否预加载数据
- auto 页面加载后载入整个数据
- meta 页面加载后载入元数据
- none 不载入视频
webkit-playsinline && playsinline="true"
- 小窗播放 使视频不脱离文本流,但是需要webview(allowsInlineMediaPlayback = YES webview.allowsInlineMediaPlayback = YES) ,结果就是苹果支持,安卓不支持。安卓会自动全屏播放。
x-webkit-airplay="allow"
-
字面意思 容许airplay (通过AirPlay可以把当前的视频投放到支持此技术的其他设备上。)
- 如果是 video 标签,可以通过 x-webkit-airplay="allow" 属性开启;
- 如果是 embed 标签,可以通过 airplay="allow" 属性开启。