vue中使用video标签播放FLV总结

weixin_45125651

已于 2022-11-15 10:02:38 修改

阅读量3.7k

点赞数

文章标签： vue.js javascript 前端

于 2022-11-14 18:13:54 首次发布

本文链接：https://blog.csdn.net/weixin_45125651/article/details/127852222

版权

博客介绍了如何通过CSS隐藏HTML5 Video的默认控制元素，并展示了如何使用FLV.js进行流媒体播放的控制，包括加载、播放、暂停、全屏等操作。同时，针对播放过程中可能出现的问题，如缓冲、播放速度选择等进行了处理。此外，还提供了错误处理和页面最小化时的预览恢复策略。

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

Audio/Video 标签属性及自定义（进度条、播放、快进、全屏） - SeaJson - 博客园 (cnblogs.com)

//全屏按钮
    video::-webkit-media-controls-fullscreen-button {
        display: none;
    }
    //播放按钮
    video::-webkit-media-controls-play-button {
        display: none;
    }
    //进度条
    video::-webkit-media-controls-timeline {
        display: none;
    }
    //观看的当前时间
    video::-webkit-media-controls-current-time-display{
        display: none;            
    }
    //剩余时间
    video::-webkit-media-controls-time-remaining-display {
        display: none;            
    }
    //音量按钮
    video::-webkit-media-controls-mute-button {
        display: none;            
    }
    video::-webkit-media-controls-toggle-closed-captions-button {
        display: none;            
    }
    //音量的控制条
    video::-webkit-media-controls-volume-slider {
        display: none;            
    }
    //所有控件
    video::-webkit-media-controls-enclosure{ 
        display: none;
    }

常用的一些 video API

"视频播放":video.play();

"视频暂停播放":video.pause();

"视频地址":video.currentSrc;

"视频总时长":video.duration;

"视频播放速率":video.playbackRate;

"是否暂停":video.paused;

"是否结束":video.ended;

"是否静音":video.muted;  

"当前播放时间": video.currentTime;

"当前缓冲量":video.buffered.end(0);

"当前音量":video.volume

自定义播放暂停按钮，使用$refs 去指定元素，绑定监听事件,名字根据实际修改

最后发现video标签在未播放出flv流时有播放速度选项，选择之后流出来居然有影响，果断禁掉

(1条消息) video标签；浏览器溢出功能禁用；三个点中的功能禁用；禁用罕见的功能‘播放速度‘；禁用右键；__套码的汉子的博客-CSDN博客_disablepictureinpicture

标签中加controlslist="nodownload noremoteplayback noplaybackrate"

播放FLV流按钮代码

if(this.player != null){
                this.player.pause();
                this.player.unload();
                this.player.detachMediaElement();
                this.player.destroy();
                this.player = null
            }
            if (flvjs.isSupported()) {
                let video = this.$refs.player;
                if (video) {
                    this.player = flvjs.createPlayer({
                        type: "flv",
                        isLive: true,
                        hasAudio:false,
                        hasVideo:true,
                        url:this.rtsp_url
                    },
                    {
                        enableWorker: false,
                        enableStashBuffer: false, // false 延时低
                        stashInitialSize: undefined,
                        isLive: false,
                    }
                    );
                    this.player.attachMediaElement(video);
                    try {
                        this.player.load();
                        this.player.play();
                    } catch (error) {
                        alert("播放失败")
                        console.log(error);
                    };
                }
            }

在播放中将网页最小化或者出现弹框提示时预览会暂停，所以需要定时检测，将画面跳回来

mounted(){
        this.$refs.player.addEventListener("play",this.handlePlay)
        this.$refs.player.addEventListener("pause",this.handlePause)
        this.timer = setInterval(()=>{
            if(this.player != null){
                if (this.player.buffered.length != 0) {
                    let end = this.player.buffered.end(0);      //获取当前buffered值
                    let diff = end - this.player.currentTime;   //获取buffered与currentTime的差值
                    if (diff >= 0.5) {                          //如果差值大于等于0.5 手动跳帧 这里可根据自身需求来定
                        this.player.currentTime = this.player.buffered.end(0) - 0.2;          //手动跳帧
                    }
                }
            }else{
                this.video_play()
            }
        },10000)
        this.video_play()
    },
    beforeDestroy(){
        clearInterval(this.timer);
        this.timer = null
        if(this.player != null){
            this.player.pause();
            this.player.unload();
            this.player.detachMediaElement();
            this.player.destroy();
            this.player = null
        }
    }

DOMException: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0)

这个错误是因为if (this.player.buffered) 这个判断没写对，将它改成if (this.player.buffered.length != 0) 就行了。

在beforeDestroy()中记得销毁flv和定时器，如果没有销毁会报错。