HarmonyOS鸿蒙Next中js API6如何从媒体中选择视频，并添加到video组件进行播放？

HarmonyOS鸿蒙Next中js API6如何从媒体中选择视频，并添加到video组件进行播放？

目前通过 mediaLibrary的startMediaSelect 获取到了 视频文件的uri  dataability:///media/external/video/media/6370

文档中并没有指明src具体路径类型，参考image的路径，支持dataability  

但实际使用过程中，显示打开视频文件失败，求大佬指教。
6 回复

楼主你好，目前js api6的video组件的src不支持此uri （通过 mediaLibrary的startMediaSelect 获取到了 视频文件的uri ），目前的解决办法有，使用ets语法中VideoPlayer实例办法实现视频播放，参考链接：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-media-0000001281201038

视频开发的demo参考：

  1. https://gitee.com/openharmony/applications_app_samples/tree/master/media/VideoShow
  2. https://gitee.com/openharmony/applications_app_samples/tree/master/media/VideoPlayer

更多关于HarmonyOS鸿蒙Next中js API6如何从媒体中选择视频，并添加到video组件进行播放？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


请问api6的video支持什么类型的src呢？

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：BV1S4411E7LY/?p=17

唉~，这个文档写的模糊的很，包括一些示例。就拿这个video组件来说，也不写清楚到底支持什么格式的路径。也不说明使用document.choose选择的文件应该怎么处理才能使用，比如选择图片返回的路径怎么处理才能直接用在image组件上，怎么处理才能使用上传API。整个看下来就是一个劝退文档。发展不起来是有原因的，鸿蒙真的想发展好，想想怎么把基本的开发文档写好吧。

在HarmonyOS鸿蒙Next中，使用js API6从媒体库中选择视频并添加到<video>组件进行播放，可以通过以下步骤实现：

  1. 引入必要的模块：

    import mediaLibrary from '[@ohos](/user/ohos).multimedia.mediaLibrary';
import picker from '[@ohos](/user/ohos).file.picker';

  2. 创建视频选择器：

    const videoPicker = new picker.PhotoViewPicker();
videoPicker.select({
    type: picker.PhotoViewMimeType.VIDEO
}).then((result) => {
    if (result && result.length > 0) {
        const videoUri = result[0].uri;
        // 将视频URI传递给<video>组件
        playVideo(videoUri);
    }
}).catch((err) => {
    console.error('Failed to pick video:', err);
});

  3. 播放视频：

    function playVideo(videoUri) {
    const videoComponent = document.getElementById('videoPlayer');
    videoComponent.src = videoUri;
    videoComponent.play();
}

  4. HTML部分：

    <video id="videoPlayer" controls></video>

通过以上步骤，你可以从媒体库中选择视频并在<video>组件中播放。

在HarmonyOS鸿蒙Next中，使用JS API6从媒体库选择视频并添加到<video>组件播放的步骤如下：

  1. 引入媒体选择模块：使用@ohos.file.picker模块创建文件选择器。
  2. 配置选择器：设置选择器类型为视频，并调用select()方法打开选择界面。
  3. 获取视频路径：用户选择视频后，通过回调获取视频的URI。
  4. 设置<video>组件：将获取的URI赋值给<video>组件的src属性，实现视频播放。

示例代码：

import picker from '@ohos.file.picker';

let videoPicker = new picker.PhotoViewPicker();
videoPicker.select().then((PhotoSelectResult) => {
    let videoUri = PhotoSelectResult[0].uri;
    this.videoSrc = videoUri; // 将URI赋值给video组件的src属性
}).catch((err) => {
    console.error('Failed to select video:', err);
});

确保在<video>组件中绑定src属性：

<video src="{{videoSrc}}" controls></video>

通过以上步骤，即可实现从媒体库选择视频并播放。

回到顶部