JS应用视频控件开发

简介

本文档说明如何使用 JavaScript 开发 OpenHarmony 视频应用。

JS视频控件分为君正自定义控件以及开蒙标准控件。

开蒙标准控件

• 开蒙标准控件通过移植 HiStreamer 实现，后续更新/优化将根据社区标准代码进行

参考 Demo

1. 查看源代码工程下指定路径

//iot/oh-apps/source-code/halley5/Player

源码分析

声明自定义控件

指定 hml 文件中 video 控件

<video class = "animator" ref = "video" src= "/video/mov_bbb.mp4" autoplay=" true" muted = "false" controls = "true" >

控制音视频播放

通过 ref 引用选择对应控件进行控制

this.$refs.video.start();
this.$refs.video.pause();

• 更多函数/参数请参考 //foundation/ace/ace_engine_lite/frameworks/src/core/components/video_component.cpp RegisterNativeFunctions

应用生成

请参考应用开发标准流程生成 hap 包，然后在开发板上进行安装运行。

注意事项

• 视频文件所在的目录必须是 777 权限 chown -R 0777 dir

君正自定义控件

• 请注意现在君正自定义控件只在 2022-08-01 日期之前的 SDK 中提供

参考 Demo

1. 查看源代码工程下指定路径

//iot/oh-apps/source-code/halley5/VideoPlayer

2. 百度网盘获取预置应用源码

源码分析

声明自定义控件

指定 div 的 id 后对应 div 区域会转变为 video 视频播放区域。

# index.hml
<div id="video_output" ...>

导入控件库

运用 JS 语法调用视频库控制视频播放。

# index.js
import video from '@system.video';

## 指定视频播放文件，参数为开发板路径
video.src = '/video/a.mp4';

## 启动播放
video.play();

## 停止播放
video.pause();

## 切换视频
video.src = '/video/b.mp4';
video.play();

应用生成

请参考应用开发标准流程生成 hap 包，然后在开发板上进行安装运行。

注意事项

• 视频文件所在的目录必须是 777 权限 chown -R 0777 dir