apicloud apicloud

注册
查看: 6921|回复: 4

[APP开发技巧] 分享一下我使用video.js 在安卓上面的坑和解决方法

新手上路

UID:435371

主题:
6
帖子:
46
云币:
119

[APP开发技巧] 分享一下我使用video.js 在安卓上面的坑和解决方法

6921 4 | 发表于 2017-12-22 18:05:31 |阅读模式 | |
本帖最后由 杨愿 于 2017-12-26 14:49 编辑

安卓手机上面使用video.js问题千奇百怪

//魅族手机  在进入全屏的时候 apicloud 监听不到keyback 事件 需要2次才能监听到(说多了都是泪,当初把我坑死了)
//部分手机 点击全屏按钮无效....

不多说了,文采有限,直接上干货

我们需要在video.js 源码里面添加2行代码
Player.prototype 原型下分别找到(requestFullscreen,exitFullscreen)方法
requestFullscreen里this.isFullscreen(true)后面添加this.trigger('requestFullscreen');
exitFullscreenthis.isFullscreen(false)后面添加this.trigger('exitFullscreen');

  1. Player.prototype.requestFullscreen = function requestFullscreen() {
  2.     var fsApi = FullscreenApi;

  3.     this.isFullscreen(true);
  4.     this.trigger('requestFullscreen');
  5.     if (fsApi.requestFullscreen) {
  6.       // the browser supports going fullscreen at the element level so we can
  7.       // take the controls fullscreen as well as the video

  8.       // Trigger fullscreenchange event after change
  9.       // We have to specifically add this each time, and remove
  10.       // when canceling fullscreen. Otherwise if there's multiple
  11.       // players on a page, they would all be reacting to the same fullscreen
  12.       // events
  13.       on(document_1, fsApi.fullscreenchange, bind(this, function documentFullscreenChange(e) {
  14.         this.isFullscreen(document_1[fsApi.fullscreenElement]);

  15.         // If cancelling fullscreen, remove event listener.
  16.         if (this.isFullscreen() === false) {
  17.           off(document_1, fsApi.fullscreenchange, documentFullscreenChange);
  18.         }
  19.         /**
  20.          * @event Player#fullscreenchange
  21.          * @type {EventTarget~Event}
  22.          */
  23.         this.trigger('fullscreenchange');
  24.       }));

  25.       this.el_[fsApi.requestFullscreen]();
  26.     } else if (this.tech_.supportsFullScreen()) {
  27.       // we can't take the video.js controls fullscreen but we can go fullscreen
  28.       // with native controls
  29.       this.techCall_('enterFullScreen');
  30.     } else {
  31.       // fullscreen isn't supported so we'll just stretch the video element to
  32.       // fill the viewport
  33.       this.enterFullWindow();
  34.       /**
  35.        * @event Player#fullscreenchange
  36.        * @type {EventTarget~Event}
  37.        */
  38.       this.trigger('fullscreenchange');
  39.     }
  40.   };

  41.   /**
  42.    * Return the video to its normal size after having been in full screen mode
  43.    *
  44.    * @fires Player#fullscreenchange
  45.    */


  46.   Player.prototype.exitFullscreen = function exitFullscreen() {
  47.     var fsApi = FullscreenApi;

  48.     this.isFullscreen(false);
  49.     this.trigger('exitFullscreen');
  50.     // Check for browser element fullscreen support
  51.     if (fsApi.requestFullscreen) {
  52.       document_1[fsApi.exitFullscreen]();
  53.     } else if (this.tech_.supportsFullScreen()) {
  54.       this.techCall_('exitFullScreen');
  55.     } else {
  56.       this.exitFullWindow();
  57.       /**
  58.        * @event Player#fullscreenchange
  59.        * @type {EventTarget~Event}
  60.        */
  61.       this.trigger('fullscreenchange');
  62.     }
  63.   };
复制代码





//改好源码后复制粘贴跑起来吧
记得把文件路径改改

一会上传一份demo 需要的话 可以下载看看


  1. <!DOCTYPE HTML>
  2. <html>

  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <title>播放器</title>
  8.     <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
  9.     <link rel="stylesheet" type="text/css" href="../../../css/video-js.css" />
  10.     <style>
  11.         html,
  12.         body {
  13.             height: 100%;
  14.         }
  15.         .video-js {
  16.             width: 100% !important;
  17.             height: 230px;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22.     <video id="video" webkit-playsinline class="video-js vjs-default-skin vjs-big-play-centered" controls width="100%">
  23.         <!-- <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' /> -->
  24.         <p class="vjs-no-js">播放视频需要启用 JavaScript,推荐使用支持HTML5的浏览器访问。</p>
  25.     </video>
  26. </body>
  27. <script type="text/javascript" src="../../../script/video/video.min.js"></script>
  28. <script type="text/javascript">
  29.     //activeType === 'requestFullscreen' 为进入全屏状态
  30.     //activeType === '' 为不在全屏状态
  31.     var activeType = "",
  32.         myPlayer = null;
  33.     apiready = function(){
  34.         openVideo();
  35.     }
  36.     function openVideo() {
  37.         'undefined' !== typeof api && api.addEventListener({
  38.             name: 'keyback'
  39.         }, function(ret, err) {
  40.             if ('requestFullscreen' === activeType) {
  41.                 //按下keyback键 的时候在全屏状态 需要退出一下
  42.                 myPlayer.exitFullscreen();
  43.             } else {
  44.                 //不在全屏状态  关闭页面
  45.                 myPlayer.exitFullscreen();
  46.                 api.closeWin();
  47.             }
  48.         })
  49.         myPlayer = videojs("#video", {
  50.             "techOrder": ["html5"],
  51.             "autoplay": true,
  52.             "preload": "auto",
  53.             "inactivityTimeout": 1000 * 5,
  54.             "controlBar": {
  55.                 remainingTimeDisplay: false, //隐藏 TimeDisplay
  56.                 volumePanel: false, //音量是否显示
  57.                 captionsButton: false,
  58.                 chaptersButton: false,
  59.                 liveDisplay: false,
  60.                 playbackRateMenuButton: false,
  61.                 subtitlesButton: false,
  62.                 // fullscreenToggle: fullscreenToggle
  63.             }
  64.         }, function() {
  65.             this.src("http://vjs.zencdn.net/v/oceans.mp4");
  66.             //处理 部分安卓手机 无法进入全屏问题
  67.             this.on('requestFullscreen', function() {
  68.                     activeType = 'requestFullscreen'; //更新一下状态
  69.                     onFullScreen()
  70.                 })
  71.                 //处理 部分安卓手机 无法退出全屏问题
  72.             this.on('exitFullscreen', function(a) {
  73.                     activeType = ''; //更新一下状态
  74.                     onNoramlScreen()
  75.                 })
  76.                 /**
  77.                  * 监听 视频播放器 进入 退出 全屏事件
  78.                  * 用以解决全屏 的时候 部分安卓手机 第一次按下keyback键apicloud监听不到问题 需2次apicloud才能监听到(魅族mx4Pro 有此问题)
  79.                  **/
  80.             this.on('fullscreenchange', function() {
  81.                 activeType = this.isFullscreen() ? 'requestFullscreen' : '';
  82.                 if (activeType === 'requestFullscreen') {
  83.                     onFullScreen()
  84.                 } else {
  85.                     onNoramlScreen()
  86.                 }
  87.             })
  88.         });
  89.     }
  90.     // 全屏回调函数
  91.     function onFullScreen() {
  92.         if ('undefined' !== typeof api) {
  93.             api.setFullScreen({
  94.                 fullScreen: true
  95.             });
  96.             api.setScreenOrientation({
  97.                 orientation: 'landscape_left'
  98.             });
  99.         }
  100.     };
  101.     // 退出全屏回调函数
  102.     function onNoramlScreen() {
  103.         if ('undefined' !== typeof api) {
  104.             api.setScreenOrientation({
  105.                 orientation: 'portrait_up'
  106.             });
  107.             api.setFullScreen({
  108.                 fullScreen: false
  109.             });
  110.         }
  111.     }
  112. </script>

  113. </html>
复制代码




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

新手上路

UID:435371

主题:
6
帖子:
46
云币:
119
 楼主| 发表于 2017-12-22 18:06:53 |
怎么发布后看着排版怪怪的

老司机

UID:253706

主题:
176
帖子:
16972
云币:
8007
发表于 2017-12-22 23:15:00 |
index05 发表于 2017-12-22 18:06
怎么发布后看着排版怪怪的

回复别人帖子的的时候有个代码的图标,用这个插入代码试试。

主题:
2
帖子:
6
云币:
0
发表于 2017-12-29 11:29:53 |
看看

主题:
1
帖子:
2
云币:
3
发表于 2020-3-16 09:51:52 |
分享一下我使用video.js 在安卓上面的坑和解决方法 [修改]
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表