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

╰半夏微凉° 2022-12-31 12:24 183阅读 0赞

> vue项目中应用vue-video-player与videojs-flash实现RTMP流播放

## 所需插件 ##

*  `npm install vue-video-player --save`
 *  `npm install videojs-flash --save`

### 安装swf ###

*  `npm install --save videojs-swf`
 *  `"videojs-swf": "^5.4.2",`

## 版本 ##

*  `"videojs-flash": "^2.2.1",`
 *  `"vue-video-player": "^5.0.2"`

## 全局使用 ##

main.js

import VueVideoPlayer from 'vue-video-player'
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    import 'videojs-flash'
    Vue.use(VueVideoPlayer);

## 组件中使用 ##

// 组件中使用
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    import {  videoPlayer } from 'vue-video-player'
    import 'videojs-flash'
    
    import SWF_URL from "videojs-swf/dist/video-js.swf";
    
    component: { 
       videoPlayer 
    }

## 完整代码 ##

<template>
        <div class="video_player_wrapper">
            <video-player
                class="video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions" />
        </div>
    </template>
    
    <script>
    // 组件中使用
    import 'video.js/dist/video-js.css'
    import 'vue-video-player/src/custom-theme.css'
    import {  videoPlayer } from 'vue-video-player'
    import 'videojs-flash'
    export default { 
        components: { 
            videoPlayer
        },
        data () { 
            return { 
                playerOptions: { 
                    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{ 
                        type: "rtmp/mp4",// 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                        src: "rtmp://58.200.131.2:1935/livetv/hunantv" // url地址
                    }],
                    techOrder: ['flash'],
                    flash: { 
                        hls: {  withCredentials: false },
                        swf: SWF_URL // 引入静态文件swf
                    },
                    poster: "https://p1.music.126.net/5zs7IvmLv7KahY3BFzUmrg==/109951163635241613.jpg?param=600y500", // 你的封面地址
                    notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    controlBar: { 
                        timeDivider: false, // 时间分割线
                        durationDisplay: false, // 总时间
                        remainingTimeDisplay: false,
                        currentTimeDisplay: false, // 当前时间
                        volumeControl: false, // 声音控制键
                        progressControl: false, // 进度条
                        playToggle: true, // 暂停和播放键
                        customControlSpacer: false, // 未知,
                        fullscreenToggle: true, // 全屏按钮
                    }
                }
            }
        },
    }
    </script>
    
    <style>
    .video_player_wrapper { 
        width: 800px;
        box-shadow: 0 0 1px 1px #eee;
    }
    </style>

## 播放效果 ##

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

## 注意事项 ##

1.  需要用npm安装，防止其他报错
2.  不需要安装video.js
3.  vue.config.js作如下配置

/*
     * @Author: your name
     * 需要配置loder加载器，否则会报错不识别swf格式文件，提示需要配置合适的加载器loader
     */
    module.exports = {
        chainWebpack: config => {
            config.module
                .rule('swf')
                .test(/\.swf$/)
                .use('url-loader')
                .loader('url-loader')
                .options({
                    limit: 10000
                })
        }
    }

## github-demo ##

*  [vue-video-player-demo][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20221120/da6f334f1a69448e87ca5c4ba5716b98.png
[vue-video-player-demo]: https://github.com/237005722/vue-video-player-demo/