vue-cli3.0实现播放rtmp直播流

前言：

       用vue来实现播放rtmp,代码很简单，主要用的ckplayer, 在使用过videojs，video等其他插件以后，在播放视频直播流这里，觉得还是ckplayer比较给力，这里说下使用方法

实现效果：

目录：

实现步骤：

一、下载ckplay按照包  入口

二、将下载好的包里面的ckplayer文件夹拿出来，然后放到public里面

三、在public->index.html里面引入文件

四、写一个  ckplayer.vue  组件

1、templayte里面写一个容器

2、data里面定义属性

3、js写方法。prop中将视频地址从外面获取

4、外面调用，将你的rtmp地址传入就可以了

---

实现步骤：

一、下载ckplay按照包  入口

二、将下载好的包里面的ckplayer文件夹拿出来，然后放到public里面

三、在public->index.html里面引入文件

<script src="ckplayer/ckplayer.min.js"></script>

四、写一个  ckplayer.vue  组件

1、templayte里面写一个容器

2、data里面定义属性

3、js写方法。prop中将视频地址从外面获取

<template>
  <div class="video" id="video_one" style="width: 100%;height:100%"></div>
</template>
<script>
  export default {
    name: '',
    components: {},
    props: {
      sourceUrl: {
        type: String,
        default: ''
      },
    },
    data () {
      return {
        video: {
          one: {
            container: '#video_one', //容器的ID或className
            variable: 'player',//播放函数名称
            autoplay: true,
            live: true,
            video: 'rtmp://58.200.131.2:1935/livetv/hunantv',//视频地址-rtmp的地址就可以
          },
        },

      }
    },
    computed: {},
    watch: {
      sourceUrl: {
        handler (val) {
          this.video.one.video = val;
          this.getOneVideo();
        }
      }
    },
    mounted () {
      this.getOneVideo();

    },
    created () {
    },
    methods: {
      getOneVideo () {
        let player = new ckplayer(this.video.one);

      },
    }
  }
</script>

<style lang="less" scoped>
  .ali-player{
    width: 100%;
    .main {
      box-sizing: border-box;
      color: #FFFFFF;
      .video-center {
        position: relative;
        .name{
          position: absolute;
          left: 50%;
          top: -20px;
          font-size: 18px;
          -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
        }
        .tips{
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          z-index: 9999;
          opacity: 0.79;
        }
      }
    }
    #video {
      width: 100%;
      height: 500px !important;
      opacity: 0.79;
    }
  }
</style>

4、外面调用，将你的rtmp地址传入就可以了

<ckPlayer  :sourceUrl="sourceUrl"></ckPlayer>