c***@163.com
c***@163.com
  • 发布:2024-11-18 17:34
  • 更新:2024-11-18 17:34
  • 阅读:179

【报Bug】uniapp中使用html5+的plus.video.VideoPlayer播放hevc编码格式视频会出现花屏、有画面无声音等问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: Alpha

HBuilderX版本号: 4.33

手机系统: 全部

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

测试过的手机:

iphone13、华为nova5 pro、vivo iQOO Z7x、小米15

示例代码:
<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)播放视频

预期结果:

希望播放hevc编码格式视频时画面清晰正常,无花屏及有画无声等问题出现

实际结果:

播放hevc编码格式视频会出现花屏、有画面无声音等问题

bug描述:

2024-11-18 17:34 负责人:无 分享
已邀请:

要回复问题请先登录注册