专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络

免费热线：400-683-0016      微信咨询  |  联系我们

• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

把视频网站用Hbuilderx打包成APP时，实现全屏横屏旋转的方法

当前位置：网站建设 > 技术支持

前段时间研究封装APP，打算把一个视频网站封装成APP，用Hbuilderx封装，本来就套一个壳子，但后来发现无法实现视频全屏横屏旋转功能。

要知道，视频网站没有横屏很不爽的，测试网站在浏览器里是没有问题的，后来经过各种搜，终于找到一段代码！

封装时我们在app.js末尾加入下面的代码既可完美实现全屏横屏旋转功能兼容IOS和安卓。

此方法适用WAP2APP和H5+APP

代码如下：

var fullScreenOfAndroid = function() {
 if (true) {
  var playym = plus.webview.currentWebview();
  playym.setStyle({
   videoFullscreen: 'landscape'
  })
 } else {
  document.addEventListener('webkitfullscreenchange', function() {
   var el = document.webkitFullscreenElement;
   if (el) {
    plus.screen.lockOrientation('landscape')
   } else {
    plus.screen.unlockOrientation()
   }
  })
 }
};
var fullScreenOfIos = function(videoElem) {
 videoElem.addEventListener('webkitbeginfullscreen', function() {
  plus.screen.lockOrientation('landscape')
 });
 videoElem.addEventListener('webkitendfullscreen', function() {
  plus.screen.unlockOrientation()
 })
};