vue2.x - 9.vue实现视频播放 - 《前端学习笔记》

一.方法一:使用vue-video-player(5.0.2)
二.方法二,自己封装组件
- 用来测试的流

一.方法一:使用vue-video-player(5.0.2)

最近我的项目做了一个监控视屏的显示，后台提供的视屏格式是rtmp
后来又改为m3u8，没成功，原因是占用内存过大，所以取消了这种方式

一、安装

npm i vue-video-player -S
npm i videojs-flash -S  播放rtmp
npm i videojs-contrib-hls -S  播放m3u8

全局引入 main.js

import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' //videoJs的样式
// import 'vue-video-player/src/custom-theme.css' //vue-video-player的样式
import 'videojs-flash'; //引入才能播放rtmp视屏
// import 'videojs-contrib-hls' //引入才能播放m3u8文件
Vue.use(VideoPlayer)

在页面中使用

<video-player  class="video-player vjs-custom-skin"
ref="videoPlayer" 
:playsinline="true" 
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
></video-player>

//完整的配置数据（不要的可以直接注释掉）
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: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    sources: [{
      type: "application/x-mpegURL",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
      src: "" //url地址
    }],
    // hls:true, //如果是播放m3u8必须加（需注释掉techOrder,不然会有报错）
    techOrder: ['flash'], //播放rtmp必须加
    poster: "", //你的封面地址
    notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true  //全屏按钮
    }
  }
}
}

遇到的问题

1、设置了autoplay: true 不能自动播放，原因是我这里播放视频的窗口小于了400x400
2、如何使用外部按钮点击全屏

//点击全屏播放
handleFullScreen(index){
  const player = this.$refs.videoPlayer.player;
  player.requestFullscreen();//调用全屏api方法
  player.isFullscreen(true)
  player.play()
}

二.方法二,自己封装组件

安装依赖
```
yarn add hls.js
```
创建子组件 ```javascript


- 父组件中使用
```html
<template>
    <div class="main">
        <Wvideo ref="video" :videoSrc="videoUrl"></Wvideo>
   </div>  
</template>
<script>
import Wvideo from '@/components/Video';
  export default {
  components: {
    Wvideo,
  },
  data() {
    return {
      lodingShow: true, //是否显示loading?
      loadingMsg: '加载中',
      hls: null, //直播流
    };
  },
  methods: {
    getCameraHls(val) {
      api.getCameraHls({ devid: val }).then(res => {
        console.log('设备号', val, '直播地址', res);
        if (res.indexOf('失败') !== -1) {
          this.$message.error('实景地址获取失败,请检查网络或设备');
          this.lodingShow = false;
        } else {
          this.stationRealPopups = true;
          this.videoUrl = res;
          this.lodingShow = false;
          this.$nextTick(() => {
            this.$refs.video.initVideo();//调用子组件的关闭播放事件
          });
        }
      });
    },
    // 实景显示
    handleRealShow(iemi) {
      this.lodingShow = true;
      this.loadingMsg = '正在请求摄像头地址';
      this.getCameraHls(iemi);
    },
    realPopupsClose() {
      this.stationRealPopups = false;
      this.videoUrl = '';
      this.$refs.video.stopVideo();
    },
  },
  //离开当前页面
  beforeRouteLeave(to, from, next) {
        this.$refs.video.stopVideo();//停止播放,不写这一步,m3u8就会一直请求
  },
};
</script>

用来测试的流

香港财经：rtmp://202.69.69.180:443/webcast/bshdlive-pc
芒果TV：rtmp://58.200.131.2:1935/livetv/hunantv
韩国GoodTV：rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp
http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8