apicloud apicloud

注册
查看: 16469|回复: 68

[APP开发技巧] 视频播放器 ios+安卓都可用

 

主题:
8
帖子:
43
云币:
163

[APP开发技巧] 视频播放器 ios+安卓都可用

 
16469 68 | 发表于 2015-9-1 02:51:46 |阅读模式 | |
本帖最后由 段鹏举 于 2015-11-17 14:53 编辑

1.到这个网站下载最新版5.0.0,https://github.com/videojs/video.js/blob/stable/docs/index.md,不要用cdn版本的,因为后面要修改插件代码。
   然后引入文件
   <link href="//example.com/path/to/video-js.min.css" rel="stylesheet">
<script src="//example.com/path/to/video.min.js"></script>   然后引入video标签
   <video id="example_video_1" class="video-js vjs-default-skin"
  controls preload="auto" width="640" height="264"  poster="http://video-js.zencoder.com/oceans-clip.png"  data-setup='{"example_option":true}'> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /> <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p></video>   width height可以去掉,后面用js加。poster就是封面图,可以用流浪大哥写过的教程,用canvas生成一个。source就是资源,格式自选。 p标签可以删掉。
2.这个时候用chrome预览发现播放器就已经能用了。但是在apicloud真机同步后就发现,安卓机没有图像,只有声音,苹果机点击播放就自动跳到系统播放器了。。
  播放视频的网页只能用openframe方法打开,才能解决安卓机的问题,试了,果然是。
  我的代码:var $winWidth=api.winWidth;
        var $winHeight=api.winHeight;
        var $i=$winHeight/$winWidth;
        var h=$winWidth/$i;
    api.openFrame({
            name: 'learninfo-videoframe',
            url: '../html/learninfo-videoframe.html',
            bounces:false,
            vScrollBarEnabled:false,
            rect: {
                    x:0,
                    y:0,
                    wwinWidth,
                    h:h,
            }
    });
3.苹果机的问题可以在video标签里添加属性webkit-playsinline解决,但是无法解决点击全屏按钮会自动跳到系统播放器,安卓机没反应。
我的代码:<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none"
      poster="http://video-js.zencoder.com/oceans-clip.png "
      data-setup="{}"  webkit-playsinline>
    <source src="http://7o50kb.com2.z0.glb.qiniucdn.com/kuaisu3.mp4" type='video/mp4'></source>
  </video>
4.感觉苹果机用自带播放器全屏播放页挺好看的。。。就将就着来吧。至此只剩下安卓机全屏的问题。百度了很多资料,好像我们要解决的不是全屏,而是移动设备要旋转并且放大才对吧。于是。。。
我修改了video.js的源码,增加了一个点击全屏按钮的事件。8983行
Player.prototype.requestFullscreen = function requestFullscreen() {
  api.sendEvent({
    name: 'full',
});
        var fsApi = _fullscreenApiJs2['default'];
    this.isFullscreen(true);

    if (fsApi.requestFullscreen) {
      // the browser supports going fullscreen at the element level so we can
      // take the controls fullscreen as well as the video

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

        // If cancelling fullscreen, remove event listener.
        if (this.isFullscreen() === false) {
          Events.off(_globalDocument2['default'], fsApi.fullscreenchange, documentFullscreenChange);
        }

        this.trigger('fullscreenchange');
      }));

      this.el_[fsApi.requestFullscreen]();
    } else if (this.tech.supportsFullScreen()) {
      // we can't take the video.js controls fullscreen but we can go fullscreen
      // with native controls
      this.techCall('enterFullScreen');
    } else {
      // fullscreen isn't supported so we'll just stretch the video element to
      // fill the viewport
      this.enterFullWindow();
      this.trigger('fullscreenchange');
    }
    return this;
  };

同时在视频的frame页面加入监听
        api.addEventListener({
    name: 'full'
}, function(ret){
    api.setFrameAttr({
    name: 'learninfo-videoframe',
    rect:{
        x:0,
        y:0,
        w:'auto',
        h:'auto'
    },
    bounces: false,
    vScrollBarEnabled:false,
    hScrollBarEnabled:false
});
var el=$api.byId('myvideo');
$api.addCls(el, 'fullscreen');
          var hh=api.winHeight;
        var ww=api.winWidth;
         var myPlayer = videojs('example_video_1');
    myPlayer.width(hh);
    myPlayer.height(ww);     
});

我的思路是,先让frame充满屏幕,再让包着video标签的div旋转90度,再设置video的宽等于frame的高,高等于frame的宽。
.fullscreen{
-moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
}

发现就可以了!!!点击全屏后,不会启动系统播放器,而是让video.js播放器旋转90度至全屏,controls面板也都正常,想要的结果就实现了。

离开全屏的思路刚好反着,直接上源码。9034行
  Player.prototype.exitFullscreen = function exitFullscreen() {
           api.sendEvent({
    name: 'exitfull',
});
    var fsApi = _fullscreenApiJs2['default'];
    this.isFullscreen(false);

    // Check for browser element fullscreen support
    if (fsApi.requestFullscreen) {
      _globalDocument2['default'][fsApi.exitFullscreen]();
    } else if (this.tech.supportsFullScreen()) {
      this.techCall('exitFullScreen');
    } else {
      this.exitFullWindow();
      this.trigger('fullscreenchange');
    }

    return this;
  };

frame监听代码:
api.addEventListener({
    name: 'exitfull'
}, function(ret){
        var $winWidth=api.winWidth;
        var $winHeight=api.winHeight;
        var $i=$winHeight/$winWidth;
        var h=$winWidth/$i+20;
    api.setFrameAttr({
    name: 'learninfo-videoframe',
    rect:{
        x:0,
        y:0,
        wwinWidth,
        h:h
    },
    bounces: false,
    vScrollBarEnabled:false,
    hScrollBarEnabled:false
});
var el=$api.byId('myvideo');
$api.removeCls(el, 'fullscreen');
          var h=api.frameHeight;
        var w=api.frameWidth;
         var myPlayer = videojs('example_video_1');
    myPlayer.width(w);
    myPlayer.height(h);   
});

思路是:先让frame变回原来的大小,再让包着video标签的div旋转回去,再设置video的宽高至正常。

2

查看全部评分

马路杀手

UID:15627

主题:
119
帖子:
446
云币:
804
发表于 2015-9-1 14:08:57 |
发个包吧,整理起来挺费事

主题:
8
帖子:
323
云币:
4029

中秋节APICloud粉丝女朋友单身狗

发表于 2015-9-1 07:04:25 |
感谢分享,有源码吗??

主题:
8
帖子:
43
云币:
163
 楼主| 发表于 2015-9-1 11:23:30 |
loveDlhd 发表于 2015-9-1 07:04
感谢分享,有源码吗??

源码不都在上面嘛~就用到那么多

主题:
8
帖子:
43
云币:
163
 楼主| 发表于 2015-9-1 11:24:58 |

这是效果图。。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

主题:
46
帖子:
4314
云币:
47923

足球狗APICloud粉丝连续签到100天一周年中秋节社会摇圣诞节老司机首长好!托马斯全旋女朋友不想上班!装逼侠单身狗锤子侠SB侠我李白贼6APICloud大会专属勋章不觉明厉强者王者狗年旺旺旺儿童节快乐

发表于 2015-9-1 13:56:49 |
写了这么多 mark一下先

主题:
1
帖子:
36
云币:
9
发表于 2015-9-5 12:40:45 |
收藏收藏收藏

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-9-5 13:30:34 |
感谢分享

主题:
0
帖子:
39
云币:
108
发表于 2015-9-5 17:03:59 |
非常不错,这就是我要的效果!!!!!!!

新手上路

UID:121505

主题:
3
帖子:
10
云币:
56
发表于 2015-9-6 07:52:16 |
收藏收藏
您需要登录后才可以回帖 登录 | 立即注册

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