前端播放rtmp和hls视频流（vue-video-player）

前端是不支持直接播放视频流的。想要实现直播可以安装flash插件。推荐使用videojs，这里用vue做示范
首先安装建议使用npm
npm i vue-video-player --save
因为rtmp需要flash
所以npm i videojs-flash
在需要的组件中引入

  import 'video.js/dist/video-js.css'
  import 'videojs-flash'
  import { videoPlayer } from 'vue-video-player'

组件使用

  <video-player  class="video-player-box"
                             ref="videoPlayer"
                             :options="playerOptions"
                             :playsinline="true"
                             customEventName="customstatechangedeventname"
                            >
              </video-player>
export default{
    data:function () {
        return{
          title:'',
          size:'',
          name:[1],
          videoShow:false,
          playerOptions: {
            // videojs options
           muted: true,
            language: 'en',
            playbackRates: [0.7, 1.0, 1.5, 2.0],
            techOrder: ['flash', 'html5'],//设置顺序，
            sourceOrder: true,
            flash: { hls: { withCredentials: false } },
            html5: { hls: { withCredentials: false } },
            sources: [
              {
                type: 'rtmp/flv',
                src: "rtmp://58.200.131.2:1935/livetv/hunantv"
              },
              {
                withCredentials: false,
                type: 'application/x-mpegURL',
                src: 'http://xxxx',//这是hls流
              },
              ],
            width:'280px',
            height:'120px',
            autoplay:true
          },
        }
    },
  components: {
    videoPlayer//注册组件
  },
  }

以上设置了两个地址，它会按照你设定的顺序进行选择播放，当第一个地址失效时，会自动切换到下一个地址