java中rtsp转m3u8_vue cli中播放rtmp&flv/m3u8/rtsp ; 在html原生页面中播放m3u8

工程环境:

vue cli3/cli4  
           

plugin: vue-video-player

感谢surmon大神的 vue-video-player , 它是适用于 Vue 的video.js播放器组件

common environment：

安装&引用vue-video-player
           

common ques:

页面多个video(v-for实现), playerOption请使用函数
           

但是没必要computed 不是吗

CLI引入：

打开github 搜索 vue-video-player 如下图

虽然好用 但是文档少 demo简直无情

npm 安装

npm install vue-video-player --save
           

mount with global

import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player'

// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer, /* {
  options: global default options,
  events: global videojs events
} */)
           

mount with component

import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'

export default {
  components: {
    videoPlayer
  }
}
           

1、播放rtmp/flv

播放rtmp/flv需要借助flash，尽管flash马上要被各大浏览器抛弃，但在抛弃之前还是一种不错的解决方案。

在github页面底部有对应的插件地址 如下图

安装 videojs-flash

npm install --save videojs-flash
           

然后在vue单文件中引用

// video-player
import { videoPlayer } from 'vue-video-player'
// rtmp video-flash
import 'videojs-flash'
           

另外浏览器需要允许flash

以chrome为例（浏览器默认禁止flash）

点击红框部分设置允许flash

reload后地址前点击提示，在弹出的框内设置flash为允许,设置好以后再次reload

效果如下图：

途中为页面rtmp与vlc播放对比

下面是示例代码（rtmp测试地址: rtmp://58.200.131.2:1935/livetv/cctv1）

<template>
  <div class="video">
    <div class="con">{{video}}</div>
    <div class="video-wrap">
      <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
    </div>
  </div>
</template>

<script>
// require styles
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
// video-player
import { videoPlayer } from 'vue-video-player'
// rtmp video-flash
import 'videojs-flash'
export default {
  name: 'video-sel',
  data () {
    return {
      video: 'hello video',
      playerOptions: {
        height: '260',
        language: 'en',
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        sources: [{
          type: "rtmp/mp4",
          src: "rtmp://58.200.131.2:1935/livetv/cctv1"
        }],
        techOrder: ['flash'],
        autoplay: false,
        controls: true,
        poster: "../../assets/images/video2.jpg",
        notSupportedMessage: '不支持的视频格式'
      }
    }
  },
  components: {
    videoPlayer
  },
  mounted() {},
  methods: {}
}
</script>

<style  scoped>
.video {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .con {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  .video-wrap {
    width: 500px;
    height: 300px;
  }
}
</style>
           

看到这里的小伙伴，如果你代码都是copy好，npm也安装好了，点击播放后控制台也没有报错，就是没反应，请再次看一下你的浏览器是否允许了flash

如果是

播放flv ,playerOptions.sources[0].type = 'video/x-flv'

2、播放m3u8

要播放m3u8格式需要借助hls插件

在github页面底部有对应的插件地址 如下图

安装 videojs-contrib-hls

npm install --save videojs-contrib-hls
           

然后在vue单文件中引用

//引入hls.js
import 'videojs-contrib-hls'
// video-player
import { videoPlayer } from 'vue-video-player'
           

效果如下图

下面是示例代码 （m3u8测试地址： http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8 ， 如果是用自己的地址 需要

允许跨域

）

<template>
  <div class="video">
    <div class="con">{{video}}</div>
    <div class="video-wrap">
      <video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
    </div>
  </div>
</template>

<script>
// require styles
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
//引入hls.js
import 'videojs-contrib-hls'
// video-player
import { videoPlayer } from 'vue-video-player'
// rtmp
// import 'videojs-flash'

export default {
  name: 'video-sel',
  data () {
    return {
      video: 'hello-video',
      playerOptions: {
        height: '260',
        language: 'en',
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        sources: [{
          type: "application/x-mpegURL",
          withCredentials: false,
          src: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8"
        }],
        techOrder: ['html5'],
        flash: { hls: { withCredentials: false }},
        html5: { hls: { withCredentials: false }},
        autoplay: false,
        controls: true,
        poster: "../../assets/images/video2.jpg",
        notSupportedMessage: '不支持的视频格式'
      }
    }
  },
  components: {
    videoPlayer
  },
  mounted() {},
  methods: {}
}
</script>

<style  scoped>
.video {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .con {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  .video-wrap {
    width: 500px;
    height: 300px;
  }
}
</style>
           

3、前端web直接播放rtsp

限制要求：需要使用vlc插件 ，并且只能在ie/360中播放

rtsp这个就比较讲究了，经过将近一周的度娘+google查询,参考了各种各样 多如繁星的样式终于在vue里实现了rtsp.

网上大部分解决方案都是后台转码， 转成rtmp / hls ，以及 webRTC / websocket方案 都需要后台配合操作。但是后台服务器性能要求较高

vue项目应用踩坑提示:

1、无法给object标签赋值宽高 即使写死到object标签上,在页面上去看dom 依然是width = 0; height = 0 (html原生标签没有问题 ,vue中不可以 原因至今未知，有知道的大佬请留言指教)

<object type='application/x-vlc-plugin;' pluginspage="http://www.videolan.org/" width='500' height='300'>
           

这个最后找到了解决方案

即 在mounted钩子中动态创建 createElement 这里的宽高需要在appendChild之后赋值，

但业务需要多个rtsp 用v-for实现，所以动态创建pass

2、无法动态改变object 下param 的mrl / src , 或者说改变了以后不能播放 等于改变失败

这个用vue方法动态赋值都可以实现，但是浏览器无法播放

查询原因为 浏览器不允许object / embed 动态改变地址

---

解决方案: vue + iframe 原生html页面 + <object> 对象标签

(网上几乎没找到靠谱的方案，下面的方案我在项目中刚刚用到 ，所以转载请注明出处)

v-if灵魂操作，需要时才创建,style position请忽略 是另一个需求

这里的跳转地址尤其注意 不能用/static

这样将需要传递的参数（上图为请求拿到的rtsp地址）

然后iframe页面接收

红框部分灵魂操作，html阻塞效应

=========================手动分割线=======================

HTML原生页面环境

首先度娘 videojs如下

点击get started 可以找到videojs的cdn

然后引入 video.js / hls.js

楼主先上代码片段 然后讲一下遇到的坑

代码片段

遇到的坑

这里楼主遇到2个坑，第一个提示跨域通配符不能为 * , 是因为这个属性 demo里面设置了true

withCredentials: true
           

第二个坑， video的样式问题

这里楼主把demo里的 vjs-custom-skin 这个class 放到了 video的父层 然后加上了demo里面没有的video-player 然后改了一下 css文件的源码 即ok 主要是下面两个地方

然后是最后一个隐藏坑

不想用 cdn 想下载源文件去哪里找呀？ custom-theme.css这个文件没有怎么办？

楼主是这样解决的

找一个空文件夹

然后 git bash

然后先 npm安装videojs 然后去video.js文件夹的dist里面找到如下文件 复制

npm install --save-dev video.js
           

至于custom-theme.css这个文件， 楼主是在 vue-video-player src下找到的 需要先npm安装

npm install vue-video-player --save
           

至此完毕

后期楼主会把元素变成createElement('video') 动态创建与删除， 这里就不赘述了

此外楼主发现一个小bug,即播放m3u8 会不停的发送N多个request,暂时没有找到停止发送的办法，按度娘的删除dom操作依然不可以 。这里期待后期优化