課前準備：直播流協議https://www.cnblogs.com/yangchin9/p/14930874.html

摘要：在H5頁面實現觀看直播+視訊回放；在開發期間使用過video.js、mui-player等外掛，發現這些video外掛對移動端的相容性都不友好，最後發現一個在移動端相容不錯的外掛——vue-video-player

場景：

移動端H5頁面，專案是vue搭建的，使用的是HLS協議以m3u8結尾的直播流

一、安裝vue-video-player

播放HLS視訊流需要安裝 videojs-contrib-hls外掛，播放RTMP視訊流則安裝 videojs-flash外掛，hls外掛與flash外掛同時使用時flash外掛需要在hls外掛之前引入；（資料上講安裝vue-video-player時會自動安裝hls外掛，實際操作中並沒有，還是自己手動安裝吧！）

安裝方式1:

CDN方式，直接在html檔案頭部引入檔案:
　　<link rel="stylesheet" href="path/to/video.js/dist/video-js.css"/>
　　<script type="text/javascript" src="path/to/video.min.js"></script>
　　<script type="text/javascript" src="path/to/vue.min.js"></script>
　　<script type="text/javascript" src="path/to/dist/vue-video-player.js">
　　</script>
　　　　<script type="text/javascript"> Vue.use(window.VueVideoPlayer)
　　</script>
 

安裝方式2:

NMP安裝外掛:
　　npm install vue-video-player --save
    npm install videojs-contrib-hls --save

main.js中引入基礎樣式檔案:
// 引入videoPlayer樣式
import 'video.js/dist/video-js.css'
    

按需引入：
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'

components: {
    videoPlayer
},    
 
全域性引入:
import Vue from 'vue'
import VueVideoPlayer from 'vue-video-player' 
// 自定義樣式引入，在<video-player>新增對應類名，例如video-player-custom
// import 'vue-video-player/src/custom-theme.css'
 

Vue.use(VueVideoPlayer, /* { 
　 options: 全域性預設配置,
   events: 全域性videojs事件
}*/)

二、使用 vue-video-player

<template>
  <!-- playsinline：設定播放器在移動裝置上不全屏[ Boolean, default: false ] -->
  <!-- customEventName：自定義狀態變更時的事件名[ String, default: 'statechanged' ] -->
    <video-player
　　　　class="video-player-custom"
        ref="videoPlayer"
        :options="playerOptions"
        :playsinline="true"
        customEventName="customstatechangedeventname"
        @play="onPlayerPlay"
        @pause="onPlayerPause"
        @ended="onPlayerEnded"
        @ready="playerReadied"
        @statechanged="playerStateChanged"
        @playing="onPlayerPlaying"
        @waiting="onPlayerWaiting"
        @loadeddata="onPlayerLoadeddata"
        @timeupdate="timeupdate"
        @canplay="onPlayerCanplay"
        @canplaythrough="onPlayerCanplaythrough">
    </video-player>
</template>
<script>
import 'videojs-contrib-hls'
import { videoPlayer } from 'vue-video-player'
export default {
  　components: {
        videoPlayer
    },
　　data() { 
　　　　return {
 　　　　　　playerOptions: { 
　　　　　　　　　// 是否靜音
                  muted: true,
                  // 預設為英語，設定為中文
                  language: 'zh-CN',
                  // 播放速度，指定後Video.js將顯示一個控制元件(vjs-playback-rate類的控制元件)，允許使用者選擇播放速度
                  playbackRates: [0.5, 1.0, 1.5, 2.0],
                  // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值，表示長寬比例
                  aspectRatio: '4:3',
         　　　　 // 相容順序，預設值是['html5']，其他已註冊的技術將按其註冊的順序在該技術之後新增。
                  techOrder: ['html5'],
                  // 等同於原生<video>標籤中的一組<source>子標籤，可實現優雅降級；type 屬性規定媒體資源的 MIME 型別
                  sources: [
                        //{
                    	　　//type: "video/mp4",
                    	　　//src: ""
                  	//},
                        //{
                    	　　//type: "rtmp/flv",
                    	　　//src: ""
                  	//},
                   	{
                     	　　type: "application/x-mpegURL",
                     	　　src: "https://live.cgtn.com/1000/prog_index.m3u8"
                   	},
                   ],
                  // 視訊封面
                  poster: require('./icon/cover.jpg'),　
　　　　　　 }
　　　　}
　　},
　　computed: { 
    	//外掛節點 用於新增自定義按鈕事件
　　　　player() { 
　　　　　　return this.$refs.videoPlayer.player 
　　　　}
　　},
    mounted() {},
    methods: {
        // 播放回調
        onPlayerPlay(player) {
        },
        // 暫停回撥
        onPlayerPause(player) {
          //console.log(player)
        },
        // 視訊播放結束回撥
        onPlayerEnded(player) {
          //console.log(player)
        },
        // DOM元素上的readyState更改導致播放停止
        onPlayerWaiting(player) {
          //console.log(player)
        },
        // 已開始播放回調
        onPlayerPlaying(player) {
          //console.log(player)
        },
        // 當播放器在當前播放位置下載資料時觸發
        onPlayerLoadeddata($event) {
          //console.log($event)
        },
        // 當前播放位置發生變化時觸發。
        onPlayerTimeupdate($event) {
          //console.log($event)
        },
        //媒體的readyState為HAVE_FUTURE_DATA或更高
        onPlayerCanplay($event) {
          //console.log($event)
        },
        //媒體的readyState為HAVE_ENOUGH_DATA或更高。這意味著可以在不緩衝的情況下播放整個媒體檔案。
        onPlayerCanplaythrough($event) {
          //console.log($event)
        },
        //播放狀態改變回調
        playerStateChanged($event) {
          //console.log($event)
        },
        //將偵聽器繫結到元件的就緒狀態。與事件監聽器的不同之處在於，如果ready事件已經發生，它將立即觸發該函式。。
        playerReadied($event) {
          //console.log($event)
        },
    }
}
</script>
<style lang="scss" scoped>
.video-player-custom{
    width: 100%;
    height: 180px;
    // vidoeUI重寫
    /deep/ .video-js{
        width: 100%;
        height: 100%;
        padding: 0;
        overflow: hidden;
        // 播放器 
        .vjs-tech{
        　　object-fit: cover;
        }
        // 播放按鈕
        .vjs-big-play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2em;
            height: 2em;
            margin-top: -1em;
            margin-left: -1em;
            font-size: 2em;
            line-height: 2em;
            border-radius: 50%;
            background-color: rgba(0,0,0,0.45);
            outline: none;
        }
        // 封面
        .vjs-poster{
            width: 100%;
            height: 100%;
            background-size: cover;
        }
    }
}  
</style>