小程序上传视频预览&&列表视频预览

视频/图片二选一并预览

视频演示

坑

video组件的层级是最高的，代码覆盖不了，这就导致删除视频的按钮没法溢出组件去显示，为了实现这个溢出显示删除按钮，我把预览改为点击view组件直接全屏播放，退出全屏停止播放，UI显示如图

UI效果

wxml

在这我把video先自动播放，不然全屏会失败，选择加载后就静音播放

wxss

.prew_img,.upload,.prew_video{
    width: 148rpx;
    height: 148rpx;
    margin: 0 30rpx 30rpx 0;
}
.prew_img{
    position: relative;
    background: no-repeat center center;
    background-size: cover;
}
.prew_img .bind{
    width: 100%;
    height: 100%;
}
.prew_img .delete,.prew_video .delete{
    position: absolute;
    top: -16rpx;
    right: -16rpx;
    width: 32rpx;
    height: 32rpx;
    z-index: 9;
}
.prew_video{
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*居中对齐*/
    position: relative;
    background-color: #000;
}
.prew_video[hidden]{
    display: none;
}
.prew_video .play{
    width: 48rpx;
    height: 48rpx;
}
/* 坑~ video必须先渲染出来，不然全屏会横屏 */
#prew_video{
    position: absolute;
    left: 0;
    top: 0;
    width: 1rpx;
    height: 1rpx;
}

js

Page({
    /**
     * 页面的初始数据
     */
    data: {
        tipHide: false,
        chooseTypeHide: true,
        chooesImage: [],
        chooesVideo: '',
        playVideo: false
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function (res) {
        this.videoContext = wx.createVideoContext('prew_video');
    },
    /**
     * 选择上传类型
     */
    chooseType: 3,
    bindChooseType: function(e){
        var thisType = e.currentTarget.dataset.type;
        if (thisType!=3){
            this.chooseType = thisType;
            // 选择类型之后再次调用选择上传文件
            this.bindChooseMedia();
        }
        this.setData({
            chooseTypeHide: true
        });
    },
    /**
     * 选择上传文件
     */
    bindChooseMedia: function(e){
        var upType = this.chooseType;
        var this_ = this;
        if (upType==3){
            // 未选择类型
            this_.setData({
                tipHide: true,
                chooseTypeHide: false
            })
        }else{
            if (upType == 1){
                // 图片
                console.log('图片')
                var haveImage = this_.data.chooesImage;
                wx.chooseImage({
                    count: 9 - haveImage.length, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var tempFilePaths = res.tempFilePaths;
                        console.log(tempFilePaths)
                        this_.setData({
                            chooesImage: haveImage.concat(tempFilePaths)
                        })
                    }
                })
            }else{
                // 视频
                console.log('视频')
                wx.chooseVideo({
                    sourceType: ['album', 'camera'],
                    maxDuration: 60,
                    camera: 'back',
                    success: function (res) {
                        this_.setData({
                            chooesVideo: res.tempFilePath
                        })
                    }
                })
            }
        }
    },
    /**
     * 删除图片
     */
    bindDeleteImage: function(e){
        var thisIndex = e.currentTarget.dataset.index;
        var allImage = this.data.chooesImage;
        allImage.splice(thisIndex,1);
        this.setData({
            chooesImage: allImage
        })
    },
    /**
     * 删除视频
     */
    bindDeleteVideo: function(e){
        this.setData({
            chooesVideo: ''
        })
    },
    /**
     * 预览图片
     */
    bindPreviewImage: function (e) {
        console.log(e)
        var curData = e.currentTarget.dataset;
        wx.previewImage({
            current: curData.current,
            urls: curData.group
        })
    },
    /**
     * 预览视频
     */
    bindPreviewVideo: function (e) {
        var videoContext = this.videoContext;
        videoContext.seek(0);
        videoContext.play();
        videoContext.requestFullScreen();
    },
    /**
     * 全屏改变
     */
    bindVideoScreenChange: function(e){
        var status = e.detail.fullScreen;
        var play = {
            playVideo: false
        }
        if (status){
            play.playVideo = true;
        }else{
            this.videoContext.pause();
        }
        this.setData(play);
    }
})

---

2017年12月21日补充：

列表视频预览

wxml文件内容

   

......


    
  

js文件内容

Page({
    data: {
        playVideo: false,       // 播放video
        playVideoSrc: '',       // 播放video地址
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    videoContext: null,
    onReady: function (res) {
        this.videoContext = wx.createVideoContext('prew_video');
    },
    /**
     * 预览视频
     */
    bindPlayVideo: function (e) {
        var videoSrc = e.currentTarget.dataset.videoSrc;
        var videoContext = this.videoContext;
        this.setData({
            playVideoSrc: videoSrc
        })
        videoContext.seek(0);
        videoContext.play();
        videoContext.requestFullScreen();
    },
    /**
     * 全屏改变
     */
    bindVideoScreenChange: function (e) {
        var status = e.detail.fullScreen;
        console.log(status)
        var play = {
            playVideo: false
        }
        if (status) {
            play.playVideo = true;
        } else {
            this.videoContext.pause();
        }
        this.setData(play);
    },
})