DistributedVideoPlayer 分散ビデオプレーヤー (I)

[[429810]]

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ

https://harmonyos..com

導入

この例は、基本的なビデオ再生機能を提供し、携帯電話とテレビ間でビデオを転送できるようにする公式のビデオ再生機能テンプレートの拡張です。

アプリケーションは、モバイル側 (entry)、TV 側 (entrytv)、および依存モジュール (commonlib) に分かれています。

この例に基づいて、携帯電話にはビデオのプレイリスト機能、再生詳細ページ、コメント機能が追加されます。携帯電話で再生した動画をテレビ側にストリーミングし、リモコン機能を実現できます。

内容が盛りだくさんなので、2回に分けてご説明します。この記事では主にモバイル部分について説明します。

1. ビデオ プレーヤーを実装します。2. プレイリストを実装します。3. コメント機能を実装します。

【この記事は優秀クリエイター奨励金に参加しています】

エフェクト表示

環境を構築する

DevEco Studio をインストールします。詳細については、DevEco Studio のダウンロードを参照してください。

DevEco Studio 開発環境をセットアップします。 DevEco Studio 開発環境はネットワーク環境に依存する必要があります。ツールを正常に使用するには、ネットワークに接続する必要があります。次の 2 つの状況に応じて開発環境を構成できます。

インターネットに直接アクセスできる場合は、HarmonyOS SDK をダウンロードするだけで済みます。

ネットワークがインターネットに直接アクセスできず、プロキシ サーバー経由でアクセスする必要がある場合は、「開発環境の構成」を参照してください。

ソースコードをダウンロードしたら、DevEco を使用してプロジェクトを開きます。

コード構造

Javaコード

│ config.json
 │
 ├─ジャワ
│ └─com
 │ └─ブティ
│ └─分散ビデオプレイヤー
│ │ メインアビリティ.java
 │ │MyApplication.java
 │ │
 │ ├─能力
│ │ DevicesSelectAbility.java
 │ │ MainAbilitySlice.java #ビデオ再生リストページ
│ │ SyncControlServiceAbility.java
 │ │ VideoPlayAbility.java #ビデオ再生機能
│ │ VideoPlayAbilitySlice.java #ビデオ再生の詳細とコメントページ
│ │
 │ ├─コンポーネント
│ │ EpisodesSelectionDialog.java
 │ │リモートコントローラ.java
 │ │ VideoPlayerPlaybackButton.java #再生ボタンコンポーネント
│ │ VideoPlayerSlider.java #再生時間プログレスバー
│ │
 │ ├─定数
│ │ 定数.java
 │ │ ResolutionEnum.java #解像度列挙
│ │ RouteRegister.java #カスタムルーティング
│ │
 │ ├─データ
│ │ VideoInfo.java #基本的なビデオ情報
│ │ VideoInfoService.java #シミュレーションデータに使用されるビデオ情報サービス
│ │ Videos.java #ビデオリスト
│ │
 │ ├─モデル
│ │ CommentModel.java #コメントモデル
│ │デバイスモデル.java
 │ │ ResolutionModel.java #解像度モデル
│ │ VideoModel.java #ビデオモデル
│ │
 │ ├─プロバイダー
│ │ CommentItemProvider.java #コメントデータプロバイダ
│ │デバイスアイテムプロバイダー.java
 │ │ ResolutionItemProvider.java #解像度データプロバイダー
│ │ VideoItemProvider.java #ビデオデータプロバイダ
│ │
 │ └─ユーティリティ
│ AppUtil.java #Toolクラス
│ DateUtils.java

リソースファイル

└─リソース
    ├─ベース
    │ ├─要素
    │ │ カラー.json
    │ │フロート.json
    │ │ strarray.json
    │ │ 文字列.json
    │ │
    │ ├─グラフィック
    │ │ 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
    │ │ 背景エピソードアイテム.xml
    │ │ 背景エピソード品質.xml
    │ │ 背景エピソードトレーラー.xml
    │ │ background_slide_thumb.xml
    │ │ background_switch_checked.xml
    │ │ background_switch_empty.xml
    │ │ background_switch_thumb.xml
    │ │ 背景スイッチトラック.xml
    │ │ リスト区切り線.xml
    │ │ シェイプスライダーサム.xml
    │ │
    │ ├─レイアウト
    │ │ ability_main.xml #プレイリストレイアウト
    │ │ comments_item.xml #単一コメントレイアウト
    │ │ ダイアログプレイリスト.xml
    │ │ ダイアログ解像度リスト.xml
    │ │ ダイアログテーブルレイアウト.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
    │ │ リモートアビリティコントロール.xml
    │ │ リモートアビリティエピソード.xml
    │ │ リモート機能選択デバイス.xml
    │ │ リモートアビリティサウンド機器.xml
    │ │ リモートデバイスアイテム.xml
    │ │ リモートエピソードアイテム.xml
    │ │ リモートビデオ品質アイテム.xml
    │ │
    │ ├─メディア
    │ │ コメント.png
    │ │ 素晴らしい.png
    │ │ アイコン.png
    │ │ ic_anthology.png
    │ │
    │ └─プロフィール
    ├─ja
    │ └─要素
    │ 文字列.json
    │
    ├─rawファイル
    │ videos.json #シミュレーションデータJSONファイル
    │
    └─zh
        └─要素
                文字列.json

実装手順

1. ビデオプレーヤーを実装する

commonlib への依存関係を導入すると、ビデオ プレーヤーを簡単に実装できます。

エントリのbuild.gradleにcommonlibへの依存関係を追加する

依存関係 {
    実装 fileTree(dir: 'libs' 、 include: [ '*.jar' 、 '*.har' ])
    テスト実装'junit:junit:4.13'  
    ohosTestImplementation 'com.huawei.ohos.testkit:runner:1.0.0.200'  
    //commonlib依存関係を参照
    実装プロジェクト(パス: ':commonlib' )
 }

1.1.ページレイアウト hm_sample_ability_video_comments.xml

VideoPlayerViewコンポーネントを追加する

<?xml バージョン = "1.0"エンコーディング = "utf-8" ?>
 <スタックレイアウト
    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= "垂直" > 
 
    <com.buty.distributedvideoplayer.player.ui.widget.media.VideoPlayerView
        ohos:id= "$+id:video_view"  
        ohos:height= "250vp"  
        ohos:width= "match_parent" />
 ...
 </スタックレイアウト>

1.2.Javaコード

ビデオ コンポーネント オブジェクトを取得したら、次の 2 つの手順だけが必要です。1. ビデオ リソースのパスと説明を設定します。 2. プレーヤーのコアコンポーネントとカスタムコンポーネントを設定します。数行のキーコード VideoPlayAbilitySlice.java

 /**
 * プレーヤーを初期化する
 */
プライベートvoid initPlayer() {
    HiLog.debug(LABEL、 "initPlayer" );
    //カスタムビデオ再生ビューコンポーネント
    プレーヤー = (VideoPlayerView) findComponentById(ResourceTable.Id_video_view); 
 
    if (プレイヤー != null ) {
        //ビデオ情報サービスを取得する
        ビデオサービス = 新しいビデオ情報サービス (getContext());
        //現在再生中のビデオのパスを取得します
        文字列パス = videoService
                .getVideoInfoByIndex(現在の再生インデックス)
                .getResolutions()
                .get(現在の再生解像度インデックス)
                .getUrl();
        //ビデオの説明
        文字列 videoDesc = videoService.getVideoInfoByIndex(currentPlayingIndex).getVideoDesc();
        HiLog.debug(LABEL、 "videoDesc = " + videoDesc + " パス = " + パス); 
 
        パスがnullの場合
            //パスと説明を設定する
            player.setVideoPathAndTitle(パス、ビデオの説明);
            //準備ができたらビデオを再生し、再生進行状況バーを設定します
            プレイヤー.setPlayerOnPreparedListener()
                    () -> {
                        プレイヤーを起動します。
                        //再生位置を設定する
                        player.seekTo(現在の再生位置);
                    });
            //ダブルクリックして再生または一時停止します
            プレイヤー.setDoubleClickedListener(
                    コンポーネント -> {
                        //テレビ側を制御しているかどうか
                        リモートコントローラがnullの場合、リモートコントローラ.isShown() は次のように動作します。
戻る;
                        }
                        HiLog.debug(LABEL, "VideoPlayView ダブルクリック イベント" );
                        （プレイヤーが再生中の場合）{
                            プレーヤーを一時停止します。
                        }それ以外{
                            プレイヤーを起動します。
                        }
                    });
            //再生エラーを監視する
            プレイヤー.setErrorListener()
                    (エラータイプ、エラーコード) -> {
                        ToastDialog トースト = 新しい ToastDialog(getContext());
                        スイッチ (エラータイプ) {
 HmPlayerAdapter.ERROR_LOADING_RESOURCEの場合:
                                トースト.setText()
                                        AppUtil.getStringResource() 関数は、
                                                getContext()、ResourceTable.String_media_file_loading_error));
                                壊す;
 HmPlayerAdapter.ERROR_INVALID_OPERATIONの場合:
                                トースト.setText()
                                        AppUtil.getStringResource() 関数は、
                                                getContext()、ResourceTable.String_invalid_operation));
                                壊す;
デフォルト：
                                トースト.setText()
                                        AppUtil.getStringResource() 関数は、
                                                getContext()、ResourceTable.String_undefined_error_type));
                                壊す;
                        }
                        getUITaskDispatcher().asyncDispatch(toast::show);
                    });
        }
        //コアコンポーネント、再生時間進行スライダーを追加
        コアコンポーネントを追加します。
        //カスタムコンポーネントを追加する
        カスタムコンポーネントを追加します。
        HiLog.debug(LABEL、 「initPlayer 終了」 );
    }
 }

2. ビデオプレイリスト機能を実装する

2.1.ページレイアウト ability_main.xml

DirectionalLayoutレイアウトコンポーネント、ScrollViewコンポーネント、ListContainerコンポーネントが使用されています。

 <?xml バージョン = "1.0"エンコーディング = "utf-8" ?>
 <方向レイアウト
    xmlns:ohos= "http://schemas.huawei.com/res/ohos"  
    ohos:id= "$+id:ability_main_root"  
    ohos:height= "match_parent"  
    ohos:width= "match_parent"  
    ohos:orientation= "垂直" > 
 
    <方向レイアウト
        ohos:id= "$+id:ability_main_titlebar"  
        ohos:height= "match_content"  
        ohos:width= "match_parent"  
        ohos:background_element= "#B0B0B0"  
        ohos:orientation= "水平"  
        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:デバイスアイテム区切り線"  
                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

 /**
 *プログラムのメインインターフェースへのエントリ
 */
パブリッククラスMainAbilityはAbilityを拡張します{
    プライベート静的最終int REQUEST_CODE = 1; 
 
    // メディアの読み取りと書き込みの権限
    プライベート最終String[]権限リスト
            = 新しい文字列[]{ "ohos.permission.READ_MEDIA" 、 "ohos.permission.WRITE_MEDIA" }; 
 
    @オーバーライド
パブリックvoid onStart(インテント インテント) {
        super.onStart(インテント);
        UIContent をスーパーに設定します。
        super.setMainRoute(MainAbilitySlice.class.getName()); 
 
        // 承認を申請する
        権限を確認します();
    }
    プライベートvoid verifyPermissions() {
 (文字列のpermissionList:permissionLists) {
 int結果 = verifySelfPermission(permissionList);
            （結果がIBundleManager.PERMISSION_GRANTEDではない場合）{
                ユーザーからの権限の要求(権限リスト、REQUEST_CODE)。
            }
        }
    }
 ...

VideoInfoService を通じて videos.json ファイルを読み取り、ビデオ コンテナ リスト MainAbilitySlice.java を初期化します。

パブリッククラス MainAbilitySlice は AbilitySlice を拡張します {
公共 静的最終 HiLogLabel LABEL = new HiLogLabel(0, 0, "=>MainAbilitySlice" );
    プライベート VideoInfoService ビデオサービス; 
 
    @オーバーライド
    保護されたvoid onStart(インテントインテント) {
        super.onStart(インテント);
        //ビデオプレーヤーページを読み込む
        UIContent をスーパーに設定します。
        ビデオコンテナを初期化します。 
 
    } 
 
    /**
     * シミュレーションデータ
     * ビデオコンテナリストを初期化する
     */
    プライベートvoid initVideoContainer() {
        HiLog.debug(LABEL、 "initVideoContainer" );
        List<VideoModel> videos = 新しい ArrayList<>();
        //ビデオ情報サービスを取得する
        ビデオサービス = 新しいビデオ情報サービス (getContext()); 
 
 ( int i = 0; i < 7; i++) {
            ビデオモデルビデオ = 新しいビデオモデル();
            ビデオ.setComments(新しいRandom().nextInt(1000));
            ビデオをお気に入りに設定する(新しい Random().nextInt(1000));
            ビデオ.setGreats(新しい Random().nextInt(10000));
            ビデオ情報 videoInfo = videoService.getVideoInfoByIndex(i);
            ビデオ情報.setIndex(i);
            ビデオ情報を設定します。
            videos.add (ビデオ);
        } 
 
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_videos_container);
        //コンテナはデータプロバイダをバインドします
        VideoItemProvider プロバイダー = 新しい VideoItemProvider(this, videos, this);
        listContainer.setItemProvider(プロバイダー);
    }
 }

ビデオ コンテナ リスト データ プロバイダー VideoItemProvider.java

パブリッククラス VideoItemProvider は BaseItemProvider を拡張します {
    プライベート静的最終 HiLogLabel LABEL = new HiLogLabel(0, 0, "=>VideoItemProvider" );
    プライベート最終コンテキストコンテキスト;
    プライベート最終リスト<VideoModel> リスト;
    プライベートAbilitySlice abilitySlice;
    //現在の再生ビデオ解像度インデックス
    プライベートint現在の再生解像度インデックス = 0; 
 
    /**
     * 初期化
     */
パブリックVideoItemProvider(コンテキスト context、List<VideoModel> list、AbilitySlice abilitySlice) {
        HiLog.debug(LABEL、 「VideoItemProvider」 );
        this.context = コンテキスト;
        this.list = リスト;
        能力スライス = 能力スライス;
    } 
 
パブリックコンテキスト getContext() {
コンテキストを返します。
    } 
 
    @オーバーライド
公共 整数getCount() {
戻りリスト == null ? 0 : リスト。サイズ（）;
    } 
 
    @オーバーライド
パブリックオブジェクトgetItem( int位置){
        if (list != null && position >= 0 && position < list.size ( )) {
リストを返します。get(position);
        }
新しい VideoModel()を返します。
    } 
 
    @オーバーライド
パブリックlong getItemId( int位置) {
位置を戻す。
    } 
 
    @オーバーライド
パブリックコンポーネント getComponent( int position, Component convertComponent, ComponentContainer componentContainer) {
        HiLog.debug(LABEL、 "getComponent:" + convertComponent + "," + componentContainer);
        最終コンポーネント cpt;
        最終的な VideoPlayerView プレーヤー。 
 
        ビデオモデル項目 = list.get(位置); 
 
        // 初めてコンポーネントを取得する
        （convertComponent == null ）の場合{
            cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_hm_sample_ability_video_box, componentContainer, false );
            プレーヤー = (VideoPlayerView) cpt.findComponentById(ResourceTable.Id_video_view);
            // プレーヤーコンポーネントを初期化する
            プレーヤーを初期化します(プレーヤー、アイテム.getVideoInfo());
        }それ以外{
            //ScrollView がスライドするときにも getComponent メソッドが呼び出されます。
            cpt = convertComponent;
            プレーヤー = (VideoPlayerView) cpt.findComponentById(ResourceTable.Id_video_view);
        } 
 
        //他のコンポーネントの値を設定する
        テキスト text_favorites = (テキスト) cpt.findComponentById(ResourceTable.Id_text_favorites);
        テキスト text_comments = (テキスト) cpt.findComponentById(ResourceTable.Id_text_comments);
        テキスト text_greats = (テキスト) cpt.findComponentById(ResourceTable.Id_text_greats);
        //setTextのパラメータ型は文字列であることに注意してください
        text_favorites.setText(item.getFavorites() + "" );
        text_comments.setText(item.getComments() + "" );
        text_greats.setText(item.getGreats() + "" );
        //コメントアイコンをクリックすると、現在のプレーヤーが停止し、VideoPlayAbility のスライス ページが開きます。
        画像コメントImage = (画像) cpt.findComponentById(ResourceTable.Id_image_comment);
        commentImage.setClickedListener(コンポーネント -> {
            //再生を停止、リストページのプレーヤー
            プレーヤーの再生を停止します。
            //コメント付きの再生ページを開く
            ビデオ再生の詳細を開始します(アイテム、プレーヤー)。
        });
 cptを返します。
    } 
 
    /**
     * プレーヤーを初期化する
     */
    プライベート void initPlayer(VideoPlayerView プレーヤー、VideoInfo ビデオ情報) {
        HiLog.debug(LABEL、 "initPlayer" );
        if (プレイヤー != null ) {
            //ビデオパス
            文字列パス = videoInfo
                    .getResolutions()
                    .get(現在の再生解像度インデックス)
                    .getUrl();
            HiLog.debug(LABEL, "path:" + パス); 
 
            //ビデオの説明
            文字列 videoDesc = videoInfo.getVideoDesc();
            HiLog.debug(LABEL、 "videoDesc = " + videoDesc + " パス = " + パス); 
 
            パスがnullの場合
                //パスと名前を設定する
                player.setVideoPathAndTitle(パス、ビデオの説明);
                //ダブルクリックして再生または一時停止します
                プレイヤー.setDoubleClickedListener(
                        コンポーネント -> {
                            HiLog.debug(LABEL, "VideoPlayView ダブルクリック イベント" );
                            （プレイヤーが再生中の場合）{
                                プレーヤーを一時停止します。
                            }それ以外{
                                プレイヤーを起動します。
                            }
                        });
                //再生エラーを監視する
                プレイヤー.setErrorListener()
                        (エラータイプ、エラーコード) -> {
                            ToastDialog トースト = 新しい ToastDialog(getContext());
                            スイッチ (エラータイプ) {
 HmPlayerAdapter.ERROR_LOADING_RESOURCEの場合:
                                    トースト.setText()
                                            AppUtil.getStringResource() 関数は、
                                                    getContext()、ResourceTable.String_media_file_loading_error));
                                    壊す;
 HmPlayerAdapter.ERROR_INVALID_OPERATIONの場合:
                                    トースト.setText()
                                            AppUtil.getStringResource() 関数は、
                                                    getContext()、ResourceTable.String_invalid_operation));
                                    壊す;
デフォルト：
                                    トースト.setText()
                                            AppUtil.getStringResource() 関数は、
                                                    getContext()、ResourceTable.String_undefined_error_type));
                                    壊す;
                            }
                            能力スライス.getUITaskDispatcher().asyncDispatch(toast::show);
                        });
            }
            //コアコンポーネント、再生時間進行スライダーを追加
            コアコンポーネントを追加します(プレーヤー)。
            //カスタムコンポーネントを追加する
            HiLog.debug(LABEL、 「initPlayer 終了」 );
        }
    } 
 
    /**
     * 再生ボタン、エピソード、進行状況バーなどのコア コンポーネントを追加します。
     *再生ボタンやシークバーなどのコアコンポーネントの追加
     */
    プライベートvoid addCoreComponent(VideoPlayerViewプレーヤー) {
        HiLog.debug(LABEL、 「CoreComponent を追加」 );
        //再生ボタンコンポーネントを追加する
        player.addPlaybackButton(新しいVideoPlayerPlaybackButton(getContext()), VideoBoxArea.BOTTOM);
        //再生進行状況バーコンポーネントを追加する
        プレイヤー.addSeekBar(
                新しいビデオプレーヤースライダー(getContext())、
                ビデオボックスエリア.BOTTOM、
                ( int ) AppUtil.getFloatResource(getContext(), ResourceTable.Float_normal_margin_24));
    } 
 
    /**
     * ビデオ再生の詳細ページを開く
     */
    プライベート void startVideoPlayDetail(ビデオモデル項目、ビデオプレーヤービュープレーヤー) {
        HiLog.debug(LABEL、 「startVideoPlayDetail」 );
        //コメント再生ページを開始する
        インテントのintentService = 新しいIntent();
        //ビデオコメントを再生する
        intentService.setParam( "コメント" ,String.valueOf(item.getComments())); 
 
        ビデオ情報 videoInfo=item.getVideoInfo(); 
 
        ビデオ情報! = nullの場合{
            // プレイリストで再生するビデオのインデックス
            intentService.setParam( "現在の再生インデックス" 、 videoInfo.getIndex());
            //ビデオ再生時の解像度インデックス
            intentService.setParam( "現在の再生解像度インデックス" , 現在の再生解像度インデックス);
            //現在のビデオ再生位置
            intentService.setParam(RemoteConstant.INTENT_PARAM_REMOTE_START_POSITION,( int )player.getCurrentPosition());
            HiLog.debug(LABEL、RemoteConstant.INTENT_PARAM_REMOTE_START_POSITION+ ":" +player.getCurrentPosition());
        }
        操作操作 =
                新しい Intent.OperationBuilder()
                        .withDeviceId( "" )
                        .withBundleName(abilitySlice.getBundleName())
                        .withAbilityName(ビデオ再生能力.クラス)
                        。建てる（）;
        操作を実装します。
        能力スライスを開始します。(intentService);
    }
 }

3. コメント機能を実装する

3.1.ページレイアウト、コメントリストレイアウトページ hm_sample_ability_video_comments.xml

StackLayout、DependentLayoutレイアウトコンポーネントとListContainer、TextField、Textコンポーネントを使用する

...
    <! -- ツールバー -->  
    <依存レイアウト
        ohos:id= "$+id:comments_bar"  
        ohos:height= "40vp"  
        ohos:width= "match_parent"  
        ohos:background_element= "#FFDDDADA"  
        ohos:layout_alignment= "上"  
        ohos:top_margin= "250vp" > 
 
        <方向レイアウト
            ohos:id= "$+id:お気に入り"  
            ohos:height= "match_parent"  
            ohos:width= "match_content"  
            ohos:align_parent_left= "true"  
            ohos:left_margin= "10vp"  
            ohos:orientation= "水平"  
            ohos:padding= "4vp" > 
 
            <テキスト
                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" > 
 
            </テキスト>
        </方向レイアウト> 
 
        <方向レイアウト
            ohos:id= "$+id:コメント"  
            ohos:height= "match_parent"  
            ohos:width= "match_content"  
            ohos:end_of= "$id:favorite"  
            ohos:left_margin= "20vp"  
            ohos:orientation= "水平"  
            ohos:padding= "4vp" > 
 
            <テキスト
                ohos:id= "$+id:テキストコメント"  
                ohos:height= "match_parent"  
                ohos:width= "match_content"  
                ohos:left_padding= "5vp"  
                ohos:text= "コメント"  
                ohos:テキストの重み= "600"  
                ohos:text_size= "16fp" >
            </テキスト> 
 
            <テキスト
                ohos:id= "$+id:text_comments"  
                ohos:height= "match_parent"  
                ohos:width= "match_content"  
                ohos:left_padding= "5vp"  
                ohos:text= "1161"  
                ohos:テキストの重み= "600"  
                ohos:text_size= "16fp" >
            </テキスト>
        </方向レイアウト> 
 
    </依存レイアウト> 
 
    <! -- コメント一覧 -->  
    <依存レイアウト
        ohos:id= "$+id:comments_view"  
        ohos:height= "match_parent"  
        ohos:width= "match_parent"  
        ohos:background_element= "#FFFDFFFF"  
        ohos:top_margin= "290vp" > 
 
        <リストコンテナ
            ohos:id= "$+id:comments_container"  
            ohos:height= "match_parent"  
            ohos:width= "match_parent"  
            ohos:layout_alignment= "水平中央"  
            ohos:orientation= "垂直" /> 
 
    </依存レイアウト> 
 
    <! -- コメントダイアログ -->  
    <依存レイアウト
        ohos:id= "$+id:comments_dialog"  
        ohos:height= "70vp"  
        ohos:width= "match_parent"  
        ohos:background_element= "#FFF4F4F8"  
        ohos:layout_alignment= "下"  
        ohos:padding= "5vp" > 
 
        <テキストフィールド
            ohos:id= "$+id:comment_tf"  
            ohos:height= "match_parent"  
            ohos:width= "match_parent"  
            ohos:hint= 「フレンドリーなコメントを送信」  
            ohos:right_padding= "60vp"  
            ohos:text_size= "16vp" ></テキストフィールド> 
 
        <テキスト
            ohos:id= "$+id:sent_comment"  
            ohos:height= "match_parent"  
            ohos:width= "60vp"  
            ohos:align_parent_right= "true"  
            ohos:background_element= "#FF7ECCCCF"  
            ohos:text= "送信"  
            ohos:input_enter_key_type= "enter_key_type_send"  
            ohos:text_alignment= "中央"  
            ohos:text_size= "16vp" >
        </テキスト>
    </依存レイアウト>

3.2.ページレイアウト、単一コメントコンポーネントレイアウト comments_item.xml

DependentLayout、DirectionalLayoutレイアウトコンポーネントとImage、Component、Textコンポーネントを使用する

<?xml バージョン = "1.0"エンコーディング = "utf-8" ?>
 <依存レイアウト
    xmlns:ohos= "http://schemas.huawei.com/res/ohos"  
    ohos:height= "match_content"  
    ohos:width= "match_parent" > 
 
    <画像
        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= "ストレッチ"  
        ohos:top_margin= "13vp" /> 
 
    <方向レイアウト
        ohos:id= "$+id:コメント項目コンテンツ"  
        ohos:height= "match_content"  
        ohos:width= "250vp"  
        ohos:bottom_padding= "5vp"  
        ohos:orientation= "垂直"  
        ohos:right_of= "$id:header_item_icon" > 
 
        <テキスト
            ohos:id= "$+id:comment_uname"  
            ohos:height= "match_content"  
            ohos:width= "160vp"  
            ohos:layout_alignment= "垂直中央"  
            ohos:padding= "5vp"  
            ohos:text= 「私は魚です」  
            ohos:text_color= "#FFA09E9E"  
            ohos:text_size= "16vp" /> 
 
        <テキスト
            ohos:id= "$+id:comment_content"  
            ohos:height= "match_content"  
            ohos:width= "match_parent"  
            ohos:layout_alignment= "垂直中央"  
            ohos:multiple_lines = "true"  
            ohos:padding= "5vp"  
            ohos:text= "これはコメントです"  
            ohos:text_color= "$color:default_black_color"  
            ohos:text_size= "16vp" /> 
 
        <テキスト
            ohos:id= "$+id:comment_date"  
            ohos:height= "match_content"  
            ohos:width= "match_content"  
            ohos:layout_alignment= "垂直中央"  
            ohos:padding= "5vp"  
            ohos:text= "2日前"  
            ohos:text_color= "#FFA09E9E"  
            ohos:text_size= "16vp" /> 
 
    </方向レイアウト> 
 
    <方向レイアウト
        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" > 
 
        <画像
            ohos:id= "$+id:good_icon"  
            ohos:height= "25vp"  
            ohos:width= "match_parent"  
            ohos:image_src= "$media:ic_great"  
            ohos:scale_mode= "ストレッチ"  
            ohos:top_margin= "13vp"  
            /> 
 
        <テキスト
            ohos:id= "$+id:comment_goods"  
            ohos:height= "match_content"  
            ohos:width= "match_parent"  
            ohos:text= "42"  
            ohos:text_alignment= "中央"  
            ohos:text_color= "#FFA09E9E"  
            ohos:text_size= "12vp" ></Text> 
 
    </方向レイアウト> 
 
    <方向レイアウト
        ohos:height= "match_content"  
        ohos:width= "match_parent"  
        ohos:align_bottom= "$id:comment_item_content" >
        <コンポーネント
            ohos:id= "$+id:デバイスアイテム区切り線"  
            ohos:height= "1vp"  
            ohos:width= "match_parent"  
            ohos:background_element= "$graphic:list_divider" />
    </方向レイアウト>
 </依存レイアウト>

3.3. Javaコード

コメントリストプロバイダクラス CommentItemProvider.java を作成する

パブリッククラスCommentItemProviderはBaseItemProviderを拡張します。
    プライベート静的最終 HiLogLabel LABEL = new HiLogLabel(0, 0, "=>CommentsItemProvider" );
    プライベート最終コンテキストコンテキスト;
    プライベート最終リスト<CommentModel> リスト;
    プライベートAbilitySlice abilitySlice; 
 
    /**
     * 初期化
     */
パブリックCommentItemProvider(コンテキスト コンテキスト、List<CommentModel> リスト、AbilitySlice スライス) {
        this.context = コンテキスト;
        this.list = リスト;
        this.abilitySlice = スライス;
    } 
 
    @オーバーライド
公共 整数getCount() {
戻りリスト == null ? 0 : リスト。サイズ（）;
    } 
 
    @オーバーライド
パブリックオブジェクトgetItem( int位置){
        if (list != null && position >= 0 && position < list.size ( )) {
リストを返します。get(position);
        }
新しい CommentModel()を返します。
    } 
 
パブリックvoid addComment(コメントモデルコメント) {
        if (コメント == null )戻り値; 
 
        リストに0、コメントを追加します。
        DataSetItemInserted を通知します(0);
    } 
 
    @オーバーライド
パブリックlong getItemId( int位置) {
位置を戻す。
    } 
 
    @オーバーライド
パブリックコンポーネント getComponent( int position, Component convertComponent, ComponentContainer componentContainer) {
        最終コンポーネント cpt;
        （convertComponent == null ）の場合{
            cpt = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_comments_item, null 、 false );
        }それ以外{
            cpt = convertComponent;
        } 
 
 
        コメントモデル item = list.get(position);
        //コメント投稿者のアバター
        画像ヘッダーアイコン = (画像) cpt.findComponentById(ResourceTable.Id_header_item_icon);
        headerIcon.setPixelMap(ResourceTable.Media_ic_header); 
 
        // 解説者の名前
        テキスト uName = (テキスト) cpt.findComponentById(ResourceTable.Id_comment_uname);
        uName.setText(item.getuName()); 
 
        //コメント内容
        テキスト uContent = (テキスト) cpt.findComponentById(ResourceTable.Id_comment_content);
        uContent.setText(item.getCommentContent());
        //クリックイベント
        uContent.setClickedListener(コンポーネント -> {
            DependentLayout の commentDialog を (DependentLayout) abilitySlice.findComponentById(ResourceTable.Id_comments_dialog);
            コメントダイアログの getVisibility() が Component.VISIBLE の場合 {
                コメントダイアログの可視性を設定します(Component.VISIBLE);
            }
            テキストフィールドコメント = (テキストフィールド) abilitySlice.findComponentById(ResourceTable.Id_comment_tf);
            コメント.setText( "" );
            comment.setHint( "返信 " + item.getuName() + ":" );
            コメントをリクエストフォーカスします。
        }); 
 
 
        // コメントの日付
        テキスト uDate = (テキスト) cpt.findComponentById(ResourceTable.Id_comment_date);
        uDate.setText(item.getCommentDate()); 
 
        //いいねの数
        テキスト商品 = (テキスト) cpt.findComponentById(ResourceTable.Id_comment_goods);
        HiLog.debug(LABEL, "goods:" + item.getCommentGoods());
        goods.setText(item.getCommentGoods() + "" ); 
 
        //のように
        画像 greatImage = (画像) 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 (位置 == リスト.サイズ() - 1) {
            コンポーネント ディバイダ = cpt.findComponentById(ResourceTable.Id_device_item_divider);
            区切り線.setVisibility(Component.INVISIBLE);
        } 
 
 cptを返します。
    }
 }

コメントリストとコメント関数VideoPlayAbilitySlice.javaを初期化する

/**
 * コメントリストを初期化する
 */
プライベートvoid initComments(AbilitySliceスライス) {
    //コメントリスト、クリックリスナーイベントの設定、データの受け渡し
    ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_comments_container);
    リスト<CommentModel> リスト = 新しい ArrayList<>();
 ( int i = 0; i < 10; i++) {
        コメントモデル obj = 新しいコメントモデル();
        obj.setuId(i + "" );
        obj.setuName(getRandomUname());
        obj.setCommentContent(getRandomText());
        obj.setCommentDate( "たった今" );
        obj.setCommentGoods(新しいRandom().nextInt(100));
        リストを追加します。
    } 
 
    //コンテナはデータプロバイダをバインドします
    プロバイダー = 新しい CommentItemProvider(this、リスト、スライス);
    listContainer.setItemProvider(プロバイダー); 
 
    コンポーネント sendComment = findComponentById(ResourceTable.Id_sent_comment);
    テキストフィールドコメント = (テキストフィールド) findComponentById(ResourceTable.Id_comment_tf); 
 
    //コメント関数
    sendComment.setClickedListener(コンポーネント -> {
        if (comment.getText().isEmpty()) {
            new ToastDialog(getContext()).setText( "コメントは空にできません" ).show();
戻る;
        }
        コメントモデル モデル = 新しいコメントモデル();
        モデルにコメントコンテンツを設定します。
        モデル.setuId(UUID.randomUUID().toString());
        model.setuName( "ロボット" );
        model.setCommentDate( "たった今" ); 
 
        //データプロバイダに追加
        プロバイダー.addComment(モデル); 
 
        コメント.setText( "" );
        //コメント +1
        commentsText.setText(String.valueOf( Integer.valueOf (comments) + 1)); 
 
        new ToastDialog(getContext()).setText( "コメント成功" ).show(); 
 
    });
 }

問題の概要

1. プレーヤーリストをスライドすると、再生コンポーネントが繰り返し追加されます

2. コメント機能、入力方法に応じて入力ボックスの位置を調整（改善予定）

3. プレイリストがスライドする際、ScrollViewの位置に応じて動画の再生を制御する（改善予定）

4. プレイリスト内の動画の再生進行を再生詳細ページに同期する問題（改善予定）

記事に関連する添付ファイルをダウンロードするには、以下のリンクをクリックしてください。

https://harmonyos..com/resource/1338

詳細については、以下をご覧ください。

51CTOとHuaweiが共同で構築したHongmengテクノロジーコミュニティ

https://harmonyos..com