@toc

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

介绍

本示例是在官方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组件

<?xml version="1.0" encoding="utf-8"?>
<StackLayout
    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">

    <com.buty.distributedvideoplayer.player.ui.widget.media.VideoPlayerView
        ohos:id="$+id:video_view"
        ohos:height="250vp"
        ohos:width="match_parent"/>
...
</StackLayout>

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组件

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    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">

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

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

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

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

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

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

            <Text
                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"/>

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

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

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

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

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

    </DirectionalLayout>

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

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

        </ListContainer>
    </ScrollView>
</DirectionalLayout>

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<VideoModel> 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<VideoModel> list;
    private AbilitySlice abilitySlice;
    //当前播放视频分辨率索引
    private int currentPlayingResolutionIndex = 0;

    /**
     * Initialization
     */
    public VideoItemProvider(Context context, List<VideoModel> 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();
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        HiLog.debug(LABEL, "getComponent:" + convertComponent + "," + componentContainer);
        final Component cpt;
        final VideoPlayerView player;

        VideoModel item = list.get(position);

        //初次获取组件
        if (convertComponent == null) {
            cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_hm_sample_ability_video_box, componentContainer, false);
            player = (VideoPlayerView) cpt.findComponentById(ResourceTable.Id_video_view);
            //初始化播放器组件
            initPlayer(player,item.getVideoInfo());
        } else {
            //ScrollView滑动时也会调用getComponent方法,
            cpt = convertComponent;
            player = (VideoPlayerView) cpt.findComponentById(ResourceTable.Id_video_view);
        }

        //设置其他组件的值
        Text text_favorites = (Text) cpt.findComponentById(ResourceTable.Id_text_favorites);
        Text text_comments = (Text) cpt.findComponentById(ResourceTable.Id_text_comments);
        Text text_greats = (Text) cpt.findComponentById(ResourceTable.Id_text_greats);
        //注意setText的参数类型是字符串
        text_favorites.setText(item.getFavorites() + "");
        text_comments.setText(item.getComments() + "");
        text_greats.setText(item.getGreats() + "");
        //点击评论图标,停止当前播放器,打开VideoPlayAbility的Slice页面
        Image commentImage = (Image) cpt.findComponentById(ResourceTable.Id_image_comment);
        commentImage.setClickedListener(component -> {
            //停止播放,列表页面的播放器
            player.stopPlayback();
            //打开带有评论的播放页面
            startVideoPlayDetail(item,player);
        });
        return cpt;
    }

    /**
     * 初始化播放器
     */
    private void initPlayer(VideoPlayerView player, VideoInfo videoInfo) {
        HiLog.debug(LABEL, "initPlayer");
        if (player != null) {
            //视频路径
            String path = videoInfo
                    .getResolutions()
                    .get(currentPlayingResolutionIndex)
                    .getUrl();
            HiLog.debug(LABEL, "path:" + path);

            //视频描述
            String videoDesc = videoInfo.getVideoDesc();
            HiLog.debug(LABEL, "videoDesc  = " + videoDesc + " path = " + path);

            if(path!=null) {
                //设置路径和名称
                player.setVideoPathAndTitle(path, videoDesc);
                //双击播放或暂停
                player.setDoubleClickedListener(
                        component -> {
                            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;
                            }
                            abilitySlice.getUITaskDispatcher().asyncDispatch(toast::show);
                        });
            }
            //添加核心组件,播放时间进度滑块
            addCoreComponent(player);
            //添加自定义组件
            HiLog.debug(LABEL, "initPlayer finish");
        }
    }

    /**
     * 添加播放按钮，剧集，进度条等核心组件
     * Adding core component like playback button and seek bar
     */
    private void addCoreComponent(VideoPlayerView player) {
        HiLog.debug(LABEL, "addCoreComponent");
        //添加播放按钮组件
        player.addPlaybackButton(new VideoPlayerPlaybackButton(getContext()), VideoBoxArea.BOTTOM);
        //添加播放进度条组件
        player.addSeekBar(
                new VideoPlayerSlider(getContext()),
                VideoBoxArea.BOTTOM,
                (int) AppUtil.getFloatResource(getContext(), ResourceTable.Float_normal_margin_24));
    }

    /**
     * 打开视频播放详情页
     */
    private void startVideoPlayDetail(VideoModel item,VideoPlayerView player) {
        HiLog.debug(LABEL, "startVideoPlayDetail ");
        //启动评论播放页面
        Intent intentService = new Intent();
        //播放视频评论数
        intentService.setParam("comments",String.valueOf(item.getComments()));

        VideoInfo videoInfo=item.getVideoInfo();

        if(videoInfo!=null) {
            //播放视频在播放列表中的索引
            intentService.setParam("currentPlayingIndex", videoInfo.getIndex());
            //播放视频的分辨率索引
            intentService.setParam("currentPlayingResolutionIndex", currentPlayingResolutionIndex);
            //当前视频播放的位置
            intentService.setParam(RemoteConstant.INTENT_PARAM_REMOTE_START_POSITION,(int)player.getCurrentPosition());
            HiLog.debug(LABEL,RemoteConstant.INTENT_PARAM_REMOTE_START_POSITION+":"+player.getCurrentPosition());
        }
        Operation operation =
                new Intent.OperationBuilder()
                        .withDeviceId("")
                        .withBundleName(abilitySlice.getBundleName())
                        .withAbilityName(VideoPlayAbility.class)
                        .build();
        intentService.setOperation(operation);
        abilitySlice.startAbility(intentService);
    }
}

3.实现一个评论功能

3.1.页面布局,评论列表布局页 hm_sample_ability_video_comments.xml

使用了StackLayout,DependentLayout布局组件和ListContainer,TextField,Text 组件

...
    <!-- 工具栏 -->
    <DependentLayout
        ohos:id="$+id:comments_bar"
        ohos:height="40vp"
        ohos:width="match_parent"
        ohos:background_element="#FFDDDADA"
        ohos:layout_alignment="top"
        ohos:top_margin="250vp">

        <DirectionalLayout
            ohos:id="$+id:favorite"
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:align_parent_left="true"
            ohos:left_margin="10vp"
            ohos:orientation="horizontal"
            ohos:padding="4vp">

            <Text
                ohos:id="$+id:text_favorites"
                ohos:height="match_parent"
                ohos:width="match_parent"
                ohos:left_padding="5vp"
                ohos:text="简介"
                ohos:text_size="16fp"
                ohos:text_weight="600">

            </Text>
        </DirectionalLayout>

        <DirectionalLayout
            ohos:id="$+id:comment"
            ohos:height="match_parent"
            ohos:width="match_content"
            ohos:end_of="$id:favorite"
            ohos:left_margin="20vp"
            ohos:orientation="horizontal"
            ohos:padding="4vp">

            <Text
                ohos:id="$+id:text_comment"
                ohos:height="match_parent"
                ohos:width="match_content"
                ohos:left_padding="5vp"
                ohos:text="评论"
                ohos:text_weight="600"
                ohos:text_size="16fp">
            </Text>

            <Text
                ohos:id="$+id:text_comments"
                ohos:height="match_parent"
                ohos:width="match_content"
                ohos:left_padding="5vp"
                ohos:text="1161"
                ohos:text_weight="600"
                ohos:text_size="16fp">
            </Text>
        </DirectionalLayout>

    </DependentLayout>

    <!-- 评论列表 -->
    <DependentLayout
        ohos:id="$+id:comments_view"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#FFFDFFFF"
        ohos:top_margin="290vp">

        <ListContainer
            ohos:id="$+id:comments_container"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:layout_alignment="horizontal_center"
            ohos:orientation="vertical"/>

    </DependentLayout>

    <!-- 评论对话框 -->
    <DependentLayout
        ohos:id="$+id:comments_dialog"
        ohos:height="70vp"
        ohos:width="match_parent"
        ohos:background_element="#FFF4F4F8"
        ohos:layout_alignment="bottom"
        ohos:padding="5vp">

        <TextField
            ohos:id="$+id:comment_tf"
            ohos:height="match_parent"
            ohos:width="match_parent"
            ohos:hint="发一条友好的评论吧"
            ohos:right_padding="60vp"
            ohos:text_size="16vp"></TextField>

        <Text
            ohos:id="$+id:sent_comment"
            ohos:height="match_parent"
            ohos:width="60vp"
            ohos:align_parent_right="true"
            ohos:background_element="#FF7ECCCF"
            ohos:text="发送"
            ohos:input_enter_key_type="enter_key_type_send"
            ohos:text_alignment="center"
            ohos:text_size="16vp">
        </Text>
    </DependentLayout>

3.2.页面布局,单条评论组件布局 comments_item.xml

使用了DependentLayout,DirectionalLayout布局组件和Image,Component,Text 组件

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent">

    <Image
        ohos:id="$+id:header_item_icon"
        ohos:height="50vp"
        ohos:width="50vp"
        ohos:end_margin="13vp"
        ohos:left_margin="5vp"
        ohos:image_src="$media:ic_header"
        ohos:scale_mode="stretch"
        ohos:top_margin="13vp"/>

    <DirectionalLayout
        ohos:id="$+id:comment_item_content"
        ohos:height="match_content"
        ohos:width="250vp"
        ohos:bottom_padding="5vp"
        ohos:orientation="vertical"
        ohos:right_of="$id:header_item_icon">

        <Text
            ohos:id="$+id:comment_uname"
            ohos:height="match_content"
            ohos:width="160vp"
            ohos:layout_alignment="vertical_center"
            ohos:padding="5vp"
            ohos:text="我是一只鱼"
            ohos:text_color="#FFA09E9E"
            ohos:text_size="16vp"/>

        <Text
            ohos:id="$+id:comment_content"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:layout_alignment="vertical_center"
            ohos:multiple_lines="true"
            ohos:padding="5vp"
            ohos:text="这是一条评论"
            ohos:text_color="$color:default_black_color"
            ohos:text_size="16vp"/>

        <Text
            ohos:id="$+id:comment_date"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:layout_alignment="vertical_center"
            ohos:padding="5vp"
            ohos:text="2天前"
            ohos:text_color="#FFA09E9E"
            ohos:text_size="16vp"/>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:id="$+id:goods_view"
        ohos:align_parent_right="true"
        ohos:padding="5vp"
        ohos:right_margin="5vp"
        ohos:right_of="$id:comment_item_content">

        <Image
            ohos:id="$+id:good_icon"
            ohos:height="25vp"
            ohos:width="match_parent"
            ohos:image_src="$media:ic_great"
            ohos:scale_mode="stretch"
            ohos:top_margin="13vp"
            />

        <Text
            ohos:id="$+id:comment_goods"
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:text="42"
            ohos:text_alignment="center"
            ohos:text_color="#FFA09E9E"
            ohos:text_size="12vp"></Text>

    </DirectionalLayout>

    <DirectionalLayout
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:align_bottom="$id:comment_item_content">
        <Component
            ohos:id="$+id:device_item_divider"
            ohos:height="1vp"
            ohos:width="match_parent"
            ohos:background_element="$graphic:list_divider"/>
    </DirectionalLayout>
</DependentLayout>

3.3.Java代码

创建评论列表提供程序类 CommentItemProvider.java

public class CommentItemProvider extends BaseItemProvider {
    private static final HiLogLabel LABEL = new HiLogLabel(0, 0, "=>CommentsItemProvider");
    private final Context context;
    private final List<CommentModel> list;
    private AbilitySlice abilitySlice;

    /**
     * Initialization
     */
    public CommentItemProvider(Context context, List<CommentModel> list, AbilitySlice slice) {
        this.context = context;
        this.list = list;
        this.abilitySlice = slice;
    }

    @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 CommentModel();
    }

    public void addComment(CommentModel comment) {
        if (comment == null) return;

        list.add(0, comment);
        notifyDataSetItemInserted(0);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        final Component cpt;
        if (convertComponent == null) {
            cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_comments_item, null, false);
        } else {
            cpt = convertComponent;
        }


        CommentModel item = list.get(position);
        //评论人头像
        Image headerIcon = (Image) cpt.findComponentById(ResourceTable.Id_header_item_icon);
        headerIcon.setPixelMap(ResourceTable.Media_ic_header);

        //评论人名称
        Text uName = (Text) cpt.findComponentById(ResourceTable.Id_comment_uname);
        uName.setText(item.getuName());

        //评论内容
        Text uContent = (Text) cpt.findComponentById(ResourceTable.Id_comment_content);
        uContent.setText(item.getCommentContent());
        //点击事件
        uContent.setClickedListener(component -> {
            DependentLayout commentDialog = (DependentLayout) abilitySlice.findComponentById(ResourceTable.Id_comments_dialog);
            if (commentDialog.getVisibility() == Component.VISIBLE) {
                commentDialog.setVisibility(Component.VISIBLE);
            }
            TextField comment = (TextField) abilitySlice.findComponentById(ResourceTable.Id_comment_tf);
            comment.setText("");
            comment.setHint("回复 " + item.getuName() + ":");
            comment.requestFocus();
        });


        //评论日期
        Text uDate = (Text) cpt.findComponentById(ResourceTable.Id_comment_date);
        uDate.setText(item.getCommentDate());

        //已赞数
        Text goods = (Text) cpt.findComponentById(ResourceTable.Id_comment_goods);
        HiLog.debug(LABEL, "goods:" + item.getCommentGoods());
        goods.setText(item.getCommentGoods() + "");

        //点赞
        Image greatImage = (Image) cpt.findComponentById(ResourceTable.Id_good_icon);
        //点赞加一
        greatImage.setClickedListener(component1 -> {
            greatImage.setPixelMap(ResourceTable.Media_ic_great_red);
            goods.setTextColor(Color.RED);
            goods.setText((item.getCommentGoods() + 1) + "");
        });

        if (position == list.size() - 1) {
            Component divider = cpt.findComponentById(ResourceTable.Id_device_item_divider);
            divider.setVisibility(Component.INVISIBLE);
        }

        return cpt;
    }
}

初始化评论列表和评论功能 VideoPlayAbilitySlice.java

/**
 * 初始化评论列表
 */
private void initComments(AbilitySlice slice) {
    //评论列表，以及设置点击的监听事件、传递数据
    ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_comments_container);
    List<CommentModel> list = new ArrayList<>();
    for (int i = 0; i < 10; i++) {
        CommentModel obj = new CommentModel();
        obj.setuId(i + "");
        obj.setuName(getRandomUname());
        obj.setCommentContent(getRandomText());
        obj.setCommentDate("刚刚");
        obj.setCommentGoods(new Random().nextInt(100));
        list.add(obj);
    }

    //容器绑定数据提供程序
    provider = new CommentItemProvider(this, list, slice);
    listContainer.setItemProvider(provider);

    Component sendComment = findComponentById(ResourceTable.Id_sent_comment);
    TextField comment = (TextField) findComponentById(ResourceTable.Id_comment_tf);

    //评论功能
    sendComment.setClickedListener(component -> {
        if (comment.getText().isEmpty()) {
            new ToastDialog(getContext()).setText("评论不能为空").show();
            return;
        }
        CommentModel model = new CommentModel();
        model.setCommentContent(comment.getText());
        model.setuId(UUID.randomUUID().toString());
        model.setuName("robot");
        model.setCommentDate("刚刚");

        //添加到数据提供程序中
        provider.addComment(model);

        comment.setText("");
        //评论数+1
        commentsText.setText(String.valueOf(Integer.valueOf(comments) + 1));

        new ToastDialog(getContext()).setText("评论成功").show();

    });
}

问题总结

1.播放器列表滑动时,会重复添加播放组件的问题

2.评论功能,输入框跟随输入法调整位置的问题(待完善)

3.播放列表滑动时,根据ScrollView的位置控制视频播放(待完善)

4.播放列表中播放视频进度同步到播放详情页的问题(待完善)

完整代码

附件直接下载

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