鸿蒙OS 添加多媒体支持

2020-09-18 17:56 更新

本小节主要说明 HarmonyOS 车载多媒体的使用方法,以音乐 Demo 开发为例,开发步骤如下:

  1. 在布局中添加音乐播放控件。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
  3. ohos:id="$+id:play_music_root"
  4. ohos:width="-1"
  5. ohos:height="-1"
  6. ohos:left_padding="24vp"
  7. ohos:right_padding="24vp"
  8. ohos:orientation="1">
  9. <AdaptiveBoxLayout ohos:id="$+id:title_bar"
  10. ohos:width="-1"
  11. ohos:height="-2"
  12. ohos:top_margin="24vp">
  13. <Image ohos:id="$+id:arrow_down_btn"
  14. ohos:width="24vp"
  15. ohos:height="24vp"
  16. ohos:align_parent_left="$+id:title_bar"
  17. ohos:image_src="$media:default.png"/>
  18. <Image ohos:id="$+id:music_heart_btn"
  19. ohos:width="24vp"
  20. ohos:height="24vp"
  21. ohos:left_of="$+id:music_hiplay_btn"
  22. ohos:image_src="$media:default.png"/>
  23. <Image ohos:id="$+id:music_hiplay_btn"
  24. ohos:width="24vp"
  25. ohos:height="24vp"
  26. ohos:left_margin="16vp"
  27. ohos:align_parent_right="$+id:title_bar"
  28. ohos:image_src="$media:default.png"/>
  29. </AdaptiveBoxLayout>
  30. <DirectionalLayout ohos:id="$+id:cover_container"
  31. ohos:width="-1"
  32. ohos:height="-2"
  33. ohos:weight="1"
  34. ohos:orientation="1">
  35. <AdaptiveBoxLayout
  36. ohos:id="$+id:music_cover_adapt"
  37. ohos:width="-1"
  38. ohos:height="-1">
  39. <DirectionalLayout
  40. ohos:id="$+id:music_cover_wrap1"
  41. ohos:width="-2"
  42. ohos:height="-2"
  43. ohos:padding="20vp"
  44. ohos:orientation="1">
  45. <Image ohos:id="$+id:music_cover"
  46. ohos:width="300vp"
  47. ohos:height="300vp"
  48. ohos:layout_alignment="17"
  49. ohos:image_src="$media:default.png"/>
  50. </DirectionalLayout>
  51. <DirectionalLayout
  52. ohos:id="$+id:music_cover_wrap2"
  53. ohos:width="-1"
  54. ohos:height="-1"
  55. ohos:orientation="1">
  56. <DirectionalLayout
  57. ohos:width="-1"
  58. ohos:height="-2"
  59. ohos:layout_alignment="17"
  60. ohos:top_margin="20vp"
  61. ohos:bottom_margin="20vp"
  62. ohos:orientation="1">
  63. <Text ohos:id="$+id:music_title"
  64. ohos:text_size="20vp"
  65. ohos:shape="0"
  66. ohos:text_color="#FF000000"
  67. ohos:text_alignment="72"
  68. ohos:width="-1"
  69. ohos:height="-2"
  70. ohos:multiple_lines="false"/>
  71. <Text ohos:id="$+id:music_auth"
  72. ohos:text_size="14vp"
  73. ohos:shape="0"
  74. ohos:top_margin="4vp"
  75. ohos:text_color="#FF000000"
  76. ohos:text_alignment="72"
  77. ohos:width="-1"
  78. ohos:height="-2"
  79. ohos:multiple_lines="false"/>
  80. </DirectionalLayout>
  81. <Text ohos:id="$+id:music_lrc"
  82. ohos:width="-1"
  83. ohos:height="-2"
  84. ohos:layout_alignment="17"
  85. ohos:text="See the lights see the party the ball grows"
  86. ohos:text_size="13vp"
  87. ohos:text_color="#FF000000"
  88. ohos:text_alignment="72"/>
  89. </DirectionalLayout>
  90. </AdaptiveBoxLayout>
  91. </DirectionalLayout>
  92. <DirectionalLayout ohos:id="$+id:foot_wrap"
  93. ohos:width="-1"
  94. ohos:height="-2"
  95. ohos:orientation="1">
  96. <DirectionalLayout ohos:id="$+id:progress_container"
  97. ohos:width="-1"
  98. ohos:height="-2"
  99. ohos:top_margin="10vp"
  100. ohos:orientation="0">
  101. <Text ohos:id="$+id:play_progress_time"
  102. ohos:width="-2"
  103. ohos:height="-2"
  104. ohos:layout_alignment="16"
  105. ohos:right_margin="6vp"
  106. ohos:text_size="13vp"
  107. ohos:text_color="#FF000000"
  108. ohos:text_alignment="72"/>
  109. <SeekBar ohos:id="$+id:play_progress_bar"
  110. ohos:width="-1"
  111. ohos:height="14vp"
  112. ohos:layout_alignment="16"
  113. ohos:weight="1"/>
  114. <Text ohos:id="$+id:play_total_time"
  115. ohos:width="-2"
  116. ohos:height="-2"
  117. ohos:layout_alignment="16"
  118. ohos:left_margin="6vp"
  119. ohos:text_size="13vp"
  120. ohos:text_color="#FF000000"
  121. ohos:text_alignment="72"/>
  122. </DirectionalLayout>
  123. <DirectionalLayout ohos:id="$+id:control_container"
  124. ohos:width="-1"
  125. ohos:height="96vp"
  126. ohos:orientation="0">
  127. <DirectionalLayout ohos:id="$+id:control_box1"
  128. ohos:width="-2"
  129. ohos:height="-2"
  130. ohos:weight="1"
  131. ohos:layout_alignment="17"
  132. ohos:orientation="1">
  133. <Image ohos:id="$+id:volume_down_btn"
  134. ohos:width="24vp"
  135. ohos:height="24vp"
  136. ohos:layout_alignment="17"
  137. ohos:image_src="$media:default.png"/>
  138. </DirectionalLayout>
  139. <DirectionalLayout ohos:id="$+id:control_box2"
  140. ohos:width="-2"
  141. ohos:height="-2"
  142. ohos:weight="1"
  143. ohos:layout_alignment="17"
  144. ohos:orientation="1">
  145. <Image ohos:id="$+id:prev_btn"
  146. ohos:width="40vp"
  147. ohos:height="40vp"
  148. ohos:layout_alignment="17"
  149. ohos:image_src="$media:default.png"/>
  150. </DirectionalLayout>
  151. <DirectionalLayout ohos:id="$+id:control_box3"
  152. ohos:width="-2"
  153. ohos:height="-2"
  154. ohos:weight="1"
  155. ohos:layout_alignment="17"
  156. ohos:orientation="1">
  157. <Image ohos:id="$+id:play_btn"
  158. ohos:width="64vp"
  159. ohos:height="64vp"
  160. ohos:layout_alignment="17"
  161. ohos:image_src="$media:default.png"/>
  162. </DirectionalLayout>
  163. <DirectionalLayout ohos:id="$+id:control_box4"
  164. ohos:width="-2"
  165. ohos:height="-2"
  166. ohos:weight="1"
  167. ohos:layout_alignment="17"
  168. ohos:orientation="1">
  169. <Image ohos:id="$+id:next_btn"
  170. ohos:width="40vp"
  171. ohos:height="40vp"
  172. ohos:layout_alignment="17"
  173. ohos:image_src="$media:default.png"/>
  174. </DirectionalLayout>
  175. <DirectionalLayout ohos:id="$+id:control_box5"
  176. ohos:width="-2"
  177. ohos:height="-2"
  178. ohos:weight="1"
  179. ohos:layout_alignment="17"
  180. ohos:orientation="1">
  181. <Image ohos:id="$+id:volume_up_btn"
  182. ohos:width="24vp"
  183. ohos:height="24vp"
  184. ohos:layout_alignment="17"
  185. ohos:image_src="$media:default.png"/>
  186. </DirectionalLayout>
  187. </DirectionalLayout>
  188. </DirectionalLayout>
  189. </DirectionalLayout>

  1. 加载播放控件。

  1. super.setUIContent(ResourceTable.Layout_play_music_layout);

  1. 实现音乐播放管理类。

  1. public class PlayManager {
  2. ...
  3. private Player player;
  4. public synchronized boolean play(String filePath, int startMilliSecond) {
  5. ...
  6. FileDescriptor fd = IoUtil.getFileDescriptor(filePath);
  7. Source source = new Source(fd);
  8. player.setSource(source);
  9. boolean isSuccess = player.prepare();
  10. isSuccess = player.rewindTo(startMilliSecond * MICRO_MILLI_RATE, REWIND_NEXT_SYNC);
  11. // 播放
  12. isSuccess = player.play();
  13. isPlaying.set(isSuccess);
  14. return isSuccess;
  15. }
  16. public synchronized void pause(int startMilliSecond) {
  17. ...
  18. player.pause();
  19. }
  20. public synchronized void stop() {
  21. if (player == null) {
  22. return;
  23. }
  24. player.stop();
  25. isPlaying.set(false);
  26. LogUtil.info(TAG, "stop success");
  27. player.release();
  28. player = null;
  29. }
  30. }

  1. 调用音乐播放管理类的接口播放音乐。

  1. // 指定歌曲播放
  2. String path = "/data/music/files/data/wonderful_life.mp3";
  3. PlayManager.getInstance().play(path,1);

  1. 在布局中增加视频播放控件。

  1. // 视频布局实现方法
  2. public class MySurfaceSlice extends AbilitySlice {
  3. ...
  4. public void makeSurfaceView() {
  5. ...
  6. mySurfaceProvider = new SurfaceProvider(this);
  7. adaptiveBoxLayoutSurfaceView.AdaptiveBoxLayout.LayoutConfig().addComponent(mySurfaceProvider);
  8. }
  9. }

  1. 实现视频播放管理类。

  1. public class VideoPlay {
  2. public synchronized void startPlay() {
  3. ...
  4. ret = playImpl.play();
  5. }
  6. public synchronized void preParePlay() {
  7. ...
  8. ret = playImpl.prepare();
  9. }
  10. public synchronized void pausePlay() {
  11. ...
  12. boolean pauseRet = playImpl.pause();;
  13. }
  14. public synchronized void setSourcePlay(String filePath) {
  15. ...
  16. FileDescriptor fd = IoUtil.getFileDescriptor(filePath);
  17. Source source = new Source(fd);
  18. playImpl.setSource(source);
  19. }
  20. @Override
  21. public synchronized void onStop() {
  22. ...
  23. super.onStop();
  24. }
  25. }

  1. 调用视频播放管理类的接口播放视频。

  1. // 调用视频播放类进行播放
  2. String filePath = "/data/video/files/data/festival.mp4";
  3. VideoPlay videoPlay = new VideoPlay()
  4. videoPlay.setSourcePlay(filePath);
  5. videoPlay.startPlay();
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号