Web浏览器基于Flash实时播放监控视频（一）

爱被打了一巴掌 2022-12-31 12:19 396阅读 0赞

## 安装插件 ##

### 插件安装 ###

*  npm install video.js --save
 *  cnpm install --save videojs-flash
 *  cnpm install --save videojs-swf
 *  cnpm install --save vue-video-player // 使用video.js播放不安装这个

### 插件对应版本 ###

*  “video.js”: “^7.10.2”,
 *  “videojs-flash”: “^2.2.1”,
 *  “videojs-swf”: “^5.4.2”,
 *  “vue-video-player”: “^5.0.2” // 不需要安装

### 注意事项 ###

#### swf报错loader加载器问题 ####

/* * 需要配置loder加载器，否则会报错不识别swf格式文件，提示需要配置合适的加载器loader，在项目的vue.config.js中作如下配置： */
    module.exports = { 
        chainWebpack: config => { 
            config.module
                .rule('swf')
                .test(/\.swf$/)
                .use('url-loader')
                .loader('url-loader')
                .options({ 
                    limit: 10000
                })
        }
    }

#### 报错问题 ####

*  安装vue-video-player插件一定要用npm安装，不可使用cnpm安装，否则报如下错误，或降低版本问题处理

> The flash tech is undefined Skipped browser support check for that tech

#### 代码 ####

<template>
        <div>
            <video class="video_js" id="video-js" :width="videoWidth" :height="videoHeight">
                <source src="rtmp://58.200.131.2:1935/livetv/hunantv" type="rtmp/mp4">
            </video>
        </div>
    </template>
    
    <script>
    import videojs from 'video.js'
    import 'video.js/dist/video-js.css'
    import 'videojs-flash'
    // import SWF_URL from './assets/video-js.swf'
    import SWF_URL from "videojs-swf/dist/video-js.swf";
    videojs.options.flash.swf = SWF_URL // 设置flash路径，Video.js会在不支持html5的浏览中使用flash播放视频文件
    
    
    export default { 
        props: { 
            videoHeight: { 
                type: Number,
                default: () => 500
            },
            videoWidth: { 
                type: Number,
                default: () => 700
            }
        },
        data () { 
            return { 
                videoPlay: '', // 视频监控的实例
                options: { 
                    live: true,
                    // poster: require('@/assets/logo.png'), // 未播放时的封面
                    poster: 'https://photo.mac69.com/180205/18020526/a9yPQozt0g.jpg',
                    autoplay: true, // 是否自动播放
                    muted: false, // 是否静音
                    fluid: false, // 宽高自适应
                    loop: false, // 是否循环播放
                    preload: 'auto', // 预加载
                    techOrder: ["flash", "html5"], // 定义Video.js技术首选的顺序。这意味着Html5首选技术
                    language: "zh-CN", // 初始化语言
                    // aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    // fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    width: this.videoWidth + 'px',
                    height: this.videoHeight + 'px',
                    controls: false, // 是否显示控制栏
                    controlBar: { 
                        timeDivider: false, // 时间分割线
                        durationDisplay: false, // 总时间
                        remainingTimeDisplay: false,
                        currentTimeDisplay: false, // 当前时间
                        volumeControl: false, // 声音控制键
                        progressControl: false, // 进度条
                        playToggle: false, // 暂停和播放键
                        customControlSpacer: false, // 未知,
                        fullscreenToggle: true, // 全屏
                    },
                }
            }
        },
        mounted () { 
            // 初始化
            this.videoPlay = videojs('video-js', this.options, () => { 
                
                // 监听播放
                // this.videoPlay.one('playing', () => { 
                // console.log('监听播放');
                // })
    
                // 准备开始播放
                // this.videoPlay.one('play', () => { 
                // console.log('准备开始播放');
                // })
    
                // 暂停播放
                // this.videoPlay.on('pause', () => { 
                // console.log('暂停播放');
                // })
    
                // 结束播放
                // this.videoPlay.on('ended', () => { 
                // console.log('结束播放');
                // })
    
                // events 绑定事件用on 移除事件用off
                // this.videoPlay.on('loadstart', () => { 
                // console.log('开始加载');
                // })
    
                // this.videoPlay.on('loadedmetadata', () => { 
                // console.log('视频源数据加载完成');
                // })
    
                // this.videoPlay.on('loadeddata', () => { 
                // console.log('渲染播放画面');
                // })
    
                // this.videoPlay.on('progress', () => { 
                // console.log('加载过程');
                // })
            });
        },
        beforeDestroy () { 
            // 切换页面时需要停止播放处理报错问题
            this.videoPlay.dispose();
        },
    }
    </script>
    
    <style scoped lang="less">
    .video_js { 
        box-shadow: 0 0 1px 1px #000;
        padding: 20px;
        position: relative;
    
        /deep/ .vjs-text-track-display { 
            border: 1px solid blue;
            width: 100%;
            height: 100%;
        } 
    }
    </style>

#### 效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221120/a0b8a7c130654e2da1af2acbf25da211.png