HarmonyOS鸿蒙Next中js使用Xcomponent播放m3u8直播时，全屏播放问题

HarmonyOS鸿蒙Next中js使用Xcomponent播放m3u8直播时，全屏播放问题

html代码如下：

<div class="container">
    <xcomponent id="Xcomponent" type='surface' onload='LoadXcomponent'
                duration="-1"
                style="width : 100%; height : 100%;">
    </xcomponent>
</div>

js代码：

async LoadXcomponent() {
    surfaceID = this.$element('Xcomponent').getXComponentSurfaceId();
    console.info('LoadXcomponent surfaceID is -- ' + surfaceID);

    await media.createVideoPlayer().then((video) => {
        if (typeof (video) != 'undefined') {
            videoPlayer = video;

            console.info('video createVideoPlayer success');
        } else {
            console.info('video createVideoPlayer fail');
        }
    }).catch((error) => {
        console.info(`video catchCallback, error:${error.message}`);
    });
    videoPlayer.url = videoURL;
    console.info('video url success');
    // 设置surfaceID用于显示视频画面
    await videoPlayer.setDisplaySurface(surfaceID).then(() => {
        console.info('setDisplaySurface success');
    }).catch((error) => {
        console.info(`video catchCallback, error:${error.message}`);
    });

    // 调用prepare完成播放前准备工作
    await videoPlayer.prepare().then(() => {
        console.info('prepare success');
    }).catch((error) => {
        console.info(`video catchCallback, error:${error.message}`);
    });

    // 调用play开始播放
    await videoPlayer.play().then(() => {
        console.info('play success');
    }).catch((error) => {
        console.info(`video catchCallback , error:${error.message}`);
    });
}

请问如何实现全屏播放？或者其他播放直播的方法

更多关于HarmonyOS鸿蒙Next中js使用Xcomponent播放m3u8直播时，全屏播放问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

楼主你好，js开发中，videoPlayer的宽高可读不可写，应该是目前不支持全屏，1、可以试下通过窗口模块的全屏实现[[https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-window-0000001333800489]]；2、可以试下ArkTS的video组件，这个是支持全屏的[[https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-media-components-video-0000001333641101]]

更多关于HarmonyOS鸿蒙Next中js使用Xcomponent播放m3u8直播时，全屏播放问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


楼主，鸿蒙编程能播放m3u8直播吗？有demo代码吗?

在HarmonyOS鸿蒙Next中，使用XComponent播放m3u8直播时，实现全屏播放可以通过以下步骤进行：

  1. XComponent配置：首先，确保XComponent的宽高设置为全屏尺寸。可以通过获取屏幕的宽高来动态设置XComponent的尺寸。

  2. 全屏切换逻辑：在播放器界面添加全屏按钮，点击按钮时触发全屏切换逻辑。通过修改XComponent的宽高属性，使其占据整个屏幕。

  3. 横屏处理：在全屏状态下，通常需要将屏幕旋转为横屏。可以通过调用系统的屏幕旋转API来实现。

  4. 状态保存：在全屏切换时，保存当前的播放状态（如播放位置、音量等），以便在全屏和正常模式之间切换时保持一致的播放体验。

  5. 事件监听：监听屏幕旋转事件，确保在全屏状态下屏幕旋转时，XComponent的尺寸和布局能够正确调整。

  6. 退出全屏：在全屏状态下，提供退出全屏的按钮或手势操作，点击后恢复XComponent的原始尺寸和布局。

通过以上步骤，可以在HarmonyOS鸿蒙Next中实现XComponent播放m3u8直播时的全屏播放功能。

在HarmonyOS鸿蒙Next中，使用XComponent播放m3u8直播时，实现全屏播放可以通过以下步骤：首先，确保XComponent的布局设置为全屏模式，可以通过调整其宽高为屏幕尺寸。其次，使用setFullScreen方法将播放器设置为全屏状态。最后，监听屏幕旋转事件，动态调整XComponent的布局以适应全屏显示。代码示例：

// 设置XComponent为全屏
xComponent.setFullScreen(true);

// 监听屏幕旋转事件
window.addEventListener('resize', () => {
    xComponent.setLayoutParams({ width: screen.width, height: screen.height });
});

确保播放器支持全屏模式，并处理相关事件以实现流畅的全屏体验。

回到顶部