21.1 视频再次播放跳转到刚才播放的位置

VideoContext.seek(number position 单位秒)：跳转到刚才播放的位置。

思路：播放一个视频，就保存它现在播放到的位置。视频那么多，所以要开辟一个数组来存储这个数据。

bindtimeupdate：视频时长变化时，触发的时间。可以用它来知道现在的时长到了哪里。

观察 和 打印一下 这个 回调函数的 事件对象。

很明显，这个 detail 里面的 currentTime 就是这个视频 走到的 时长。那么我们把这个时长存起来就完事了。

    // 监视视频播放进度的回调函数
    handleTimeUpdate(event){
        let timeUpdate = {
            vid: event.currentTarget.id,
            currentTime: event.detail.currentTime
        }
        let {videoUpdateTime} = this.data;
        let videoItem = videoUpdateTime.find(item => item.vid === timeUpdate.vid);
        if(videoItem){
            videoItem.currentTime = timeUpdate.currentTime;
        }else{
            videoUpdateTime.push(timeUpdate);
        }
        this.setData({
            videoUpdateTime
        })
    },

数组.find()：可以提供一个 条件，然后来找目标项目，并且返回这个项目对象。可以对 该项目 进行任何的操作处理。直接影响 该数组。

咱们这个 find 里面的那个 是一个 表达式写法的函数。原型应该长这样：

    // 点击视频事件
    handlePlay(event){
        let vid = event.currentTarget.id;
        let {videoUpdateTime} = this.data; // 拿到所有视频播放到的时长的 数组数据
        if(this.data.preVid == ""){
            console.log(vid);
            console.log(this.data.preVid);
            this.setData({
                preVid: vid
            });
            console.log(vid);
            console.log(this.data.preVid);
            setTimeout(()=>
            {
                let video = wx.createVideoContext(this.data.preVid);
                let videoItem = videoUpdateTime.find(item => item.vid === vid);
                if(videoItem){
                    video.seek(videoItem.currentTime);
                }
                video.play();
            }, 500);
        }else if(vid != this.data.preVid){
            let videoContext = wx.createVideoContext(this.data.preVid);
            videoContext.stop();
            console.log(vid);
            console.log(this.data.preVid);
            this.setData({
                preVid: vid
            });
            setTimeout(()=>
            {
                let video = wx.createVideoContext(this.data.preVid);
                let videoItem = videoUpdateTime.find(item => item.vid === vid);
                if(videoItem){
                    video.seek(videoItem.currentTime);
                }
                video.play();
            }, 300);
        }
    },

bindended：当视频播放到末尾时，会触发 该事件。我们可以通过这个事件来给更新我们的时长为 0。代表着刚才那个视频已经播放完了，你再次点击播放。肯定重新开始呀。

    // 视频播放到 末尾的回调
    handleEnded(event){
        let {videoUpdateTime} = this.data;
        let videoItem = videoUpdateTime.find(item => item.vid === event.currentTarget.id);
        videoItem.currentTime = 0;
        this.setData({
            videoUpdateTime
        })
    },

21.2 上拉刷新和下拉加载

1. 上拉刷新

bindrefresherrefresh：上拉刷新时，触发的事件。
refresher-enabled：是否支持上拉刷新，如果为 true。那么就会开启上拉刷新这个功能。这样才能触发 bindrefresherrefresh。
refresher-triggered：由该状态 来设定 上拉刷新的状态。如果是 false，上拉刷新则没有，如果是 true 上拉刷新则显示。

    // 上拉刷新 回调
    handleRefresher(){
        this.getVideoList(this.data.navId);
        this.setData({
            isTriggered: false // 关闭下拉刷新 显示
        })
    },

2. 下拉加载

bindscrolltolower：滚动到底部/右边时触发 的事件。

    // 下拉加载 回调
    async handleToLower() {
        wx.showLoading();
        this.setData({
            page: this.data.page + 1
        })
        let videoListData = await request('video/group', {id: this.data.navId, offset: this.data.page});
        let index = this.data.videoList.length;
        videoListData.datas.map(item => {
            item.id = index++; // 每个数组里 没有 id 这个 属性，那么这里 写了 id
            // 那么 就会 自动写入。
            return item;
        })
        let videoList = this.data.videoList;
        let videoURLs = this.data.videoURLs;
        for (let i = 0; i < videoListData.datas.length; ++i) {
            // http://localhost:3000/video/url?id=A24C8DF6283CD4356D86F92652989573
            let videoURL = await request("video/url", {id: videoListData.datas[i].data.vid});
            videoURLs.push(videoURL.urls[0].url);
            videoList.push(videoListData.datas[i]);
        }
        wx.hideLoading();// 关闭 loading 提示框
        this.setData({
            videoList: videoList,
            videoURLs: videoURLs
        });
    },

切记：一定要有滚动条的支持，才能够 让用户 交互 所谓的 上拉和下拉。要不然 根本触发不了对应 事件！！

21.3 实现转发功能

open-type="share"：实现转发的功能。

    onShareAppMessage(event) {
        if(event.from != "menu"){
            let vid = event.target.id;
            let imageUrl = "";
            for(let i = 0; i < this.data.videoList.length; ++i){
                if(this.data.videoList[i].data.vid ==  vid){
                    imageUrl = this.data.videoList[i].data.coverUrl
                    break;
                }
            }
            console.log(imageUrl)
            return {
                title: "分享视频",
                page: "/pages/video/video",
                imageUrl: imageUrl
            }
        }
    }

21.4 搭建 recommend 头部

<view class="recommendSongContainer">

    <view class="header">
        <image src = "/static/images/recommendSong/recommendSong.jpg">image>
        <view class="date">
            <text class="month">07 / text>
            <text class="day">17text>
        view>
    view>

view>

/* pages/recommendSong/recommendSong.wxss */
.recommendSongContainer .header {
    position: relative;
    width: 100%;
    height: 300rpx;
}

.recommendSongContainer .header image {
    width: 100%;
    height: 100%;
}

.recommendSongContainer .header .date {
    position: absolute;
    top: 120rpx;
    left: 250rpx;
    width: 300rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
}