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

视频/图片二选一并预览

视频演示

坑

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

UI效果

wxml

<view class="prew_img" wx:for="{{chooesImage}}" wx:key="{{index}}" style="background-image:url({{item}});">
    <view class="bind" data-group="{{chooesImage}}" data-current="{{item}}" bindtap="bindPreviewImage"></view>
    <image class="delete" data-index="{{index}}" bindtap="bindDeleteImage" src="../../static/img/delete.png"></image>
</view>
<view class="prew_video" hidden="{{chooesVideo==''}}">
    <video id="prew_video" 
        autoplay="true" 
        muted="{{!playVideo}}"
        bindfullscreenchange="bindVideoScreenChange"
        src="{{chooesVideo}}" ></video>
    <image class="play" bindtap="bindPreviewVideo" src="../../static/img/play.png"></image>
    <image class="delete" bindtap="bindDeleteVideo" src="../../static/img/delete.png"></image>
</view>
<image class="upload" hidden="{{chooesImage.length==9||chooesVideo!=''}}" bindtap="bindChooseMedia" src="../../static/img/add.png"></image>

在这我把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文件内容

<!-- 循环列表视频项 -->
<view class="videoBox" wx:if="{{item.vedio}}" 
    style="background-image:url({{item.vedio+'.jpg'}});" 
    bindtap="bindPlayVideo" 
    data-video-src="{{item.vedio}}">
   <image class="play" src="../../static/img/play.png"></image>
</view>
......
<!-- 文档最底部 -->
<view class="video_box">
    <video id="prew_video" 
    autoplay="true" 
    muted="{{!playVideo}}" 
    bindfullscreenchange="bindVideoScreenChange" 
    direction="0"
    src="{{playVideoSrc}}"></video>
  </view>