0
点赞
收藏
分享

微信扫一扫

支持FLV/HLS/WS-RTSP/WS-FLV/WEBRTC直播、点播H5播放器SkeyeWebPlayer适配移动端

免费视频直播、点播H5播放器SkeyeWebPlayer适配排除,移动端,常见移动端Web页面问题及解决方案
SkeyeVSS其独创的ws-rtsp流媒体直播技术,兼容传统安防流媒体的同时,不需要安装浏览器插件,解决互联网接入安防监控延迟高、起播慢等问题;支持全平台终端H5直播点播(PC、Web、Android、iOS)。
一般情况下SkeyeWebPlayer播放器的宽度是自适应,高度css 或者 new WebMediaPlayer()中的height参数来设置,常用的56.25 (56.25% 等于 16:9 )

支持FLV/HLS/WS-RTSP/WS-FLV/WEBRTC直播、点播H5播放器SkeyeWebPlayer适配移动端_H5无插件直播

1、移动端web禁止用户伸缩网页
我们可以使用viewport禁止放大和缩小,通常把user-scalable设置为0来禁止用户对网页视图的伸缩行为,完整的viewport信息:

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />

2、SkeyeWebPlayer 播放器在移动端使用
SkeyeWebPlayer 播放器默认情况下会根据屏幕宽度自动进行自适应,默认宽度等于100%,在外部盒子没有设置宽度的情况下,播放器的宽度与屏幕相等,在初始化播放器 height:0 或者不设置时,可以用css来设置hegiht。

new WebMediaPlayer(
this.url,
`skeyePlayer`,
this.callbackFunc,
{
cbUserPtr: this,
decodeType: 'auto',
openAudio: 0,
BigPlay: false,
// Height: 0 // 56.25
})

<style>
.player{
height:100%; /*为100%时根据外层div的高度来显示 (也可设置排px)*/
}
</style>

支持FLV/HLS/WS-RTSP/WS-FLV/WEBRTC直播、点播H5播放器SkeyeWebPlayer适配移动端_移动端无插件直播_02

横屏模式模式下,

支持FLV/HLS/WS-RTSP/WS-FLV/WEBRTC直播、点播H5播放器SkeyeWebPlayer适配移动端_移动端无插件直播_03

3、SkeyeWebPlayer 播放器在移动端强制横屏
通过css媒体查询判断横竖屏,并分别指定样式:

<template>
<div class="mobile">
<div class="wrap">
<div class="skeye-player" id="skeyePlayer"></div>
</div>
</div>
</template>

<style>
.mobile {
position: fixed;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}

.skeye-player {
height: 100%;
width: 100%;
}
@media screen and (orientation: portrait) {

/*竖屏 CSS*/
.wrap {
position: absolute;
width: 100vh;
height: 100vw;
top: 0;
left: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
transform-origin: 0% 0%;
}
}

@media screen and (orientation: landscape) {

/*横CSS*/
.wrap {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
}
</style>

强制横屏如图:(强制通过页面 禁止app或手机的横竖屏的切换是不现实的,H5只能针对自身页面做适配!!!)

获取更多信息

Copyright &copy; OpenSkeye Team 2018-2022

​​openskeye官网​​

举报

相关推荐

0 条评论