实时播放监控视频

最新推荐文章于 2024-05-07 16:56:59 发布

世林_不调皮了

最新推荐文章于 2024-05-07 16:56:59 发布

阅读量237

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_55891422/article/details/130932371

版权

这段代码展示了如何在苹果系统中利用video.js、HLS.js和flvjs库来播放m3u8格式的监控视频。当url为ws/wss协议时，使用JSPlugin播放；如果是m3u8格式，会根据浏览器支持情况选择HLS.js或直接使用原生播放器；对于其他情况，尝试使用flvjs进行播放。另外，包含了播放失败的处理和视频关闭的逻辑。

摘要由CSDN通过智能技术生成

代码：其中包含苹果系统使用video.js播放m3u8格式的监控视频

 showVideo() {
            if (this.monitorDetail.url.indexOf("ws://") !== -1 || this.monitorDetail.url.indexOf("wss://") !== -1) {
                this.isShowVideo = true
                this.isLoading = true
                $("#my-player").hide()
                this.player = new window.JSPlugin({
                    szId: 'my-player1', //节点id
                    szBasePath: '/static/h5player', //插件路径
                    openDebug: false,
                })
                let playURL =
                    this.monitorDetail.url
                this.player.JS_Play(playURL, {
                    playURL,
                    mode: 0 // 1为高级模式，0为普通模式
                }, 0).then(() => {
                    // 播放成功
                    this.isLoading = false
                }, e => {
                    // 播放失败
                    this.$message({
                        message: '播放失败',
                        type: 'error',
                        duration: 3000
                    });
                })
            } else if (this.monitorDetail.url.indexOf(".m3u8") !== -1) {
                this.isShowVideo = true
                this.isLoading = true
                this.player = document.getElementById("my-player");
                if (Hls.isSupported()) {
                    this.hls = new Hls();
                    this.hls.loadSource(this.monitorDetail.url);
                    this.hls.attachMedia(this.player);
                    this.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                        this.player.play();
                        this.isLoading = false
                    });
                } else if (this.player.canPlayType("application/vnd.apple.mpegurl")) {
                    this.player.src = this.monitorDetail.url;
                    this.player.addEventListener("loadedmetadata", function () {
                        this.player.play();
                        this.isLoading = false
                    });
                }
                return;
                this.isShowVideo = true
                this.isLoading = true
                var videoObject = {
                    container: '#my-player1', //容器的ID或className
                    live: true, //指定为直播
                    autoplay: true,
                    volume: 0.001,
                    type: "hls",
                    mouseWheelVolume: 0,
                    keyVolume: 0,
                    playbackrateList: [1],
                    plug: 'hls.js', //设置使用hls插件
                    video: this.monitorDetail.url //视频地址
                }
                this.player = new ckplayer(videoObject);
                this.player.play(() => {
                    this.isLoading = false
                })
                this.player.error(() => {
                    this.$message({
                        message: '播放失败',
                        type: 'error',
                        duration: 3000
                    });
                    this.closeVodeo()
                })
            } else {
                if (flvjs.isSupported()) {
                    this.isShowVideo = true
                    this.isLoading = true
                    $('.ub-showVideo').show()
                    this.showDetail = false
                    let videoElement = document.getElementById('my-player');
                    this.player = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        url: this.monitorDetail.url, //<==自行修改
                    }, {
                        enableWorker: false, //不启用分离线程
                        enableStashBuffer: false, //关闭IO隐藏缓冲区
                        reuseRedirectedURL: true, //重用301/302重定向url，用于随后的请求，如查找、重新连接等。
                        autoCleanupSourceBuffer: true //自动清除缓存
                    });
                    this.player.attachMediaElement(videoElement);
                    this.player.load(); //加载
                    setTimeout(() => {
                        document.getElementById('my-player').onplay = () => {
                            this.isLoading = false
                        };
                    }, 300)
                } else {
                    alert("ios暂不支持此格式视频播放")
                    this.showDetail = false
                }
            }


        },
        // 关闭监控
        closeVodeo() {
            this.isShowVideo = false
            if (this.monitorDetail.url.indexOf("ws://") !== -1 || this.monitorDetail.url.indexOf("wss://") !== -1) {
                this.player.JS_Stop()
            } else if (this.monitorDetail.url.indexOf(".m3u8") !== -1) {


                $('#video1').children('#my-player').remove()
                $('#video1').append('<video id="my-player" style="width: 100%;" preload="auto" muted autoplay controls style="border: 1px solid red;">< source src = "" ></video>')
                // this.player = null
                this.hls.destroy();
                // this.player.destroy();
            } else {
                this.player.destroy()
            }
            $('.ub-showVideo').hide()
        },