8***@qq.com
8***@qq.com
  • 发布:2025-08-15 11:36
  • 更新:2025-08-15 11:36
  • 阅读:12

video direction属性在鸿蒙系统5.0 上不生效 ?

分类:uni-app
<template>  
    <view class="content" style="padding-top: 44px;">  
        <u-navbar title="个人中心" :autoBack="true">  
        </u-navbar>  
        <video id="liveVideo" :src="src" :autoplay="false" class="live-video" :class="{'screen-video':isFullScreen}"  
            @fullscreenchange="fullscreenChange" @tap.stop="videoClick(isOverlay)" :controls="false"  
            @timeupdate="onTimeUpdate" :direction="0"   enable-auto-rotation @loadedmetadata="onLoadedMetadata" @play="onPlay" @pause="onPause">  
            <!-- 遮罩 自定义 -->  
            <view class="video-overlay">  

                <!-- 返回 -->  
                <view class="_flex video-header" v-if="isFullScreen">  
                    <!--        <u-icon name="arrow-left" :labelColor="iconColor" :color="iconColor" size="22"  
                        @click="toggleFullscreen(1)"></u-icon> -->  
                    <image src="/static/rotate.png" @click="toggleFullscreen(1)" class="img-icon24"></image>  
                    <view class="video-header-title">测试</view>  
                </view>  

                <!-- 进度条 -->  
                <view class="video-list _flex" v-if="isOverlay">  
                    <image :src="`/static/${videoPlay?'play':'pause'}.png`" @click="videoPlayAndPause"  
                        class="img-icon24"></image>  
                    <view class="video-date" style="margin: 0 10rpx;">{{ currentTimeFormatted }}</view>  
                    <slider :value="currentTime" style="flex:1" block-size="16" activeColor="#FF5C00"  
                        backgroundColor="hsla(0,0%,100%,.4)" @change="setProgress" :max="duration" block-color="#fff" />  
                    <view class="video-date">{{durationFormatted}}</view>  
                    <image src="/static/rotate.png" style="margin-left: 20rpx;" v-if="!isFullScreen"  
                        @tap.stop="toggleFullscreen(2)" class="img-icon24"></image>  
                </view>  
            </view>  

        </video>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                src: 'https://media.w3.org/2010/05/sintel/trailer.mp4',  
                isFullScreen: false,  
                currentTime: 0,  
                duration: 0,  
                videoPlay: false,  
                isOverlay: false  
            }  
        },  
        computed: {  
            // 格式化当前播放时间(秒 -> 分:秒)  
            currentTimeFormatted() {  
                return this.formatTime(this.currentTime);  
            },  
            // 格式化总时长  
            durationFormatted() {  
                return this.formatTime(this.duration);  
            },  
        },  
        onLoad() {  

        },  
        mounted() {  
            // this.videoPlay=!this.autoplay  
            this.videoContext = uni.createVideoContext('liveVideo', this);  
            // this.videoContext.exitFullScreen()  

        },  
        methods: {  
            // 点击视频事件  
            videoClick(e) {  
                console.log(e, this.videoPlay && e);  
                this.isOverlay = this.videoPlay && e ? true : !e  

            },  
            onTimeUpdate(e) {  
                // 更新当前播放时间  
                this.currentTime = e.detail.currentTime;  
            },  
            // 视频元数据加载完成(获取总时长)  
            onLoadedMetadata(e) {  
                this.duration = e.detail.duration;  
            },  
            // 格式化时间(将秒数转换为 mm:ss 格式)  
            formatTime(seconds) {  
                const min = Math.floor(seconds / 60);  
                const sec = Math.floor(seconds % 60);  
                return `${min}:${sec < 10 ? '0' : ''}${sec}`;  
            },  
            videoPlayAndPause() {  
                if (this.videoPlay) {  
                    this.videoPlay = false  
                    this.videoContext.pause() //暂停  
                } else {  

                    this.videoPlay = true  
                    this.videoContext.play() //播放  
                }  
                console.log(this.videoPlay);  

            },  
            onPlay(e) {  
                this.videoPlay = true  
            },  
            onPause(e) {  
                // this.showState = 0  
                this.videoPlay = false  
            },  
            // 全屏||退出全屏  
            async toggleFullscreen(e) {  
                var pages = getCurrentPages();  
                var page = pages[pages.length - 1];  
                console.log(this.isFullScreen, page);  

                if (this.isFullScreen) {  
                    await this.videoContext.exitFullScreen()  
                    return  
                }  
                this.videoContext.requestFullScreen({direction:0})  
            },  
            // 设置播放进度  
            setProgress(e) {  
                const val = e.detail.value  
                this.videoContext.seek(val)  
            },  
            // 全屏变化  
            fullscreenChange(e) {  
                let lastFullscreen = false;  
                const isFullscreen = e.detail.fullScreen  
                this.isFullScreen = isFullscreen  
                if (isFullscreen !== lastFullscreen && lastFullscreen == true) {  
                    // 状态改变,执行处理逻辑  
                    if (!isFullscreen) {  
                        lastFullscreen = false;  
                        // 退出全屏时显示导航栏  

                        // uni.showNavigationBarLoading();  
                        this.videoContext.requestFullScreen();  
                    } else {  
                        lastFullscreen = true;  
                        // uni.showNavigationBarLoading();  
                        this.videoContext.exitFullScreen();  
                    }  

                }  

            }  
        }  
    }  
</script>  

<style lang="scss">  
    ._flex {  
        display: flex;  
        align-items: center;  
    }  

    .live-video {  
        position: relative;  
        display: block;  
        width: 100%;  
    }  

    .video-overlay {  
        height: 100%;  
        width: 100%;  
        position: absolute;  
        top: 0;  
        z-index: 998;  
    }  

    .video-list {  
        color: #fff;  
        position: absolute;  
        width: calc(100% - 20upx);  
        /* height: 88rpx; */  
        padding: 6upx 10upx;  
        bottom: 0;  
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.38) 33.33%, rgba(0, 0, 0, 0.75) 66.67%, rgba(0, 0, 0, 0.75) 100%);  
    }  

    .video-header {  
        height: 88upx;  
        padding: 0 36upx 0 18upx;  
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.38) 33.33%, rgba(0, 0, 0, 0.75) 66.67%, rgba(0, 0, 0, 0.75) 100%);  

        .video-header-title {  
            margin-left: 36rpx;  
        }  
    }  

    .live-count {  
        color: #fff;  
        margin: 30upx 20upx 20upx;  
        text-align: right;  
    }  

    .video-state,  
    .video-list,  
    .img-icon24,  
    .u-icon,  
    .multiple-item,  
    .error-but {  
        pointer-events: auto;  
        /* 单独启用事件 */  
    }  

    .video-overlay,  
    .video-header,  
    .multiple-box,  
    .video-error {  
        pointer-events: none;  
        /* 允许事件穿透到video元素 */  
    }  

    .video-state {  
        // width: 130rpx;  
        // height: 130rpx;  
        padding: 20upx;  
        background-color: rgba(0, 0, 0, 0.75);  
        position: absolute;  
        top: 50%;  
        left: 50%;  
        transform: translate(-50%, -50%);  
        border-radius: 50%;  
        display: flex;  
        justify-content: center;  
        align-items: center;  

        .play-icon {  
            width: 100%;  
            height: 100%;  
        }  

        .pause-ico {  
            width: 72upx;  
            height: 72upx;  
        }  
    }  

    .img-icon24 {  
        width: 48upx;  
        height: 48upx;  
    }  

    .multiple-box {  
        background: rgba(0, 0, 0, 0.75);  
        height: calc(100% - 84upx);  
        position: absolute;  
        padding: 60upx 24upx 24upx;  
        right: 0;  
        z-index: 999;  
        // #ifdef H5  
        display: flex;  
        justify-content: center;  
        flex-direction: column;  
        // #endif  
        color: #fff;  
        top: 0;  

        .multiple-item {  
            margin: 24upx;  
            padding: 10upx 0;  

        }  
    }  

    .primary-color {  
        color: #FF5C00;  
    }  

    .video-error {  
        color: #fff;  
        width: 100%;  
        height: 100%;  
        text-align: center;  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        font-size: 30rpx;  
        justify-content: center;  

        .video-error-text {  
            padding-bottom: 40upx;  
        }  

        .error-but {  
            padding: 24upx 16upx;  
            border: 1px solid #fff;  
            display: inline-block;  
            border-radius: 8upx;  
        }  
    }  
</style>
2025-08-15 11:36 负责人:无 分享
已邀请:

要回复问题请先登录注册