封装Flv插件

132 阅读1分钟

工作里封装的创建flv对象的方法,用于快速播放视频,只需先创建一个div容器,用于放置video,在将该div对象和http播放地址传入该方法即可,方法中内置了视频错误重新加载。ex:creatStream($(divdom),'http://123456/asda/.....');方法会返回当前创建这个flv视频对象;在方法上还提供三个方法,用于清除flv对象和查看当前存在的flv对象。

(function() {
    /**0.依赖flv.js和jquery
     * 1.引入script标签   <script type="text/javascript" src="/static/javascripts/lib/flvVideo.js"></script>
     * 2.直接使用 createStream(),传入dom节点,httpurl,即可
     *          形参domId: 是一个dom对象,及需要将创建的video放置的盒子
     *              httpurl: 是播放的地址
     *              perFlvObj: 第三个参数不用传入,是在内部用于处理错误的情况
     * 3.返回一个flv实例对象
     * 4.提供三个方法  clearAllFlv  使用 createStream.clearAllFlv();将清除所有的flv对象
     *                clearOneFlv  使用 createStream.clearOneFlv(flvObj);清除指定的flv对象
     *		      checkObj  使用 createStream.checkObj();查询当前flv数组
     */
    let num = 0;
    let flvArr = []; //存放flv对象

    let createStream = function createStream(domId, httpurl, perFlvObj) {
    if (domId == null) return
    let self = this;


    //出现错误传入(错误的flv对象),将其清空
    if (perFlvObj) {
        try {
            perFlvObj && perFlvObj.interValTimer && clearInterval(perFlvObj.interValTimer);
            perFlvObj.destroy && perFlvObj.destroy();
        } catch (error) {
            console.log('err', error)
        }
        var errobjNum = flvArr.indexOf(perFlvObj)
        if (errobjNum != -1) {
            flvArr.splice(errobjNum, 1)
        }
        perFlvObj = null;
    }

    let videoDom = $(`<video id="videoElement" disablePictureInPicture width="100%" height="100%" muted controls></video>`)
    domId.html(videoDom);
    if (!httpurl) return;

    if (flvjs.isSupported()) {
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            "isLive": true,
            duration: 0,
            url: httpurl
        }, {
            enableWorker: true,
            enableStashBuffer: false,
            stashInitialSize: 0,
            isLive: true,
            lazyLoad: false,
            lazyLoadMaxDuration: 0,
            lazyLoadRecoverDuration: 0,
            deferLoadAfterSourceOpen: false,
            fixAudioTimestampGap: false,
        })

        // obj.flvList.push(flvPlayer); //将当前的flv对象存起来,

        flvPlayer.attachMediaElement(videoDom[0]);
        flvPlayer.load();

        var myTimeer = setTimeout(function() {
            flvPlayer.play();
        }, 2000)

        videoDom[0].onerror = function(err) {
            // console.log('videoDomerror')
            myTimeer && clearTimeout(myTimeer);
            createStream(domId, httpurl, flvPlayer)
        }

        flvPlayer.on("error", (err) => {
            // console.log('fLVDomerror')
            myTimeer && clearTimeout(myTimeer);
            createStream(domId, httpurl, flvPlayer)
        })

        // if (self['timer' + domId]) {
        //     clearInterval(self['timer' + domId]);
        // }
        var interValTimer = setInterval(function() {
            if (!videoDom[0].buffered.length) {
                try {
                    // console.log('buffered')
                    myTimeer && clearTimeout(myTimeer);
                    createStream(domId, httpurl, flvPlayer)

                } catch (error) {
                    console.log('catch', error)
                }
                return;
            }
            var end = videoDom[0].buffered.end(0);
            var diff = end - videoDom[0].currentTime;
            if (diff >= 0.5 || diff < 0) {
                videoDom[0].currentTime = end;
            }
            if (diff == 0) {
                // console.log('diff')
                myTimeer && clearTimeout(myTimeer);
                createStream(domId, httpurl, flvPlayer)

                return;
            }
        }, 3000);
        flvPlayer.interValTimer = interValTimer;
        flvArr.push(flvPlayer);
        return flvPlayer;
    };
};
//清除当前所有flv对象,用于全部视频窗口重置
createStream.clearAllFlv = function clearAllFlv() {
    for (var i = 0; i < flvArr.length; i++) {
        try {
            flvArr[i] && flvArr[i].destroy();

            flvArr[i] && flvArr[i].interValTimer && clearInterval(flvArr[i].interValTimer)

        } catch (error) {
            console.log(error)
        }
        flvArr.splice(i, 1);
        i = i - 1;
    }
}
//传入一个flv对象地址,如果是当前存在的flv对象,则清除,用于单一视频窗口刷新
createStream.clearOneFlv = function clearOneFlv(obj) {
    try {
        obj && obj.interValTimer && clearInterval(obj.interValTimer);
        obj.destroy && obj.destroy();
    } catch (error) {
        console.log('err', error)
    }
    var errobjNum = flvArr.indexOf(obj)
    if (errobjNum != -1) {
        flvArr.splice(errobjNum, 1)
    }
    obj = null;
}
//查询当前共有多多少flv对象
createStream.checkObj = function() {
    return flvArr
}

window.createStream = createStream;
})()