DistributedVideoPlayer 分布式视频播放器(一)

作者：Buty9147 2021-10-19 14:27:07

开发

前端

分布式 本示例是在官方Video Play Ability 模板基础上做了扩展开发,官方模板提供基本的视频播放功能，并允许您在手机和电视之间传输视频.

成都创新互联公司主要从事成都做网站、网站设计、网页设计、企业做网站、公司建网站等业务。立足成都服务凉州,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

想了解更多内容，请访问：

51CTO和华为官方合作共建的鸿蒙技术社区

介绍

本示例是在官方Video Play Ability 模板基础上做了扩展开发,官方模板提供基本的视频播放功能，并允许您在手机和电视之间传输视频.

应用分为手机端(entry)和TV端(entrytv),以及一个依赖模块(commonlib).

在示例的基础之上,手机端增加了视频播放列表功能,以及播放详情页和评论功能;手机端播放的视频可以流转到TV端,并实现远端遥控的功能。

内容比较多,会分两期给大家讲解,本期文章主要讲解的内容是手机端部分:

1.实现一个视频播放器 2.实现一个播放列表 3.实现一个评论功能.

[本文正在参与优质创作者激励]

效果展示

搭建环境

安装DevEco Studio，详情请参考DevEco Studio下载。

设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：

如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。

如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。

下载源码后，使用DevEco 打开项目。

代码结构

Java代码

  
 
 
 

   
  
  
  
│  config.json
   
  
  
  
│
   
  
  
  
├─java
   
  
  
  
│  └─com
   
  
  
  
│      └─buty
   
  
  
  
│          └─distributedvideoplayer
   
  
  
  
│              │  MainAbility.java               
   
  
  
  
│              │  MyApplication.java
   
  
  
  
│              │
   
  
  
  
│              ├─ability
   
  
  
  
│              │      DevicesSelectAbility.java   
   
  
  
  
│              │      MainAbilitySlice.java           #视频播放列表页
   
  
  
  
│              │      SyncControlServiceAbility.java  
   
  
  
  
│              │      VideoPlayAbility.java           #视频播放Ability
   
  
  
  
│              │      VideoPlayAbilitySlice.java      #视频播放详情和评论页
   
  
  
  
│              │
   
  
  
  
│              ├─components
   
  
  
  
│              │      EpisodesSelectionDialog.java    
   
  
  
  
│              │      RemoteController.java
   
  
  
  
│              │      VideoPlayerPlaybackButton.java  #播放按钮组件
   
  
  
  
│              │      VideoPlayerSlider.java          #播放时间进度条
   
  
  
  
│              │
   
  
  
  
│              ├─constant
   
  
  
  
│              │      Constants.java                  #常量
   
  
  
  
│              │      ResolutionEnum.java             #分辨率枚举
   
  
  
  
│              │      RouteRegister.java              #自定义路由
   
  
  
  
│              │
   
  
  
  
│              ├─data
   
  
  
  
│              │      VideoInfo.java                  #视频基础信息
   
  
  
  
│              │      VideoInfoService.java           #视频信息服务,用于模拟数据
   
  
  
  
│              │      Videos.java                     #视频列表
   
  
  
  
│              │ 
   
  
  
  
│              ├─model
   
  
  
  
│              │      CommentModel.java               #评论模型
   
  
  
  
│              │      DeviceModel.java                
   
  
  
  
│              │      ResolutionModel.java            #解析度模型
   
  
  
  
│              │      VideoModel.java                 #视频模型
   
  
  
  
│              │
   
  
  
  
│              ├─provider
   
  
  
  
│              │      CommentItemProvider.java        #评论数据提供程序
   
  
  
  
│              │      DeviceItemProvider.java      
   
  
  
  
│              │      ResolutionItemProvider.java     #解析度数据提供程序
   
  
  
  
│              │      VideoItemProvider.java          #视频数据提供程序
   
  
  
  
│              │
   
  
  
  
│              └─utils
   
  
  
  
│                      AppUtil.java                   #工具类
   
  
  
  
│                      DateUtils.java
  
 
 
 

资源文件

  
 
 
 

   
  
  
  
└─resources
   
  
  
  
    ├─base
   
  
  
  
    │  ├─element
   
  
  
  
    │  │      color.json
   
  
  
  
    │  │      float.json
   
  
  
  
    │  │      strarray.json
   
  
  
  
    │  │      string.json
   
  
  
  
    │  │
   
  
  
  
    │  ├─graphic
   
  
  
  
    │  │      background_ability_control_bg.xml          
   
  
  
  
    │  │      background_ability_control_middle.xml
   
  
  
  
    │  │      background_ability_control_ok.xml
   
  
  
  
    │  │      background_ability_devices.xml
   
  
  
  
    │  │      background_ability_episodes.xml
   
  
  
  
    │  │      background_button_click.xml
   
  
  
  
    │  │      background_button_clicked.xml
   
  
  
  
    │  │      background_episodes_item.xml
   
  
  
  
    │  │      background_episodes_quality.xml
   
  
  
  
    │  │      background_episodes_trailer.xml
   
  
  
  
    │  │      background_slide_thumb.xml
   
  
  
  
    │  │      background_switch_checked.xml
   
  
  
  
    │  │      background_switch_empty.xml
   
  
  
  
    │  │      background_switch_thumb.xml
   
  
  
  
    │  │      background_switch_track.xml
   
  
  
  
    │  │      list_divider.xml
   
  
  
  
    │  │      shape_slider_thumb.xml
   
  
  
  
    │  │
   
  
  
  
    │  ├─layout
   
  
  
  
    │  │      ability_main.xml                                #播放列表布局
   
  
  
  
    │  │      comments_item.xml                               #单条评论布局
   
  
  
  
    │  │      dialog_playlist.xml                     
   
  
  
  
    │  │      dialog_resolution_list.xml
   
  
  
  
    │  │      dialog_table_layout.xml
   
  
  
  
    │  │      hm_sample_ability_video_box.xml                 #视频播放组件页
   
  
  
  
    │  │      hm_sample_ability_video_comments.xml            #播放详情布局页
   
  
  
  
    │  │      hm_sample_view_video_box_seek_bar_style1.xml    #播放进度条布局
   
  
  
  
    │  │      hm_sample_view_video_box_seek_bar_style2.xml
   
  
  
  
    │  │      remote_ability_control.xml
   
  
  
  
    │  │      remote_ability_episodes.xml
   
  
  
  
    │  │      remote_ability_select_devices.xml
   
  
  
  
    │  │      remote_ability_sound_equipment.xml
   
  
  
  
    │  │      remote_device_item.xml
   
  
  
  
    │  │      remote_episodes_item.xml
   
  
  
  
    │  │      remote_video_quality_item.xml
   
  
  
  
    │  │
   
  
  
  
    │  ├─media
   
  
  
  
    │  │      comments.png
   
  
  
  
    │  │      great.png
   
  
  
  
    │  │      icon.png
   
  
  
  
    │  │      ic_anthology.png
   
  
  
  
    │  │
   
  
  
  
    │  └─profile
   
  
  
  
    ├─en
   
  
  
  
    │  └─element
   
  
  
  
    │          string.json
   
  
  
  
    │
   
  
  
  
    ├─rawfile
   
  
  
  
    │      videos.json                                      #模拟数据JSON文件
   
  
  
  
    │
   
  
  
  
    └─zh
   
  
  
  
        └─element
   
  
  
  
                string.json
  
 
 
 

实现步骤

1.实现一个视频播放器

引入对commonlib的依赖后,实现一个视频播放器就很容易了.

entry的build.gradle 增加对commonlib的依赖

  
 
 
 

   
  
  
  
dependencies {
   
  
  
  
    implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
   
  
  
  
    testImplementation 'junit:junit:4.13'
   
  
  
  
    ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.200'
   
  
  
  
    //引用commonlib 依赖
   
  
  
  
    implementation project(path: ':commonlib')
   
  
  
  
}
  
 
 
 

1.1.页面布局 hm_sample_ability_video_comments.xml

添加一个VideoPlayerView组件

  
 
 
 

   
  
  
  

   
  
  
  

   
  
  
  
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
   
  
  
  
    ohos:id="$+id:root_layout"
   
  
  
  
    ohos:height="match_parent"
   
  
  
  
    ohos:width="match_parent"
   
  
  
  
    ohos:background_element="#FFFFFFFF"
   
  
  
  
    ohos:orientation="vertical">
   
  
  
  

   
  
  
  
    
   
  
  
  
        ohos:id="$+id:video_view"
   
  
  
  
        ohos:height="250vp"
   
  
  
  
        ohos:width="match_parent"/>
   
  
  
  
...
   
  
  
  

  
 
 
 

1.2.Java代码

获取视频组件对象后,只需要2步就可以了: 1.设置视频资源路径和描述; 2.设置播放器核心组件和自定义组件.几行关键代码 VideoPlayAbilitySlice.java

  
 
 
 

   
  
  
  
/**
   
  
  
  
 * 初始化播放器
   
  
  
  
 */
   
  
  
  
private void initPlayer() {
   
  
  
  
    HiLog.debug(LABEL, "initPlayer");
   
  
  
  
    //自定义视频播放视图组件
   
  
  
  
    player = (VideoPlayerView) findComponentById(ResourceTable.Id_video_view);
   
  
  
  

   
  
  
  
    if (player != null) {
   
  
  
  
        //获取视频信息服务
   
  
  
  
        videoService = new VideoInfoService(getContext());
   
  
  
  
        //获取当前播放视频的路径
   
  
  
  
        String path = videoService
   
  
  
  
                .getVideoInfoByIndex(currentPlayingIndex)
   
  
  
  
                .getResolutions()
   
  
  
  
                .get(currentPlayingResolutionIndex)
   
  
  
  
                .getUrl();
   
  
  
  
        //视频描述
   
  
  
  
        String videoDesc = videoService.getVideoInfoByIndex(currentPlayingIndex).getVideoDesc();
   
  
  
  
        HiLog.debug(LABEL, "videoDesc = " + videoDesc + " path = " + path);
   
  
  
  

   
  
  
  
        if (path != null) {
   
  
  
  
            //设置路径和描述
   
  
  
  
            player.setVideoPathAndTitle(path, videoDesc);
   
  
  
  
            //视频准备完毕就播放并设置播放进度条
   
  
  
  
            player.setPlayerOnPreparedListener(
   
  
  
  
                    () -> {
   
  
  
  
                        player.start();
   
  
  
  
                        //设置播放位置
   
  
  
  
                        player.seekTo(currentPlayingPosition);
   
  
  
  
                    });
   
  
  
  
            //双击播放或暂停
   
  
  
  
            player.setDoubleClickedListener(
   
  
  
  
                    component -> {
   
  
  
  
                        //是否在控制TV端
   
  
  
  
                        if (remoteController != null && remoteController.isShown()) {
   
  
  
  
                            return;
   
  
  
  
                        }
   
  
  
  
                        HiLog.debug(LABEL, "VideoPlayView double-click event");
   
  
  
  
                        if (player.isPlaying()) {
   
  
  
  
                            player.pause();
   
  
  
  
                        } else {
   
  
  
  
                            player.start();
   
  
  
  
                        }
   
  
  
  
                    });
   
  
  
  
            //监听播放错误
   
  
  
  
            player.setErrorListener(
   
  
  
  
                    (errorType, errorCode) -> {
   
  
  
  
                        ToastDialog toast = new ToastDialog(getContext());
   
  
  
  
                        switch (errorType) {
   
  
  
  
                            case HmPlayerAdapter.ERROR_LOADING_RESOURCE:
   
  
  
  
                                toast.setText(
   
  
  
  
                                        AppUtil.getStringResource(
   
  
  
  
                                                getContext(), ResourceTable.String_media_file_loading_error));
   
  
  
  
                                break;
   
  
  
  
                            case HmPlayerAdapter.ERROR_INVALID_OPERATION:
   
  
  
  
                                toast.setText(
   
  
  
  
                                        AppUtil.getStringResource(
   
  
  
  
                                                getContext(), ResourceTable.String_invalid_operation));
   
  
  
  
                                break;
   
  
  
  
                            default:
   
  
  
  
                                toast.setText(
   
  
  
  
                                        AppUtil.getStringResource(
   
  
  
  
                                                getContext(), ResourceTable.String_undefined_error_type));
   
  
  
  
                                break;
   
  
  
  
                        }
   
  
  
  
                        getUITaskDispatcher().asyncDispatch(toast::show);
   
  
  
  
                    });
   
  
  
  
        }
   
  
  
  
        //添加核心组件,播放时间进度滑块
   
  
  
  
        addCoreComponent();
   
  
  
  
        //添加自定义组件
   
  
  
  
        addCustomComponent();
   
  
  
  
        HiLog.debug(LABEL, "initPlayer finish");
   
  
  
  
    }
   
  
  
  
}
  
 
 
 

2.实现一个视频播放列表功能

2.1.页面布局 ability_main.xml

使用了DirectionalLayout布局组件,还有ScrollView和ListContainer组件

  
 
 
 

   
  
  
  

   
  
  
  

   
  
  
  
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
   
  
  
  
    ohos:id="$+id:ability_main_root"
   
  
  
  
    ohos:height="match_parent"
   
  
  
  
    ohos:width="match_parent"
   
  
  
  
    ohos:orientation="vertical">
   
  
  
  

   
  
  
  
    
   
  
  
  
        ohos:id="$+id:ability_main_titlebar"
   
  
  
  
        ohos:height="match_content"
   
  
  
  
        ohos:width="match_parent"
   
  
  
  
        ohos:background_element="#B0B0B0"
   
  
  
  
        ohos:orientation="horizontal"
   
  
  
  
        ohos:padding="10vp">
   
  
  
  

   
  
  
  
        
   
  
  
  
            ohos:height="match_parent"
   
  
  
  
            ohos:width="match_content"
   
  
  
  
            ohos:weight="1">
   
  
  
  

   
  
  
  
            
   
  
  
  
                ohos:id="$+id:tag_favorite"
   
  
  
  
                ohos:height="match_content"
   
  
  
  
                ohos:width="match_parent"
   
  
  
  
                ohos:text="关注"
   
  
  
  
                ohos:text_size="$float:normal_text_size_15"
   
  
  
  
                />
   
  
  
  
        
   
  
  
  

   
  
  
  
        
   
  
  
  
            ohos:height="match_content"
   
  
  
  
            ohos:width="match_content"
   
  
  
  
            ohos:weight="1">
   
  
  
  

   
  
  
  
            
   
  
  
  
                ohos:id="$+id:tag_support"
   
  
  
  
                ohos:height="match_content"
   
  
  
  
                ohos:width="match_content"
   
  
  
  
                ohos:text="推荐"
   
  
  
  
                ohos:text_size="$float:normal_text_size_15"
   
  
  
  
                />
   
  
  
  
        
   
  
  
  

   
  
  
  
        
   
  
  
  
            ohos:height="match_content"
   
  
  
  
            ohos:width="match_content"
   
  
  
  
            ohos:weight="1">
   
  
  
  

   
  
  
  
            
   
  
  
  
                ohos:id="$+id:tag_movie"
   
  
  
  
                ohos:height="match_content"
   
  
  
  
                ohos:width="match_content"
   
  
  
  
                ohos:element_end="$id:favorite"
   
  
  
  
                ohos:text="电影"
   
  
  
  
                ohos:text_color="#1C6AE9"
   
  
  
  
                ohos:text_size="$float:normal_text_size_15"
   
  
  
  
                ohos:text_weight="600"/>
   
  
  
  

   
  
  
  
            
   
  
  
  
                ohos:id="$+id:device_item_divider"
   
  
  
  
                ohos:height="2vp"
   
  
  
  
                ohos:width="30vp"
   
  
  
  
                ohos:background_element="$graphic:list_divider"/>
   
  
  
  
        
   
  
  
  

   
  
  
  
        
   
  
  
  
            ohos:height="match_content"
   
  
  
  
            ohos:width="match_content"
   
  
  
  
            ohos:weight="1">
   
  
  
  

   
  
  
  
            
   
  
  
  
                ohos:id="$+id:tag_live"
   
  
  
  
                ohos:height="match_content"
   
  
  
  
                ohos:width="match_parent"
   
  
  
  
                ohos:text="直播"
   
  
  
  
                ohos:text_size="$float:normal_text_size_15"
   
  
  
  
                />
   
  
  
  
        
   
  
  
  

   
  
  
  
        
   
  
  
  
            ohos:height="match_content"
   
  
  
  
            ohos:width="match_content"
   
  
  
  
            ohos:weight="1">
   
  
  
  

   
  
  
  
            
   
  
  
  
                ohos:id="$+id:tag_tv"
   
  
  
  
                ohos:height="match_content"
   
  
  
  
                ohos:width="match_parent"
   
  
  
  
                ohos:text="电视"
   
  
  
  
                ohos:text_size="$float:normal_text_size_15"
   
  
  
  
                />
   
  
  
  
        
   
  
  
  

   
  
  
  
    
   
  
  
  

   
  
  
  
    
   
  
  
  
        ohos:height="match_parent"
   
  
  
  
        ohos:width="match_parent"
   
  
  
  
        ohos:id="$+id:video_list_scroll" >
   
  
  
  

   
  
  
  
        
   
  
  
  
            ohos:id="$+id:videos_container"
   
  
  
  
            ohos:height="match_parent"
   
  
  
  
            ohos:width="match_parent">
   
  
  
  

   
  
  
  
        
   
  
  
  
    
   
  
  
  

  
 
 
 

2.2.Java代码

申请用户敏感权限授权 MainAbility.java

  
 
 
 

   
  
  
  
/**
   
  
  
  
 * Entry to the main interface of the program
   
  
  
  
 */
   
  
  
  
public class MainAbility extends Ability {
   
  
  
  
    private static final int REQUEST_CODE = 1;
   
  
  
  

   
  
  
  
    //读写媒体权限
   
  
  
  
    private final String[] permissionLists
   
  
  
  
            = new String[]{"ohos.permission.READ_MEDIA", "ohos.permission.WRITE_MEDIA"};
   
  
  
  

   
  
  
  
    @Override
   
  
  
  
    public void onStart(Intent intent) {
   
  
  
  
        super.onStart(intent);
   
  
  
  
        super.setUIContent(ResourceTable.Layout_ability_main);
   
  
  
  
        super.setMainRoute(MainAbilitySlice.class.getName());
   
  
  
  

   
  
  
  
        //申请授权
   
  
  
  
        verifyPermissions();
   
  
  
  
    }
   
  
  
  
    private void verifyPermissions() {
   
  
  
  
        for (String permissionList : permissionLists) {
   
  
  
  
            int result = verifySelfPermission(permissionList);
   
  
  
  
            if (result != IBundleManager.PERMISSION_GRANTED) {
   
  
  
  
                requestPermissionsFromUser(permissionLists, REQUEST_CODE);
   
  
  
  
            }
   
  
  
  
        }
   
  
  
  
    }
   
  
  
  
...
  
 
 
 

通过VideoInfoService读取videos.json文件初始化视频容器列表MainAbilitySlice.java

  
 
 
 

   
  
  
  
public class MainAbilitySlice extends AbilitySlice {
   
  
  
  
    public static final HiLogLabel LABEL = new HiLogLabel(0, 0, "=>MainAbilitySlice");
   
  
  
  
    private VideoInfoService videoService;
   
  
  
  

   
  
  
  
    @Override
   
  
  
  
    protected void onStart(Intent intent) {
   
  
  
  
        super.onStart(intent);
   
  
  
  
        //加载视频播放器页面
   
  
  
  
        super.setUIContent(ResourceTable.Layout_ability_main);
   
  
  
  
        initVideoContainer();
   
  
  
  

   
  
  
  
    }
   
  
  
  

   
  
  
  
    /**
   
  
  
  
     * 模拟数据
   
  
  
  
     * 初始化视频容器列表
   
  
  
  
     */
   
  
  
  
    private void initVideoContainer() {
   
  
  
  
        HiLog.debug(LABEL, "initVideoContainer");
   
  
  
  
        List videos = new ArrayList<>();
   
  
  
  
        //获取视频信息服务
   
  
  
  
        videoService = new VideoInfoService(getContext());
   
  
  
  

   
  
  
  
        for (int i = 0; i < 7; i++) {
   
  
  
  
            VideoModel video = new VideoModel();
   
  
  
  
            video.setComments(new Random().nextInt(1000));
   
  
  
  
            video.setFavorites(new Random().nextInt(1000));
   
  
  
  
            video.setGreats(new Random().nextInt(10000));
   
  
  
  
            VideoInfo videoInfo = videoService.getVideoInfoByIndex(i);
   
  
  
  
            videoInfo.setIndex(i);
   
  
  
  
            video.setVideoInfo(videoInfo);
   
  
  
  
            videos.add(video);
   
  
  
  
        }
   
  
  
  

   
  
  
  
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_videos_container);
   
  
  
  
        //容器绑定数据提供程序
   
  
  
  
        VideoItemProvider provider = new VideoItemProvider(this, videos, this);
   
  
  
  
        listContainer.setItemProvider(provider);
   
  
  
  
    }
   
  
  
  
}
  
 
 
 

 视频容器列表数据提供程序 VideoItemProvider.java

  
 
 
 

   
  
  
  
public class VideoItemProvider extends BaseItemProvider {
   
  
  
  
    private static final HiLogLabel LABEL = new HiLogLabel(0, 0, "=>VideoItemProvider");
   
  
  
  
    private final Context context;
   
  
  
  
    private final List list;
   
  
  
  
    private AbilitySlice abilitySlice;
   
  
  
  
    //当前播放视频分辨率索引
   
  
  
  
    private int currentPlayingResolutionIndex = 0;
   
  
  
  

   
  
  
  
    /**
   
  
  
  
     * Initialization
   
  
  
  
     */
   
  
  
  
    public VideoItemProvider(Context context, List list, AbilitySlice abilitySlice) {
   
  
  
  
        HiLog.debug(LABEL, "VideoItemProvider");
   
  
  
  
        this.context = context;
   
  
  
  
        this.list = list;
   
  
  
  
        this.abilitySlice = abilitySlice;
   
  
  
  
    }
   
  
  
  

   
  
  
  
    public Context getContext() {
   
  
  
  
        return context;
   
  
  
  
    }
   
  
  
  

   
  
  
  
    @Override
   
  
  
  
    public int getCount() {
   
  
  
  
        return list == null ? 0 : list.size();
   
  
  
  
    }
   
  
  
  

   
  
  
  
    @Override
   
  
  
  
    public Object getItem(int position) {
   
  
  
  
        if (list != null && position >= 0 && position < list.size()) {
   
  
  
  
            return list.get(position);
   
  
  
  
        }
   
  
  
  
        return new VideoModel();
   
  
  
  
    }
   
  
  
  

   
  
  
  
             

                文章名称：DistributedVideoPlayer分布式视频播放器(一)
                

                网页链接：http://www.mswzjz.cn/qtweb/news47/300397.html
            
            

                攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等
                                
            

                广告
                
            
            

                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                贝锐智能