在鸿蒙上实现本地和Internet视频资源播放 精华

attitude
发布于 2021-3-16 15:51
浏览
6收藏

1. 介绍


本篇Codelab将实现的内容


本篇Codelab旨在让开发者了解手机HarmonyOS应用开发,常用布局、典型控件、FA组件、媒体-视频、跨设备协同的体验以及从工程创建到代码和布局的编写,再到编译构建、部署和运行全过程。

 

您将构建一个基于HarmonyOS Player类实现的应用程序,该应用程序功能为播放本地视频资源或从Internet获得的视频资源。效果图如下:

在鸿蒙上实现本地和Internet视频资源播放-鸿蒙开发者社区

您将会学到什么

 

 ● 如何使用Player类播放视频
 ● 如何使用自定义控件来控制视频播放
 ● 如何添加并使用媒体事件的事件侦听器和回调


硬件要求


 ● 操作系统:Windows10 64位
 ● 内存:8GB及以上
 ● 硬盘:100GB及以上
 ● 分辨率:1280*800像素及以上


软件要求

 

 ● 安装Huawei DevEco Studio,详情请参考下载和安装软件
 ● 设置Huawei DevEco Studio开发环境,Huawei DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境
     1.如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作
     2.如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境

说明

如需要在手机中运行程序,则需要提前申请证书,如使用模拟器可忽略

 

 ● 生成秘钥和申请证书,详情请参考准备签名文件

 

技能要求


 ● 具备DevEco Studio中创建、构建和运行应用经验
 ● 熟悉Ability和AbilitySlice生命周期及使用PA/FA的能力

 

2. 代码结构

本篇Codelab只对核心代码进行讲解,对于完整代码,我们在参考提供下载方式。接下来我们会讲解整个工程的代码结构,如下图:

在鸿蒙上实现本地和Internet视频资源播放-鸿蒙开发者社区

 ● api:视频播放状态改变及屏幕状态变化监听。
 ● constant:定义视频状态、进度条和控制器状态。
 ● factoty:创建SourceFactory类来根据视频来源创建视频源。
 ● manager:创建HmPlayerLifecycle来处理Player类的生命周期。
 ● view:创建PlayerLoading、SimplePlayerController类分别为视频加载状态及进度条控制类文件。
 ● HmPlayer:封装播放器的主要功能方法。
 ● slice:创建MainAbilitySlice、SimplePlayerAbilitySlice分别为进入应用的主程序页面和视频播放页面。
 ● utils:存放所有封装好的公共方法,如DateUtils,LogUtils等。
 ● resources:存放工程使用到的资源文件,其中resources\base\layout下存放xml布局文件;resources\base\media下存放视频文件。
 ● config.json:Ability声明及权限配置。

 

3. 创建视频播放业务逻辑

 

该应用程序可播放的视频格式包括mp4、mov、3gp、mkv,首先准备一份视频文件并复制到"resources/base/layout/media"文件目录。下面将会介绍视频列表布局及播放逻辑。

 

创建视频播放页面文件及布局


Step 1 - 创建simple_video_play_layout.xml布局文件展示视频列表。

<DependentLayout 
    xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    ohos:id="$+id:parent" 
    ohos:height="match_parent" 
    ohos:width="match_parent"> 
    <DependentLayout 
        ohos:id="$+id:parent_layout" 
        ohos:height="match_parent" 
        ohos:width="match_parent" 
        ohos:alignment="center" 
        ohos:background_element="#ffffff"/> 
</DependentLayout>

 

该布局文件有两个id,parent是整个播放页面的布局id,parent_layout是视频画面的布局id。

 

Step 2 - 创建SimplePlayerAbilitySlice类,初次创建该页面进行初始化。

 

@Override 
public void onStart(Intent intent) { 
    super.onStart(intent); 
    super.setUIContent(ResourceTable.Layout_simple_video_play_layout); 
    // 在Constants中定义视频播放的起始位置 
    startMillisecond = intent.getIntParam(Constants.INTENT_STARTTIME_PARAM, 0); 
    // 初始化surface布局 
    initView(); 
    player.getLifecycle().onStart(); 
}

 

将预置的视频资源初始化为url对象,并通过initView方法对视频播放的控件进行初始化及赋值。

 

private String url = "entry/resources/base/media/gubeishuizhen.mp4"; 
private void initView() { 
    DependentLayout playerLayout = (DependentLayout) findComponentById(ResourceTable.Id_parent_layout); 
    player = new HmPlayer.Builder(this).setStartMillisecond(mStartMillisecond).setFilePath(url).create(); 
    playerLayout.addComponent(player.getPlayerView()); 
    player.play(); 
}

—-结束

 

创建HmPlayer

 

HmPlayer类是继承自对HarmonyOS Player封装的ImPlayer。如果您还不了解HarmonyOS Player,请参考视频播放开发指导

 

需要注意的是当页面初始化Player类执行play方法时,视频并没有出现画面。图像渲染在屏幕上需要使用SurfaceProvider,该类控制surface的尺寸和格式,修改surface的像素,监视surface的变化等等。当底层显示系统第一次创建surface之后会调用surfaceCreated(SurfaceOps surfaceOps)回调函数。HmPlayer中通过设置回调增加对视频的播放开始或停止控制。

 

private SurfaceOps.Callback surfaceCallback = new SurfaceOps.Callback() { 
    @Override 
    public void surfaceCreated(SurfaceOps surfaceOps) { 
        // 标记surfaceView状态 
        isSurfaceViewCreated = true; 
        surface = surfaceOps.getSurface(); 
        start(); 
    } 
  
    @Override 
    public void surfaceChanged(SurfaceOps surfaceOps, int i, int width, int height) { 
        LogUtil.info(TAG, "surfaceChanged i is " + i + ",width is " + width + ",height is " + height); 
    } 
  
    @Override 
    public void surfaceDestroyed(SurfaceOps surfaceOps) { 
        LogUtil.info(TAG, "surfaceDestroyed"); 
        isSurfaceViewCreated = false; 
    } 
};

 

surfaceView的初始化在HmPlayer构造函数中:

 

private HmPlayer(Builder builder) { 
    ... 
    surfaceView = new SurfaceProvider(playerBuilder.mContext); 
    DependentLayout.LayoutConfig layoutConfig = new DependentLayout.LayoutConfig(); 
    layoutConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT); 
    // 设置surfaceView布局 
    surfaceView.setLayoutConfig(layoutConfig); 
    surfaceView.setVisibility(Component.VISIBLE); 
    surfaceView.setFocusable(Component.FOCUS_ENABLE); 
    surfaceView.setTouchFocusable(true); 
    surfaceView.requestFocus(); 
    // 设置surfaceView是否在最上方 
    surfaceView.pinToZTop(playerBuilder.isTopPlay); 
    surfaceView.getSurfaceOps().get().addCallback(surfaceCallback); 
}

 

在执行surfaceCreated回调时会执行HarmonyOS中Player的play方法。

 

private void start() { 
    if (isSurfaceViewCreated) { 
        threadPoolExecutor.execute(() -> { 
            player.setVideoSurface(surface); 
            player.prepare(); 
            if (playerBuilder.startMillisecond > 0) { 
                int microsecond = playerBuilder.startMillisecond * MICRO_MILLI_RATE; 
                player.rewindTo(microsecond); 
            } else { 
                player.play(); 
            } 
        }); 
    } 
}

 

编译运行该应用程序


应用启动后,视频文件将被打开并开始播放,持续播放到最后。效果如下图:

在鸿蒙上实现本地和Internet视频资源播放-鸿蒙开发者社区

4. 创建视频控制业务逻辑

 

上面的章节实现了视频播放的基本功能,本小节将创建一个控制器,包含基本的媒体控制UI元素如播放、暂停、恢复、重新加载按钮以及进度条。该控制器将与HmPlayer类一起提供一个基本功能全面且可操作的视频播放器。

 

创建SimpleVideoPlayerController


SimplePlayerController类为自定义组件,包括控制视频的播放、暂停、恢复以及进度条等控件。此处使用HarmonyOS EventHandler来进行UI更新,请参考HarmonyOS开发者文档线程间通信

 

public SimplePlayerController(Context context, ImplPlayer player) { 
    super(context); 
    this.context = context; 
    implPlayer = player; 
    // 创建子线程给自己发消息来及时更新UI 
    createHandler(); 
    initView(); 
    initListener(); 
}

 

其中initView方法初始化播放控制的控件。

 

Component playerController = LayoutScatter.getInstance(context).parse( 
        ResourceTable.Layout_simple_player_controller_layout, null, false); 
addComponent(playerController); 
if (playerController.findComponentById(ResourceTable.Id_play_controller) instanceof Image) { 
    // 播放或者暂停按钮 
    playToogle = (Image) playerController.findComponentById(ResourceTable.Id_play_controller); 
} 
if (playerController.findComponentById(ResourceTable.Id_play_forward) instanceof Image) { 
    // 前进按钮 
    imageForward = (Image) playerController.findComponentById(ResourceTable.Id_play_forward); 
} 
if (playerController.findComponentById(ResourceTable.Id_play_backward) instanceof Image) { 
    // 后退按钮 
    imageBackward = (Image) playerController.findComponentById(ResourceTable.Id_play_backward); 
} 
if (playerController.findComponentById(ResourceTable.Id_progress) instanceof Slider) { 
    // 进度条 
    progressBar = (Slider) playerController.findComponentById(ResourceTable.Id_progress); 
}

 

initListener方法是对HmPlayer和播放控制器相互之间状态变化的监听处理。

 

implPlayer.addPlayerStatusCallback(statusChangeListener);

 

添加HmPlayer状态变化的监听,例如当视频播放完毕时,回调StatusChangeListener的statusCallback来刷新对控制器中各种组件的状态和显示值。HmPlayer中HmPlayerCallback中通过底层播放回调onPlayBackComplete来对界面视频状态进行更改。

 

@Override 
public void onPlayBackComplete() { 
    for (StatusChangeListener callback : statusChangeCallbacks) { 
        status = PlayerStatus.COMPLETE; 
        callback.statusCallback(PlayerStatus.COMPLETE); 
    } 
    stop(); 
}

 

在SimplePlayerController的statusCallback中更新控制按钮状态。

 

if (status == PlayerStatus.STOP || status == PlayerStatus.COMPLETE) { 
    controllerHandler.sendEvent(Constants.PLAYER_PROGRESS_RUNNING, EventHandler.Priority.IMMEDIATE); 
    playToogle.setPixelMap(ResourceTable.Media_ic_update); 
    progressBar.setEnabled(false); 
}

 

此时播放按钮更新成待刷新图标,进度条不可拖拽。

 

创建PlayerLoading

 

在视频画面缓冲没有完成时,播放界面如果提供加载进度信息,用户体验更好。创建的PlayerLoading类设置一个布局并且添加StatusChangeListener监听回调,使得该控件可以根据状态显示或隐藏。

public PlayerLoading(Context context, ImplPlayer player) { 
    super(context); 
    this.player = player; 
    initView(context); 
    initListener(); 
} 
private void initListener() { 
    player.addPlayerStatusCallback(new StatusChangeListener() { 
        @Override 
        public void statusCallback(PlayerStatus status) { 
            //获取主线程更新UI 
            mContext.getUITaskDispatcher().delayDispatch( 
                    new Runnable() { 
                        @Override 
                        public void run() { 
                            if (status == PlayerStatus.PREPARING || status == PlayerStatus.BUFFERING) { 
                                show(); 
                            } else if (status == PlayerStatus.PLAY) { 
                                hide(); 
                            } else { 
                                LogUtil.info(PlayerLoading.class.getName(), "statuCallback else message"); 
                            } 
                        } 
                    }, 0); 
        } 
    }); 
}

 

编译运行该应用程序


经过上面的步骤,此时运行程序就可以看到一个有前进、后退、播放、暂停的界面,用户可以自主控制该视频播放,效果如下图:

在鸿蒙上实现本地和Internet视频资源播放-鸿蒙开发者社区

5. 恭喜你

 

通过本篇Codelab你学到了:

 ● HarmonyOS中一个完整的视频播放应用需包括UI、Surface和媒体播放器。
 ● 使用player.setSource(source)指定视频文件的路径。
 ● 使用SurfaceOps.Callback来处理surface创建、状态改变和销毁的回调。
 ● 创建内部类HmPlayerCallback实现Player.IPlayerCallback的接口,监听视频状态改变,添加对控制器组件状态和缓冲界面的回调方法。
 ● 创建HmPlayerLifeCycle来管理HmPlayer生命周期。

 

6. 参考

 

gitee源码

github源码

 

分类
标签
已于2021-3-17 11:33:23修改
3
收藏 6
回复
举报
7条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

可以,楼主文章挺详细的。

回复
2021-3-17 09:26:17
软通田可辉
软通田可辉

学习学习

回复
2021-3-17 11:14:53
鸿蒙张荣超
鸿蒙张荣超

👍👍👍

回复
2021-3-17 14:46:25
wx5ef8c4f099202
wx5ef8c4f099202

播放网络url 好像不行,为啥呢

1
回复
2021-7-9 17:14:16
wx5b9f6062b7e98
wx5b9f6062b7e98 回复了 wx5ef8c4f099202
播放网络url 好像不行,为啥呢

对啊,谁能解决?

回复
2021-8-11 17:07:38
鸿蒙开发
鸿蒙开发

我也遇到了播放网络视频时报错

回复
2021-8-11 19:57:07
chaoxiaoshu
chaoxiaoshu

网络视频是不是要先下载到本地设备上,再调用Player组件播放

回复
2021-8-12 10:16:09
回复
    相关推荐