利用优酷云SDK仿今日头条短视频播放-阿里云开发者社区

开发者社区> 云原生> 正文

利用优酷云SDK仿今日头条短视频播放

简介: 前言 需求是模仿今日头条短视频播放,过程中遇到的问题如下: 优酷云播放器SDK在ListView、ViewPager和ListView、ViewPager和Fragment等多重嵌套模式下全屏工作。

img_22aae1775c057e08ff6da4eb1a0d4b2b.png

前言

需求是模仿今日头条短视频播放,过程中遇到的问题如下:

  1. 优酷云播放器SDK在ListView、ViewPager和ListView、ViewPager和Fragment等多重嵌套模式下全屏工作。
  2. ListView中加载过多的视频播放器在滑动过程中保证用户体验。

进入ListView中会看到一列视频,看到的视频仅仅是视频的封面,点击播放的图标,才会初始化播放器控件,进行播放视频的操作,保证了列表中视频播放时候的流程和操作体验。


一、解决SDK在ListView嵌套模式下全屏工作

优酷云SDK播放器点击全屏时候,播放器会充满他的父容器。ListView中的Item不是。进行自定义横竖屏操作,重写全屏按钮的实现方法,进行全屏操作时候,打开一个新的播放器页面,再进行全屏操作。

禁用播放器本身的横竖屏设置

youkuPlayerView.setUseOrientation(false);

然后再通过youkuPlayerView.setUIListener设置对横竖屏按钮的监听

...
youkuPlayerView.setUIListener(new YoukuUIListener() {
            @Override
            public void onBackBtnClick() { }

            @Override
            public void onFullBtnClick() {
                // 打开全屏的Activity
                Intent intent = new Intent();
                intent.setClass(mContext, VideoFullscreenActivity.class);
                startActivity(intent);
            }
        });
...

重写播放器Activity的onConfigurationChanged,此处是监听手机旋转的地方,在这里加上自定义的横竖屏处理代码

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT) {
            // 即使响应为竖屏,也强制设置为横屏,这样可以始终保持横屏
            this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        } else if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            this.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }
    }

二、ListView中加载过多的视频播放器在滑动过程中保证用户体验

    // 1.定义变量,用于记录当前的playerView控件
    private YoukuPlayerView currentPlayerView;
            ...
            viewHolder.iv_bg.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // 2.点击播放器浮层上的播放按钮,将上一个正在播放的视频控件释放掉
                    if (null!=currentPlayerView) {
                        currentPlayerView.release();
                    }
                    // 更新正在播放的currentPlayerView控件
                    currentPlayerView = viewHolder.ypv;
                    
                    initCheckedStatus();
                    isChecked.put(position, true);

                    viewHolder.rl_bg.setVisibility(View.INVISIBLE);
                    currentPlayerView.setVisibility(View.VISIBLE);
                    // 播放器控件初始化
                    initPlayer(currentPlayerView);
                    // 开始播放
                    currentPlayerView.playYoukuVideo(vid);

                    notifyDataSetChanged();

                }
            });

            if (isChecked.get(position)) {
                viewHolder.rl_bg.setVisibility(View.INVISIBLE);
                viewHolder.ypv.setVisibility(View.VISIBLE);
            } else {
                viewHolder.iv_bg.setVisibility(View.VISIBLE);
                viewHolder.ypv.setVisibility(View.INVISIBLE);
            }
            return convertView;
        }

四、遇到的问题

点击ListView中其中一个视频,进行全屏操作,然后返回。会发现视频出于黑屏,无法播放,优酷SDK报错误。将onResume()中再次将控件进行初始化,并且调用控件的onPause()方法


    @Override
    protected void onResume() {
        super.onResume();
        Log.i("MainActivity", "onResume()");
        if(null!=currentPlayerView) {
            initPlayer(currentPlayerView);
            currentPlayerView.pause();
        }
    }

    public void initPlayer(YoukuPlayerView youkuPlayerView) {
        youkuPlayerView.attachActivity(MainActivity.this);
        youkuPlayerView.setPreferVideoDefinition(VideoDefinition.VIDEO_HD);
        youkuPlayerView.setPlayerListener(new MyPlayerListener());
        youkuPlayerView.setUseOrientation(false);
        youkuPlayerView.setUIListener(new YoukuUIListener() {
            @Override
            public void onBackBtnClick() {

            }

            @Override
            public void onFullBtnClick() {
                Toast.makeText(mContext, "竖屏", Toast.LENGTH_SHORT).show();
                Intent intent = new Intent();
                intent.setClass(mContext, VideoFullscreenActivity.class);
                startActivity(intent);
            }
        });
    }

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章