Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit bce83ac

Browse files
yujianbohzyujianbohz
committed
[CHG]增加移动端全屏，取消全屏方法-移动端适配
1 parent dd0e5c4 commit bce83ac

File tree

2 files changed

+97
-20
lines changed

2 files changed

+97
-20
lines changed

‎demos/base-demo/ezuikit.js‎

Lines changed: 90 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1221,22 +1221,99 @@
12211221
EZUIKitPlayer.prototype.fullScreen = function () {
12221222
var id = 'EZUIKitPlayer-' + this.opt.id;
12231223
var player = document.getElementById(id).contentWindow;
1224-
var requestFullScreen = function (element) {
1225-
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
1226-
if (requestMethod) {
1227-
requestMethod.call(element);
1228-
} else if (typeof window.ActiveXObject !== "undefined") {
1229-
var wscript = new ActiveXObject("WScript.Shell");
1230-
if (wscript !== null) {
1231-
wscript.SendKeys("{F11}");
1232-
}
1224+
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
1225+
// console.log('移动端全屏');
1226+
let width = document.documentElement.clientWidth;
1227+
let height = document.documentElement.clientHeight;
1228+
// wrapper = document.getElementById("test"),
1229+
let wrapper = document.body;//document.body 属性返回 <body> 元素， document.documentElement 属性返回 <html> 元素。
1230+
wrapper =document.getElementById(id);
1231+
let style = "";
1232+
if (width >= height) { // 竖屏
1233+
style += "width:" + width + "px;";
1234+
style += "height:" + height + "px;";
1235+
style += "-webkit-transform: rotate(0); transform: rotate(0);";
1236+
style += "-webkit-transform-origin: 0 0;";
1237+
style += "transform-origin: 0 0;";
1238+
} else { // 横屏
1239+
style += "width:" + height + "px;";// 注意旋转后的宽高切换
1240+
style += "height:" + width + "px;";
1241+
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
1242+
// 注意旋转中点的处理
1243+
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
1244+
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
12331245
}
1246+
style += 'position: fixed;top: 0;left: 0;z-index:10';
1247+
wrapper.style.cssText = style;
1248+
setTimeout(function () {
1249+
player.postMessage({
1250+
action:'reSize',
1251+
width: Math.max(width,height),
1252+
height: Math.min(width,height),
1253+
}, domain + "/ezopen/h5/iframe")
1254+
}, 200)
1255+
1256+
} else {
1257+
// console.log('pc端全屏');
1258+
var requestFullScreen = function (element) {
1259+
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
1260+
if (requestMethod) {
1261+
requestMethod.call(element);
1262+
} else if (typeof window.ActiveXObject !== "undefined") {
1263+
var wscript = new ActiveXObject("WScript.Shell");
1264+
if (wscript !== null) {
1265+
wscript.SendKeys("{F11}");
1266+
}
1267+
}
1268+
}
1269+
requestFullScreen(document.getElementById(id));
1270+
setTimeout(function () {
1271+
player.postMessage("autoResize", domain + "/ezopen/h5/iframe")
1272+
}, 200)
12341273
}
1235-
requestFullScreen(document.getElementById(id));
1236-
setTimeout(function () {
1237-
player.postMessage("autoResize", domain + "/ezopen/h5/iframe")
1238-
}, 100)
12391274
};
1275+
EZUIKitPlayer.prototype.cancelFullScreen = function () {
1276+
var id = 'EZUIKitPlayer-' + this.opt.id;
1277+
var player = document.getElementById(id).contentWindow;
1278+
if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
1279+
let width = document.getElementById(id).width;
1280+
let height = document.getElementById(id).height;
1281+
// wrapper = document.getElementById("test"),
1282+
let wrapper = document.body;//document.body 属性返回 <body> 元素， document.documentElement 属性返回 <html> 元素。
1283+
wrapper =document.getElementById(id);
1284+
let style = "";
1285+
if (width >= height) { // 竖屏
1286+
style += "width:" + width + "px;";
1287+
style += "height:" + height + "px;";
1288+
style += "-webkit-transform: rotate(0); transform: rotate(0);";
1289+
style += "-webkit-transform-origin: 0 0;";
1290+
style += "transform-origin: 0 0;";
1291+
} else { // 横屏
1292+
style += "width:" + height + "px;";// 注意旋转后的宽高切换
1293+
style += "height:" + width + "px;";
1294+
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
1295+
// 注意旋转中点的处理
1296+
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
1297+
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
1298+
}
1299+
wrapper.style.cssText = style;
1300+
setTimeout(function () {
1301+
player.postMessage({
1302+
action:'reSize',
1303+
width: width,
1304+
height: height,
1305+
}, domain + "/ezopen/h5/iframe")
1306+
}, 200)
1307+
} else {
1308+
if (document.exitFullscreen) {
1309+
document.exitFullscreen();
1310+
} else if (document.webkitCancelFullScreen) {
1311+
document.webkitCancelFullScreen();
1312+
} else if (document.mozCancelFullScreen) {
1313+
document.mozCancelFullScreen();
1314+
}
1315+
}
1316+
}
12401317

12411318
EZUIKitPlayer.prototype.capturePicture = function (fileName,isUndownload) {
12421319
var id = 'EZUIKitPlayer-' + this.opt.id;

‎demos/base-demo/index.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
<div className="demo">
1111
<h2>视频模式使用示例：</h2>
1212
<div id="video-container"
13-
style="width:600px;height:600px;">
13+
style="width:375px;height:200px;">
1414
</div>
1515
<div>
1616
<!-- <button onClick={()=> this.playr.stop()}>stop</button>
@@ -34,12 +34,12 @@ <h2>视频模式使用示例：</h2>
3434
template: 'simple', // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
3535
autoplay: true,
3636
// 视频上方头部控件
37-
header: ['capturePicture','save','zoom'], // 如果templete参数不为simple,该字段将被覆盖
37+
// header: ['capturePicture','save','zoom'], // 如果templete参数不为simple,该字段将被覆盖
3838
// 视频下方底部控件
39-
footer: ['talk','broadcast'], // 如果template参数不为simple,该字段将被覆盖
39+
footer: ['talk','broadcast','hd','fullScreen'], // 如果template参数不为simple,该字段将被覆盖
4040
// audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
41-
plugin: ['talk'], // 加载插件，talk-对讲
42-
controls: true,//['play','voice','hd','fullScreen'], // 视频控制相关控件，如果template参数不为simple,该字段将被覆盖
41+
// plugin: ['talk'], // 加载插件，talk-对讲
42+
// controls: true,//['play','voice','hd','fullScreen'], // 视频控制相关控件，如果template参数不为simple,该字段将被覆盖
4343
openSoundCallBack: (data) => console.log("开启声音回调",data),
4444
closeSoundCallBack: (data) => console.log("关闭声音回调",data),
4545
startSaveCallBack: (data) => console.log("开始录像回调",data),
@@ -51,8 +51,8 @@ <h2>视频模式使用示例：</h2>
5151
handleError: (data) => console.log("播放失败回调",data),
5252
handleTalkSuccess: () => console.log("对讲成功回掉"),
5353
handleTalkError: (data) = function(){console.log("对讲失败",data)},
54-
width:600,
55-
height:400,
54+
width:375,
55+
height:200,
5656
})
5757
</script>
5858
</body>

0 commit comments

Comments
 (0)