[文章]

HarmonyOS应用开发-视频播放

2020-9-11 17:25:54  398 HarmonyOS 应用开发 视频播放
分享
0
一、介绍
本篇Codelab将实现的内容
HarmonyOS是面向全场景多终端的分布式操作系统,使得应用程序的开发打破了智能终端互通的性能和数据壁垒,业务逻辑原子化开发,适配多端。通过一个简单应用开发,体验HarmonyOS的视频播放能力

您将建立什么
在这个Codelab中,你将创建Demo Project,并将Demo编译成Hap,此示例应用程序展示了如何播放视频。

您将会学到什么
1.如何创建一个HarmonyOS Demo Project
2.如何构建一个Hap并且将其部署到智慧屏真机
3.通过此示例应用体验如何播放本地或者在线视频

二、您需要什么
1. 硬件要求
操作系统:Windows10 64位
内存:8G及以上。
硬盘:100g及以上。
分辨率:1280*800及以上

2. 软件要求
需手动下载安装,详细步骤请参考《DevEco Studio使用指南》2.1.2
JDK:DevEco Studio自动安装。
Node.js:请手动下载安装,详细步骤请参考《DevEco Studio使用指南》2.1.3 下载和安装Node.js。
HarmonyOS SDK:待DevEco Studio安装完成后,利用DevEco Studio来加载HarmonyOS SDK。详细步骤请参考《DevEco Studio使用指南》2.1.6 加载HarmonyOS SDK。
Maven库依赖包:如需手动拷贝和配置,详细步骤请参考《DevEco Studio使用指南》2.3 离线方式配置Maven库。

3. 需要的知识点
Java基础开发能力。

三、能力接入准备
实现HarmonyOS应用开发,需要完成以下准备工作:
·创建TV的工程
·准备密钥和证书请求文件
·申请调试证书
·应用开发
具体操作,请按照《DevEco Studio使用指南》中详细说明来完成。
提示:需要通过注册成开发者才能完成集成准备中的操作。

四、代码片段
1. 布局:
创建播放视频的Ability
  1. public class VedioPlayAbilitySlice extends AbilitySlice implements SuRFaceOps.Callback
复制代码
布局截图:


布局代码:
  1. //设置页面背景透明
  2. WindowManager windowManager = WindowManager.getinstance();
  3. Window window = windowManager.getTopWindow().get();
  4. window.setTransparent(true);

  5. //页面父布局
  6. DependentLayout myLayout = new DependentLayout(this);
  7. DependentLayout.LayoutConfig params = new DependentLayout.LayoutConfig(MATCH_PARENT, MATCH_PARENT);
  8. myLayout.setLayoutConfig(params);
  9. //显示视频的自定义videoView
  10. DependentLayout.LayoutConfig lpVideo = new DependentLayout.LayoutConfig(MATCH_PARENT, MATCH_PARENT);
  11. videoView = new VideoView(this, this);
  12. videoView.setHandler(handler);
  13. myLayout.addComponent(videoView, lpVideo);

  14. DependentLayout rlParent = new DependentLayout(this);
  15. DependentLayout.LayoutConfig lpParent = new DependentLayout.LayoutConfig(MATCH_PARENT, WRAP_CONTENT);
  16. lpParent.addRule(DependentLayout.ALIGN_PARENT_BOTTOM);
  17. lpParent.leftMargin = ConvertUtils.dp2Px(40);
  18. lpParent.rightMargin = ConvertUtils.dp2Px(40);
  19. lpParent.bottomMargin = ConvertUtils.dp2Px(40);
  20. myLayout.addComponent(rlParent, lpParent);
  21. //显示播放暂停按钮
  22. playBtn = new Image(this);
  23. DependentLayout.LayoutConfig lpPlayBtn = new DependentLayout.LayoutConfig(ConvertUtils.dp2Px(40), ConvertUtils.dp2Px(40));
  24. lpPlayBtn.addRule(DependentLayout.ALIGN_PARENT_RIGHT);
  25. playBtn.setLayoutConfig(lpPlayBtn);
  26. playBtn.setId(1112);
  27. playBtn.setPixelMap(ResourceTable.Media_pause);
  28. playBtn.setScaleType(Image.ScaleType.SCALE_TO_FULL);
  29. playBtn.invalidate();
  30. playBtn.setClickedListener(new Component.ClickedListener() {
  31. @Override
  32. public void onClick(Component component) {
  33.     if (videoView.getPlayState() == VideoView.STATE_PLAYING) {
  34.         videoView.pause();
  35.         playBtn.setPixelMap(ResourceTable.Media_play);
  36.     } else {
  37.         videoView.start();
  38.         playBtn.setPixelMap(ResourceTable.Media_pause);
  39.     }
  40. }
  41. });
  42. rlParent.addComponent(playBtn);
  43. //显示当前视频播放时间
  44. timePlay = new Text(this);
  45. DependentLayout.LayoutConfig lpTimePlay = new DependentLayout.LayoutConfig(WRAP_CONTENT, WRAP_CONTENT);
  46. lpTimePlay.addRule(DependentLayout.CENTER_VERTICAL);
  47. timePlay.setLayoutConfig(lpTimePlay);
  48. timePlay.setId(1111);
  49. timePlay.setText("00:00/00:00");
  50. timePlay.setTextSize(40);
  51. timePlay.setTextColor(Color.WHITE);
  52. rlParent.addComponent(timePlay);
  53. // 显示播放进度条
  54. roundProgressBar = new ProgressBar(this);
  55. roundProgressBar.setProgressWidth(ConvertUtils.dp2Px(5));
  56. roundProgressBar.setProgressColor(Color.RED);
  57. roundProgressBar.setMax(100);
  58. roundProgressBar.setProgress(0);
  59. DependentLayout.LayoutConfig lpProgressBar = new DependentLayout.LayoutConfig(MATCH_PARENT, ConvertUtils.dp2Px(40));
  60. lpProgressBar.addRule(DependentLayout.RIGHT_OF, timePlay.getId());
  61. lpProgressBar.leftMargin = ConvertUtils.dp2Px(20);
  62. lpProgressBar.rightMargin = ConvertUtils.dp2Px(60);
  63. rlParent.addComponent(roundProgressBar, lpProgressBar);
复制代码
2. 自定义VideoView
继承父类SurfaceProvider:
  1. public class VideoView extends SurfaceProvider implements Player.IPlayerCallback
复制代码
初始化:
  1. public VideoView(Context context, SurfaceOps.Callback callback) {
  2. super(context);
  3. player = new Player(getContext());
  4. player.setPlayerCallback(this);
  5. Optional surfaceHolderOptional = getSurfaceOps();
  6. SurfaceOps surfaceHolder = surfaceHolderOptional.get();
  7. surfaceHolder.addCallback(callback);
  8. setZOrderOnTop(false);
  9. state = STATE_INIT;
  10. }
复制代码
播放视频
如果播放的是在线视频,需要申请网络权限:
  1. "reqPermissions": [
  2.   {
  3.     "name": "harmonyos.permission.INTERNET"
  4.   }
  5. ]


  6. public void playAssets(String fileName, boolean isLooping, SurfaceOps holder) {
  7.     try {
  8. //播放本地视频:       //player.setSource(getContext().getResourceManager().getRawFileEntry(fileName).openRawFiLEDescriptor());
  9. //播放在线视频:
  10.         player.setSource(new Source("https://media.w3.org/2010/05/sintel/trailer.mp4"));
  11.         player.setVideoSurface(holder.getSurface());
  12.         player.enableSingleLooping(isLooping);
  13.         player.enableScreenOn(true);
  14.         player.prepare();
  15.         initPlayViewSize();
  16.         player.play();
  17.         if (state != STATE_INIT) {
  18.             player.rewindTo(currentTime * 1000);
  19.         }
  20.         state = STATE_PLAYING;
  21.         handler.sendEvent(InnerEvent.get(MESSAGE_UPDATE_PLAY_TIME));
  22.     } catch (Exception e) {
  23.         e.printStackTrace();
  24.         Log.hiLog(e.toString());
  25.     }
  26. }

  27. private void initPlayViewSize() {
  28.     int videoWidth = player.getVideoWidth();
  29.     int videoHeight = player.getVideoHeight();
  30.     Log.hiLog("videoWidth:" + videoWidth + ", videoHeight:" + videoHeight);
  31.     if (videoWidth < videoHeight) {
  32.         double scale = screenHeight * 1.f / videoHeight;
  33.         double currHeight = videoHeight * scale;
  34.         double currWidth = videoWidth * scale;
  35.         setHeight(((int) currHeight));
  36.         setWidth(((int) currWidth));
  37.     } else {
  38.         double scale = screenWidth * 1.f / videoWidth;
  39.         double currHeight = videoHeight * scale;
  40.         double currWidth = videoWidth * scale;
  41.         setHeight(((int) currHeight));
  42.         setWidth(((int) currWidth));
  43.     }
  44. }
复制代码
暂停:
  1. public void pause() {
  2. if (state == STATE_PLAYING) {
  3.     player.pause();
  4.     state = STATE_PAUSE;
  5. }
  6. }
复制代码
在AbilitySlice启动自动播放:
  1. @Override
  2. public void surfaceCreated(SurfaceOps surfaceOps) {
  3. Log.hiLog("surfaceCreated");
  4. videoView.playAssets("resources/rawfile/VID_20200613_204240.mp4", true, surfaceOps);
  5. }

  6. @Override
  7. public void surfaceDestroyed(SurfaceOps surfaceOps) {
  8. Log.hiLog("surfaceDestroyed");
  9. videoView.stop();
  10. }
复制代码
3. 响应遥控器点
  1. @Override
  2. public boolean onKeyUp(int keyCode, KeyEvent keyEvent) {
  3.     switch (keyCode) {
  4.         case KeyEvent.KEY_DPAD_CENTER:
  5.         case KeyEvent.KEY_ENTER:
  6.             playBtn.performClick();
  7.             return true;
  8.         default:
  9.                 break;
  10.     }
  11.     return false;
  12. }
复制代码


4. 编译运行该应用
通过hdc连接大屏设备
先查看智慧屏IP:
  1. 大屏设置->"网络与连接"->"网络"->"有线网络"
复制代码
在cmd或者IDE的Terminal输入命令
  1. hdc tconn 192.168.3.9:5555
复制代码
运行hap


五、恭喜你
干得好,你已经成功完成了HarmonyOS应用开发E2E体验,学到了:

如何创建一个HarmonyOS Demo Project
如何构建一个Hap并且将其部署到真机
在HarmonyOS上如何使用HarmonyOS的视频播放的能力

李颜 2020-9-11 17:37:11
中国崛起,华为崛起,HarmonyOS 崛起
回复

举报

评论

您需要登录后才可以回帖 登录 | 注册

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
发文章