鸿蒙5.0开发之AVPlayer拉流播放(Video组件版),纯前端使用方法
·
本文的前提是你已经吧需拉流的url从后端引出了,只需在前端使用即可
@Entry
@Component
struct VideoPage {
private cameraService:Test=new Test();//你需从后端引出你的url
private avPlayer:media.AVPlayer | null =null;//声明并初始化 avPlayer 属性
private videoUrl:string='';
async aboutToAppear(){
await this.initPlayer();//检查和初始化url用
}
async initPlayer(){
this.videoUrl =await this.cameraService.getStreamUrl() || "";
if (!this.videoUrl) {
console.error("无法获取视频流地址")
return;
}
//创建AVPlayer实例
this.avPlayer =await media.createAVPlayer();
//配置播放源
this.avPlayer.url = this.videoUrl;
//准备播放
await this.avPlayer.prepare()
try {
await this.avPlayer.play();
console.log("摄像头流开始播放");
} catch (err) {
console.error(`播放失败: ${JSON.stringify(err)}`);
}
}
onPageHide(){
//释放播放器资源
if (this.avPlayer) {
this.avPlayer.stop();
this.avPlayer.release();
this.avPlayer=null;
}
}
build() {
Column() {
Column() {
// 视频预览区域
Video({
controller:null//不显示默认控制条
})
.controls(false)//隐藏控制条
.autoPlay(true)//自动播放
.onPrepared(()=>console.log("视频准备就绪"))
.onError(()=>console.error("适配播放出错"))
.width("100%")
.height(250)
.backgroundColor("#000")
}
.width('100%')
.height('100%')
.margin({ top: 10 });
}
}
更多推荐



所有评论(0)