uni-app 小程序 滾動視頻播放

1.scss可以查看 該文章

http://www.lxweimin.com/p/733fe8faae6c

2.滾動視頻播放代碼如下:

如圖:

image.png
<template>
    <view class="science-index width-100 min-h-vh-100 bg-ff">
        <view v-if="Datalist.length!=0">
            <view class="u-rela" :id="'videoitem_'+index" v-for="(item, index) in Datalist" :key="index">
                <video class="width-100 h-518" :id="'video_'+index" :src="item.src" controls></video>
                <view class="font-34 cor-ff u-abso pos-t-0 pos-l-0 pos-r-0 u-p-30 ">{{index}} - {{item.title}}</view>
            </view>
            <u-loadmore v-if="page != 1" bg-color="#fff" :margin-top="40" :margin-bottom="40" :status="status"
                :icon-type="iconType" :load-text="loadText" />
        </view>
        <u-empty mode="list" v-if="DataList.length==0" />
    </view>
</template>
<script>
    var sys = uni.getSystemInfoSync();
    var baseCenter = sys.windowHeight / 2;
    import mixins from '@/common/mixin.js';
    export default {
        mixins: [mixins],
        data() {
            return {
                Datalist : [
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                    {title : "標題", src:'https://vd3.bdstatic.com/mda-kigx3f6937z2nuf8/v1-cae/mda-kigx3f6937z2nuf8.mp4'},
                ],
                videoContext: null, // 創建 video 元素
                playIngIndex: null, //播放視頻下標
                timer: null,//控制 延遲器
            }
        },
        
        onLoad: function() {

        },

        methods: {
            scrollPlay: function(e) {
                //暫停
                if (this.playIngIndex != null) {
                    this.videoContext = uni.createVideoContext("video_" + this.playIngIndex);
                    this.videoContext.pause();
                }
                // 計算一下需要播放的視頻
                this.getNeedPlay(0);
            },
            getNeedPlay: function(i) {
                var vsq = uni.createSelectorQuery().select("#videoitem_" + i);
                vsq.fields({
                    rect: true,
                    size: true
                }, data => {
                    var vTop = data.top;
                    if (vTop > 0 && vTop <= baseCenter + data.height / 2) {
                        this.playIngIndex = i;
                        console.log('play..... ', i);
                        this.videoContext = uni.createVideoContext("video_" + i);
                        this.videoContext.play();
                    } else {
                        i++;
                        if (i < this.Datalist.length) {
                            this.getNeedPlay(i);
                        }
                    }
                }).exec();
            }
        },

        /* 頁面滾動監聽*/
        onPageScroll: function(e) {
            if (this.timer != null) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(function() {
                this.scrollPlay(e);
            }.bind(this), 200);
        },
    }
</script>
<style lang="scss" scoped>
    .science-index {}
</style>

3.mixin.js混入文件,公用 js 文件
    data() {
        return {
            /* 分頁 參數 設置 */
            page: 1, //當前頁數
            last_page: 0, //總頁面數
            status: 'loadmore',
            iconType: 'flower',
            loadText: {
                loadmore: '上拉加載',
                loading: '努力加載中',
                nomore: '沒有更多了'
            },
        }
    },
    created() {
      
    },
    methods: {
        /* 跳轉外鏈 */
        goReLaunch(val) {
            uni.reLaunch({
                url: val
            });
        },


        /* 跳轉 重定向 */
        goRedirectTo(val) {
            uni.redirectTo({
                url: val
            });
        },

        /* 跳轉  Navigate*/
        goNavigateTo(val) {
            if (val) {
                uni.navigateTo({
                    url: val,
                });
            } else {
                this.showToast("敬請期待...");
            }
        },


        /* 跳轉 switchTab*/
        goSwitchTab(url) {
            uni.switchTab({
                url: url
            });
        },

        /* 復制鏈接 方法 */
        copy(value) {
            if (value) {
                uni.setClipboardData({
                    data: value, //要被復制的內容
                      success: () => { //復制成功的回調函數
                             this.showToast(`復制成功`);
                    },
                    fail: () => {
                        this.showToast(`復制失敗`);
                    },
                });
            } else {
                this.showToast(`暫無可以復制內容哦`);
            }
        },

        /* 排序 小到大 */
        compare(prop) {
            return function(obj1, obj2) {
                var val1 = obj1[prop];
                var val2 = obj2[prop];
                return val1 - val2;
            }
        },

        /* 排序 大到小 */
        compare1(prop) {
            return function(obj1, obj2) {
                var val1 = obj1[prop];
                var val2 = obj2[prop];
                return val2 - val1;
            }
        },

        /* 時分秒轉時間戳
         * status == 1 =>年月日 時
         * status == ? =>時分秒
         */
        time_to_sec(time, status) {
            let data = new Date();
            if (time) {
                if (status == 1) {
                    let sec = new Date(time).getTime() / 1000;
                    return sec;
                } else {
                    let year = data.getFullYear();
                    let month = data.getMonth() + 1;
                    let day = data.getDate();
                    let sec = new Date(year + '/' + month + '/' + day + ' ' + time).getTime() / 1000;
                    return sec;
                }
            }
        },

        /* 銀行卡號 驗證 */
        luhnCheck(bankno) {
            var lastNum = bankno.substr(bankno.length - 1, 1); //取出最后一位(與luhn進行比較)
            var first15Num = bankno.substr(0, bankno.length - 1); //前15或18位
            var newArr = new Array();
            for (var i = first15Num.length - 1; i > -1; i--) { //前15或18位倒序存進數組
                newArr.push(first15Num.substr(i, 1));
            }
            var arrJiShu = new Array(); //奇數位*2的積 <9
            var arrJiShu2 = new Array(); //奇數位*2的積 >9
            var arrOuShu = new Array(); //偶數位數組
            for (var j = 0; j < newArr.length; j++) {
                if ((j + 1) % 2 == 1) { //奇數位
                    if (parseInt(newArr[j]) * 2 < 9) arrJiShu.push(parseInt(newArr[j]) * 2);
                    else arrJiShu2.push(parseInt(newArr[j]) * 2);
                } else //偶數位
                    arrOuShu.push(newArr[j]);
            }
            var jishu_child1 = new Array(); //奇數位*2 >9 的分割之后的數組個位數
            var jishu_child2 = new Array(); //奇數位*2 >9 的分割之后的數組十位數
            for (var h = 0; h < arrJiShu2.length; h++) {
                jishu_child1.push(parseInt(arrJiShu2[h]) % 10);
                jishu_child2.push(parseInt(arrJiShu2[h]) / 10);
            }
            var sumJiShu = 0; //奇數位*2 < 9 的數組之和
            var sumOuShu = 0; //偶數位數組之和
            var sumJiShuChild1 = 0; //奇數位*2 >9 的分割之后的數組個位數之和
            var sumJiShuChild2 = 0; //奇數位*2 >9 的分割之后的數組十位數之和
            var sumTotal = 0;
            for (var m = 0; m < arrJiShu.length; m++) {
                sumJiShu = sumJiShu + parseInt(arrJiShu[m]);
            }
            for (var n = 0; n < arrOuShu.length; n++) {
                sumOuShu = sumOuShu + parseInt(arrOuShu[n]);
            }
            for (var p = 0; p < jishu_child1.length; p++) {
                sumJiShuChild1 = sumJiShuChild1 + parseInt(jishu_child1[p]);
                sumJiShuChild2 = sumJiShuChild2 + parseInt(jishu_child2[p]);
            }
            //計算總和
            sumTotal = parseInt(sumJiShu) + parseInt(sumOuShu) + parseInt(sumJiShuChild1) + parseInt(sumJiShuChild2);
            //計算luhn值
            var k = parseInt(sumTotal) % 10 == 0 ? 10 : parseInt(sumTotal) % 10;
            var luhn = 10 - k;
            if (lastNum == luhn) {
                // $("#banknoInfo").html("luhn驗證通過");
                return true;
            } else {
                // $("#banknoInfo").html("銀行卡號必須符合luhn校驗");
                return false;
            }
        },

        /* 對象 過濾不需要的字段 保留需要字段 */
        filterObj(obj, arr) {
            if (typeof(obj) !== "object" || !Array.isArray(arr)) {
                throw new Error("參數格式不正確")
            }
            const result = {}
            Object.keys(obj).filter((key) => arr.includes(key)).forEach((key) => {
                result[key] = obj[key]
            })
            return result
        },

        /* 小黑窗 公用函數 */
        showToast(msg, icon) {
            uni.showToast({
                title: msg,
                icon: icon ? icon : 'none',
                duration: 2000,
                mask: true,
            });
        },

        /* loading 小黑窗 公用函數 */
        showLoading(msg) {
            uni.showLoading({
                title: msg,
                mask: true,
            });
        },

        /* 隱藏 loading 小黑窗 公用函數*/
        hideLoading() {
            setTimeout(() => {
                uni.hideLoading();
            }, 2000);
        },

        /* 返回上一頁 */
        onBack(backnum) {
            uni.navigateBack({
                delta: backnum,
            });
        },

        /* 設置標題 */
        setNavigationBarTitle(title) {
            uni.setNavigationBarTitle({
                title: title
            })
        },
    }
}

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容