利用优酷云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);
            }
        });
    }

目录
相关文章
|
JavaScript 前端开发 中间件
Vue 2.x折腾记 - (13) Nuxt.js写一个常规音频的播放组件,动态注入微信,新浪微博的js-sdk
只是一个常规的播放组件,需要考虑微信,微博这类环境的播放 微信和微博,若没有用其官方的js-sdk初始化,没法播放。 我的文章从来都不推崇copy,仅供参考学习..具体业务具体分析定制才是最合理的
267 0
|
开发工具 iOS开发
产品百科 | RTC iOS SDK 播放音效文件的接口方法
阿里云 RTC SDK 为您提供伴奏文件和音效文件的相关接口方法,您可以通过本文了解其具体的实现方法。
产品百科 | RTC iOS SDK 播放音效文件的接口方法
|
开发工具 Android开发
产品百科 | RTC Android SDK 播放音效文件的接口方法
阿里云 RTC SDK 为您提供伴奏文件和音效文件的相关接口方法,您可以通过本文了解其具体的实现方法。
产品百科 | RTC Android SDK 播放音效文件的接口方法
|
开发工具 iOS开发
产品百科 | 如何在 iOS 模拟器上安装阿里云短视频 SDK
短视频 SDK 在 IOS 模拟器上安装和使用的方法
产品百科 | 如何在 iOS 模拟器上安装阿里云短视频 SDK
|
编解码 自然语言处理 安全
产品百科 | 阿里云短视频 SDK 不同版本功能比较
阿里云短视频 SDK 分为基础、标准、专业三个版本。短视频 SDK 提供短视频录制、导入和编辑的功能。为您提供产品级的 UI 开源界面,可以根据自己的业务定制界面,提供易用、稳定、统一的视频录制、导入裁剪和编辑高级接口,实现真正的二次开发、做到真正个性化。
产品百科 | 阿里云短视频 SDK 不同版本功能比较
|
存储 编解码 自然语言处理
产品百科 | 阿里云短视频 SDK
您可以阅读本文,快速了解短视频 SDK 的优势及功能,还可以体验短视频 SDK。
产品百科 | 阿里云短视频 SDK
|
API 开发工具
短视频app开发丨教新手三分钟分清楚什么是API和SDK
之前我写过一篇文章,名为《短视频app软件开发时,这些不能被人代做的工作》,在那篇文章中,我详细叙述了短视频app开发中所需用到的API和SDK,不料,有热心读者在下面评论问:“谁能通俗解释一下SDK是什么?”我顿时意识到了自己的疏忽,因为我在上篇文章中直接选择了较为技术的语言解释了API和SDK,没有考虑到我的语言过于生涩难懂了,本篇文章就来跟大家解释一下,用通俗的话说,短视频app中常用的API与SDK是什么? 一、先说作用在说API和SDK是什么之前,我们先来说说SDK的作用,毕竟可能有朋友没看过我上一篇文章,这样我直接说API和SDK是什么,他们就会很混乱。
|
开发工具 Android开发 C++
短视频SDK的编译设计与实现系列(一)——CMake基础入门
一、背景介绍 在开写之前,简单介绍一下我要写这篇文章的背景及出发的方向。我们团队主要是做端上的多媒体开发,而这里面有大量的代码都是用c++来写的,由于历史原因,原先的工程结构其交叉编译配置比较复杂,另外加上团队很多同学之前都是做端上业务开发的,本身对于c/c++的交叉编译不是特别熟悉,因此萌生了从实用角度梳理一篇能够帮大家快速扫盲的Cmake基础教程的想法,同时也是对我自己的一次学习总结。 既
4187 0
|
算法 开发工具 计算机视觉
动态贴纸SDK带来短视频新潮流
短视频美颜SDK在拥有了人脸识别的技术条件后,动态贴纸更加贴合人脸,使视频更具有趣味性,这也是提升用户留存率和体验感的重要原因之一。人脸识别SDK加上动态贴纸SDK,一站式的开发服务满足用户多变的应用需求,完善的系统解决方案满足不同并发层超低延时需求,让短视频系统轻松实现AR新玩法。
1817 0
|
开发工具 开发者 vr&ar
动态贴纸SDK是短视频应用场景中必须存在的吗
短视频应用自“诞生”至现在发展趋势一直都比较顺风顺水,除了其自身有趣的视频拍摄玩法和强大的引流能力之外,最吸引人的莫过于其中新颖百变的动态贴纸了。而站在开发者的角度来看,短视频应用内的动态贴纸大都是通过接入三方动态贴纸SDK所实现的,并不是程序内自带的,所以就给大家来简单分享下相关的内容。