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操作依然不可以 。這裡期待後期優化