- 发布:2024-11-18 17:34
- 更新:2024-11-18 17:34
- 阅读:179
【报Bug】uniapp中使用html5+的plus.video.VideoPlayer播放hevc编码格式视频会出现花屏、有画面无声音等问题
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win11
HBuilderX类型: Alpha
HBuilderX版本号: 4.33
手机系统: 全部
页面类型: vue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
测试过的手机:
示例代码:
<template>
<view class="videoContainner">
<view class="iframeBox" :style="'padding-top:' + iStatusBarHeight + 'px;'">
<view class="backBox">
<uni-icons type="back" size="30" color="rgb(255, 255, 255)" @click="backList"></uni-icons>
</view>
<view id="video1"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
iStatusBarHeight: 0,
topHeight: 0,
viewHeight: 0,
videoUrl: '',
videoplayer: ''
};
},
onLoad(o) {
this.videoUrl = o.url;
},
created() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
},
onReady() {
const query = uni.createSelectorQuery().in(this);
query
.select('.backBox')
.boundingClientRect((data) => {
this.topHeight = data.height; // 头部元素高度
})
.exec();
setTimeout(() => {
// #ifdef APP-PLUS
this.createPlayer();
// #endif
// #ifdef H5
this.viewHeight = this.topHeight + 260;
// #endif
}, 30);
},
beforeDestroy() {
if (this.videoPlayer) {
this.videoPlayer.close();
this.videoPlayer = null;
console.log('视频播放已停止');
}
},
methods: {
createPlayer() {
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview();
// 创建视频播放器
this.videoPlayer = new plus.video.VideoPlayer('video1', {
src: this.videoUrl, // 视频地址
top: this.iStatusBarHeight + this.topHeight, // 视频播放器距离页面顶部的距离
height: '80%', // 播放器高度
position: 'static', // 可选值:absolute 或 static
autoplay: true // 是否自动播放
});
currentWebview.append(this.videoPlayer);
// #endif
},
// 返回
backList() {
uni.navigateBack({
delta: 1
});
}
}
};
</script>
<template>
<view class="videoContainner">
<view class="iframeBox" :style="'padding-top:' + iStatusBarHeight + 'px;'">
<view class="backBox">
<uni-icons type="back" size="30" color="rgb(255, 255, 255)" @click="backList"></uni-icons>
</view>
<view id="video1"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
iStatusBarHeight: 0,
topHeight: 0,
viewHeight: 0,
videoUrl: '',
videoplayer: ''
};
},
onLoad(o) {
this.videoUrl = o.url;
},
created() {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
},
onReady() {
const query = uni.createSelectorQuery().in(this);
query
.select('.backBox')
.boundingClientRect((data) => {
this.topHeight = data.height; // 头部元素高度
})
.exec();
setTimeout(() => {
// #ifdef APP-PLUS
this.createPlayer();
// #endif
// #ifdef H5
this.viewHeight = this.topHeight + 260;
// #endif
}, 30);
},
beforeDestroy() {
if (this.videoPlayer) {
this.videoPlayer.close();
this.videoPlayer = null;
console.log('视频播放已停止');
}
},
methods: {
createPlayer() {
// #ifdef APP-PLUS
var currentWebview = this.$scope.$getAppWebview();
// 创建视频播放器
this.videoPlayer = new plus.video.VideoPlayer('video1', {
src: this.videoUrl, // 视频地址
top: this.iStatusBarHeight + this.topHeight, // 视频播放器距离页面顶部的距离
height: '80%', // 播放器高度
position: 'static', // 可选值:absolute 或 static
autoplay: true // 是否自动播放
});
currentWebview.append(this.videoPlayer);
// #endif
},
// 返回
backList() {
uni.navigateBack({
delta: 1
});
}
}
};
</script>
操作步骤:
使用苹果手机拍摄并无压缩上传视频后,使用plus.video.VideoPlayer(id, style)播放视频
使用苹果手机拍摄并无压缩上传视频后,使用plus.video.VideoPlayer(id, style)播放视频
预期结果:
希望播放hevc编码格式视频时画面清晰正常,无花屏及有画无声等问题出现
希望播放hevc编码格式视频时画面清晰正常,无花屏及有画无声等问题出现
实际结果:
播放hevc编码格式视频会出现花屏、有画面无声音等问题
播放hevc编码格式视频会出现花屏、有画面无声音等问题
bug描述:
uniapp中使用html5+的plus.video.VideoPlayer播放hevc编码格式视频会出现花屏、有画面无声音等问题。
而html5+文档中写了支持hevc格式,见https://www.html5plus.org/doc/zh_cn/video.html#plus.video.VideoPlayer
0 个回复