视频播放

默认视频全屏展示，上划触发半屏展示并显示视频相关信息。

<template>
    <view class="vidTutDetails-page">
        <view class="video-box" @touchstart="touchstart" @touchend="touchend" :style="{height:isPush? '40vh':'100vh'}">
            <!-- #ifdef MP-WEIXIN -->
            <video :src="videoData.video" class="vid"></video>
            <!-- #endif -->
            <!-- #ifdef APP -->
            <view :prop="videoData" :change:prop="renderScript.initAmap" class="vid-tut-css" id="shop-video">
            </view>
            <!-- #endif -->
            <view class="blurb" v-show="!isPush">
                <view class="blurb-cont">
                    <view class="title u-line-1" style="pointer-events: none;">{{videoData.title}}</view>
                    <view class="cont">
                        <text style="pointer-events: none;">{{content}}</text>
                        <text style="margin-left: 15rpx;color: #409EFF;" v-if="expand" @click="isPush=true">展开</text>
                    </view>
                </view>
            </view>
        </view>

        <view class="content" :style="{height:isPush? '60vh':'0vh'}">
            <view class="iconfont icon-guanbi1 pop-icon" @click="isPush=false"></view>
            <view class="content-box">
                <view class="date">发布时间: {{videoData.create_time}}</view>
                <view class="article">{{videoData.video_dsc}}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        uni_get,
        uni_post
    } from '@/common/request/method.js'
    export default {
        data() {
            return {
                videoData: {}, //视频信息
                startY: 0, //开始划动的y点
                isPush: false, //是否展开
                content: '', //介绍字符
                expand: false, //
                id: '', //上个页面传来的id
            }
        },
        components: {},
        computed: {},
        watch: {},
        onLoad(option) {
            this.id = option.id;
        },
        mounted() {
            this.initCont();
        },
        onShow() {},
        methods: {
            //初始化
            initCont() {
                let data = {
                    id: this.id,
                }
                uni_get({
                    url: '/ShopVideo/detail',
                    data,
                    meta: {
                        loading: true
                    }
                }).then(res => {
                    if (res.data.code == 1) {
                        this.videoData = res.data.data;
                        if (res.data.data.video_dsc.length > 45) {
                            this.content = res.data.data.video_dsc.slice(0, 45) + '...';
                            this.expand = true;
                        } else {
                            this.content = res.data.data.video_dsc;
                            this.expand = false;
                        }
                    }
                })
            },
            //触摸屏幕开始;
            touchstart(data) {
                this.startY = data.touches[0].clientY;
                // console.log('开始点', this.startY);
            },
            //触摸结束
            touchend(data) {
                let endY = data.changedTouches[0].clientY;
                let differ = this.startY - endY;
                console.log('差', differ)
                if (differ > 50) {
                    this.isPush = true;
                }
                if (differ < -50) {
                    this.isPush = false;
                }
            }
        },
        onReachBottom() {},
        onPageScroll() {},
        onUnload() {}
    }
</script>


<script module="renderScript" lang="renderjs">
    export default {
        data() {
            return {
                videoData: {}
            }
        },
        mounted() {
            // setTimeout(() => {
            // 	this.initVideo();
            // }, 1500)

            //this.initVideo();
        },
        methods: {
            initAmap(value) {
                console.log("触发次数", value);
                this.videoData = value;
                let dom = document.getElementById('shop-video');
                if (value && dom) {
                    this.initVideo();
                }
            },
            //初始化视频
            initVideo() {
                console.log("有链接", this.videoData.video);
                let that = this;
                let video = document.createElement('video');
                video.src = that.videoData.video;
                video.class = 'shop-v';
                video.controls = true; // 显示控制条
                video.autoplay = false; // 自动播放
                video.poster = that.videoData.thumb;
                video.style.width = '100%';
                video.style.height = 'auto';
                document.getElementById('shop-video').appendChild(video);
                let dom = document.getElementById('shop-video');
                console.log("有元素", dom, this.videoData.video);
            }
        },
    }
</script>

<style lang="scss" scoped>
    .vidTutDetails-page {
        width: 100%;
        height: auto;

        .video-box {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #0B0B0B;
            position: relative;
            transition: all 0.5s;
        }

        .vid {
            width: 100%;
            height: 100%;
            transition: all 0.5s;
        }

        .blurb {
            width: 100%;
            position: absolute;
            bottom: 80rpx;
            left: 0;
            height: auto;
        }

        .content {
            width: 100%;
            position: relative;
            transition: height 0.5s;
            overflow: hidden;
        }

        .content-box {
            padding: 50rpx 30rpx 40rpx 30rpx;
            background-color: #ffffff;
            border-top-left-radius: 60rpx;
            border-top-right-radius: 60rpx;
            overflow-y: auto;
            height: 100%;
        }

        .date {
            font-size: 26rpx;
            color: #8F8F8F;
            width: 100%;
        }

        .article {
            width: 100%;
            margin-top: 50rpx;
            font-size: 34rpx;
            color: #161616;
        }

        .pop-icon {
            position: absolute;
            top: 50rpx;
            right: 30rpx;
            z-index: 3;
            font-size: 35rpx;
            color: #000000;
        }

        .blurb-cont {
            padding: 0rpx 40rpx;
        }

        .title {
            width: 100%;
            font-size: 32rpx;
            color: #ffffff;
        }

        .cont {
            margin-top: 10rpx;
            width: 100%;
            font-size: 26rpx;
            color: #ffffff;
        }

        .vid-tut-css {
            width: 100vw;
            height: auto;
        }
    }
</style>