Vue 配置vue-video-player

亦凉 2023-08-17 16:18 94阅读 0赞

> 配置vue-video-player，实现视频流。只需 npm i vue-video-player 即可。亲测一定要使用 npm 安装，其他安装包引入不全，无法正常使用

//package.json
    { 
      "name": "v3demo",
      "version": "0.1.0",
      "private": true,
      "scripts": { 
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },
      "dependencies": { 
        "axios": "^0.19.0",
        "core-js": "2.6.9",
        "echarts": "^4.3.0",
        "element-ui": "^2.12.0",
        "qrcode": "^1.4.1",
        "three": "^0.108.0",
        "vue": "^2.6.10",
        "vue-baidu-map": "^0.21.22",
        "vue-clipboard2": "^0.3.1",
        "vue-lazyload": "^1.3.3",
        "vue-router": "^3.0.3",
        "vue-video-player": "^5.0.2",
        "vuex": "^3.0.1"
      },
      "devDependencies": { 
        "@vue/cli-plugin-babel": "^3.11.0",
        "@vue/cli-plugin-eslint": "^3.11.0",
        "@vue/cli-service": "^3.11.0",
        "babel-eslint": "^10.0.1",
        "babel-plugin-component": "^1.1.1",
        "eslint": "^5.16.0",
        "eslint-plugin-vue": "^5.0.0",
        "vue-template-compiler": "^2.6.10"
      }
    }

//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"
    import "videojs-contrib-hls"

<template>
      <div id="">
        
        <video-player
                class="video-player-box video-player vjs-custom-skin"
                ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions"
        ></video-player>
      </div>
    </template>
    
    <script>
      export default { 
        name: 'MyVideoPlayer',
        data() { 
          return { 
            // videojs options
            playerOptions: { 
              language: 'en', //zh-CN 中文
              muted: true, //默认情况下将会消除任何音频
              autoplay: false, //如果true,浏览器准备好时开始回放
              loop: false, //视频一结束就重新开始
              playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
              preload: 'auto', //建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持)
              // aspectRatio: '16:9', //将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
              fluid: false, //当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器
              // techOrder: ['flash', 'html5'], // 兼容顺序
              // flash: {hls: {withCredentials: false}},
              // html5: {hls: {withCredentials: false}},
              sources: [{ 
                type: "video/mp4", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目 视频流-'rtmp/flv'
                src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm" //url地址
              }],
              // sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换
              // type: 'rtmp/hls',
              // src: 'rtmp://192.168.1.199:10935/hls/stream_1'
              // }, { 
              // withCredentials: false,
              // type: 'application/x-mpegURL',
              // src: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
              // }],
              poster: "/static/images/author.jpg", //初始化封面图片
              width: 400, //document.documentElement.clientWidth 播放器宽度
              height: 400, //document.documentElement.clientHeight 播放器高度
              notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息
              controlBar: { 
                timeDivider: true,
                durationDisplay: true,
                remainingTimeDisplay: false,
                fullscreenToggle: true,  //全屏按钮
                currentTimeDisplay: false, // 当前时间
                volumeControl: false, // 声音控制键
                playToggle: false, // 暂停和播放键
                progressControl: true, // 进度条
              }
            }
          }
        },
        mounted() { 
          console.log('this is current player instance object', this.player)
        },
        computed: { 
          player() { 
            return this.$refs.videoPlayer.player
          }
        },
        methods: { }
      }
    </script>
    
    <style scoped>
      /* 调整播放器样式 */
      /*.video-player-box >>> #vjs_video_3 {*/
      /* display: flex !important;*/
      /* justify-content: center !important;*/
      /* align-items: center !important;*/
      /*}*/
    
      /*.video-player-box >>> .video-js .vjs-big-play-button {*/
      /* position: relative !important;*/
      /* top: 0 !important;*/
      /* left: 0 !important;*/
      /*}*/
    </style>

<template>
      <div id="">
        
        <video-player
                ref="videoPlayer"
                class="vjs-custom-skin"
                :options="playerOptions"
                @ready="playerReadied">
        </video-player>
      </div>
    </template>
    
    <script>
      export default { 
        name: 'MyVideoPlayerHLS',
        data() { 
          return { 
            playerOptions: { 
              // videojs and plugin options
              height: '360',
              sources: [{ 
                withCredentials: false,
                type: "application/x-mpegURL",
                src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
              }],
              controlBar: { 
                timeDivider: false,
                durationDisplay: false
              },
              flash: {  hls: {  withCredentials: false }},
              html5: {  hls: {  withCredentials: false }},
              poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg"
            }
          }
        },
        mounted() { 
          console.log('this is current player instance object', this.player)
        },
        computed: { 
          player() { 
            return this.$refs.videoPlayer.player
          }
        },
        methods: { 
          playerReadied(player) { 
            var hls = player.tech({  IWillNotUseThisInPlugins: true }).hls
            player.tech_.hls.xhr.beforeRequest = function(options) { 
              // console.log(options)
              return options
            }
          }
        }
      }
    </script>
    
    <style scoped>
    </style>

<template>
      <div id="">
        
        <video-player
                class="vjs-custom-skin"
                :options="playerOptions">
        </video-player>
      </div>
    </template>
    
    <script>
      export default { 
        name: 'MyVideoPlayerRTMP',
        data() { 
          return { 
            playerOptions: { 
              height: '360',
              sources: [{ 
                type: 'rtmp/hls',
                src: 'rtmp://58.200.131.2:1935/livetv/hunantv'
              }],
              techOrder: ['flash'],
              autoplay: false,
              controls: true,
              poster: "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-9.jpg"
            }
          }
        }
      }
    </script>
    
    <style scoped>
    </style>

使用时，只要修改 sources 数据源和类型即可