本文鏈接:【Vue】插件:八炫狱、結(jié)合 vue-video-player藻懒、videojs-flash、videojs-contrib-hls使用videojs播放視頻
相關文檔:【JS&JQuery】videojs插件使用
相關文檔:【Nuxt】四视译、VueX使用教程

1. 安裝vue-video-player

官方安裝及使用文檔：https://www.npmjs.com/package/vue-video-player

1.1. 安裝vue-video-player

npm install vue-video-player --save

1.2. 安裝videojs-flash

npm install videojs-flash --save

1.3. 安裝videojs-contrib-hls

npm install --save videojs-contrib-hls

2. vue.config.js中添加chainWebpack支持swf

chainWebpack: config => {
        config.module
            .rule('swf')
            .test(/\.swf$/)
            .use('url-loader')
            .loader('url-loader')
            .options({
                limit: 10000
            });
    },

3. 全局引用并使用中文語言包

在src>plugins中新建video.js文件,內(nèi)容如下

3.1. video.js

import Vue from 'vue';

import VueVideoPlayer from 'vue-video-player';
import 'vue-video-player/src/custom-theme.css';
import hls from 'videojs-contrib-hls';//此處用const會報錯

import Video from 'video.js';
import 'video.js/dist/video-js.css';

// import 'video.js/dist/lang/zh-CN.js';// vue中直接引用會報錯
// import 'video.js/dist/lang/zh-CN.json';// 本文使用的videojs版本中dist無此文件,根據(jù)video.js/dist/lang/zh-CN.js新建了下面video-zh-CN.json文件
import zhCN from './video-zh-CN.json';

import 'videojs-flash';

import SWF_URL from 'videojs-swf/dist/video-js.swf';//此處用const會報錯

Video.options.flash.swf = SWF_URL; // 設置flash路徑嬉荆，Video.js會在不支持html5的瀏覽中使用flash播放視頻文件
Video.addLanguage('zh-CN', zhCN);// 添加中文支持
Vue.use(hls);
Vue.use(VueVideoPlayer);

3.2. video-zh-CN.json

{
    "Play": "播放", 
    "Pause": "暫停", 
    "Current Time": "當前時間", 
    "Duration": "時長", 
    "Remaining Time": "剩余時間", 
    "Stream Type": "媒體流類型", 
    "LIVE": "直播", 
    "Loaded": "加載完畢", 
    "Progress": "進度", 
    "Fullscreen": "全屏", 
    "Non-Fullscreen": "退出全屏", 
    "Mute": "靜音", 
    "Unmute": "取消靜音", 
    "Playback Rate": "播放速度", 
    "Subtitles": "字幕", 
    "subtitles off": "關閉字幕", 
    "Captions": "內(nèi)嵌字幕", 
    "captions off": "關閉內(nèi)嵌字幕", 
    "Chapters": "節(jié)目段落", 
    "Close Modal Dialog": "關閉彈窗", 
    "Descriptions": "描述", 
    "descriptions off": "關閉描述", 
    "Audio Track": "音軌", 
    "You aborted the media playback": "視頻播放被終止", 
    "A network error caused the media download to fail part-way.": "網(wǎng)絡錯誤導致視頻下載中途失敗。", 
    "The media could not be loaded, either because the server or network failed or because the format is not supported.": "視頻因格式不支持或者服務器或網(wǎng)絡的問題無法加載憎亚。", 
    "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于視頻文件損壞或是該視頻使用了你的瀏覽器不支持的功能员寇，播放終止弄慰。", 
    "No compatible source was found for this media.": "無法找到此視頻兼容的源。", 
    "The media is encrypted and we do not have the keys to decrypt it.": "視頻已加密蝶锋，無法解密陆爽。", 
    "Play Video": "播放視頻", 
    "Close": "關閉", 
    "Modal Window": "彈窗", 
    "This is a modal window": "這是一個彈窗", 
    "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按鍵或啟用關閉按鈕來關閉此彈窗。", 
    ", opens captions settings dialog": ", 開啟標題設置彈窗", 
    ", opens subtitles settings dialog": ", 開啟字幕設置彈窗", 
    ", opens descriptions settings dialog": ", 開啟描述設置彈窗", 
    ", selected": ", 選擇", 
    "captions settings": "字幕設定", 
    "Audio Player": "音頻播放器", 
    "Video Player": "視頻播放器", 
    "Replay": "重播", 
    "Progress Bar": "進度小節(jié)", 
    "Volume Level": "音量", 
    "subtitles settings": "字幕設定", 
    "descriptions settings": "描述設定", 
    "Text": "文字", 
    "White": "白", 
    "Black": "黑", 
    "Red": "紅", 
    "Green": "綠", 
    "Blue": "藍", 
    "Yellow": "黃", 
    "Magenta": "紫紅", 
    "Cyan": "青", 
    "Background": "背景", 
    "Window": "視窗", 
    "Transparent": "透明", 
    "Semi-Transparent": "半透明", 
    "Opaque": "不透明", 
    "Font Size": "字體尺寸", 
    "Text Edge Style": "字體邊緣樣式", 
    "None": "無", 
    "Raised": "浮雕", 
    "Depressed": "壓低", 
    "Uniform": "均勻", 
    "Dropshadow": "下陰影", 
    "Font Family": "字體庫", 
    "Proportional Sans-Serif": "比例無細體", 
    "Monospace Sans-Serif": "單間隔無細體", 
    "Proportional Serif": "比例細體", 
    "Monospace Serif": "單間隔細體", 
    "Casual": "舒適", 
    "Script": "手寫體", 
    "Small Caps": "小型大寫字體", 
    "Reset": "重啟", 
    "restore all settings to the default values": "恢復全部設定至預設值", 
    "Done": "完成", 
    "Caption Settings Dialog": "字幕設定視窗", 
    "Beginning of dialog window. Escape will cancel and close the window.": "開始對話視窗扳缕。離開會取消及關閉視窗", 
    "End of dialog window.": "結(jié)束對話視窗"
}

4. 在main.js中引入video.js文件

import './plugins/video';// 引入視頻播放插件

5. 單頁面中使用

如果沒有需求,像 @ready="playerReadied"這些子傳父的方法可以不寫

<video-player
  class="vjs-custom-skin video-player"
  ref="videoPlayer"
  :options="playerOptions"
  :playsinline="true"
  customEventName="customstatechangedeventname"
  @ready="playerReadied"
  @loadeddata="onPlayerLoadeddata($event)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @play="onPlayerPlay($event)"
  @playing="onPlayerPlaying($event)"
  @timeupdate="onPlayerTimeupdate($event)"
  @pause="onPlayerPause($event)"
  @waiting="onPlayerWaiting($event)"
  @ended="onPlayerEnded($event)"
  @statechanged="playerStateChanged($event)"
></video-player>

data() {
        return {
            playerOptions: {
                techOrder: ['html5', 'flash'], // 兼容順序,使用flash播放慌闭，可以播放flv格式的文件
                playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
                autoplay: true, // 如果true,瀏覽器準備好時開始回放
                notSupportedMessage: '此視頻暫無法播放!', // 無法播放時顯示的信息
                sourceOrder: true,
                loop: false, // 導致視頻一結(jié)束就重新開始。
                // preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數(shù)據(jù)躯舔。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
                muted: true, // 默認情況下將會消除任何音頻驴剔。
                language: 'zh-CN',
                // aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值粥庄。值應該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
                fluid: false, // 當true時丧失，Video.js player將擁有流體大小。換句話說惜互，它將按比例縮放以適應其容器布讹。
                hls: true,  //啟用hls？
                flash: {
                    hls: { withCredentials: false },
                    //swf: '/videojs/video-js.swf'//放在static或著public下面文件夾中的videojs文件夾中 當引入js文件中統(tǒng)一定義時此處可省略
                },
                html5: { hls: { withCredentials: false } },
                sources: [
                    {
                        type: 'video/mp4', // 資源格式寫法：'video/mp4'
                        src: '/video/1.mp4' // 本地資源地址训堆，注意：本地資源存放在public文件夾中描验，本文視頻資源路徑public/video/1.mp4
                    }，
                    {
                        // withCredentials: true坑鱼，
                        type: 'application/x-mpegURL', // hls
                        src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8' // url地址
                    }膘流，
                    {
                        type:'rtmp/flv',//rtmp
                        src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'//rtmp
                    },
                    {
                        type: 'rtmp/flv',//rtmp
                        src: `rtmp://58.200.131.2:1935/livetv/hunantv`
                    },
                    {
                        type: 'rtmp/mp4', // 資源格式寫法：'video/mp4'
                        src: 'rtmp://' // url地址
                    }
                ],
                poster: 'path', // 你的封面地址
                // width: document.documentElement.clientWidth,
                height: this.fileAreaHeight, // 設置高度，fluid需要設置成flase
                // 配置控制欄
                controlBar: {
                    volumePanel: {
                            inline: false,//音量調(diào)節(jié)是否水平
                    },
                    timeDivider: true, // 時間分割線
                    currentTimeDisplay:true,//當前播放位置
                    durationDisplay: true, // 總時間
                    progressControl: true, // 進度條
                    remainingTimeDisplay: false, // 剩余時間
                    fullscreenToggle: true // 全屏按鈕
                }
            }
        };
    },

注意：computed中的這段必須要加上Ｂ沉ぁ：艄伞！
播放需要使用到 flash 時,瀏覽器的flash插件要允許運行

flash打開

mounted() {
    console.log('當前videojs對象', this.player);
    // this.player.play() // 播放
    // this.player.pause() // 暫停
    // this.player.src(src) // 重置進度條
},
computed: {
        player() {
            return this.$refs.videoPlayer.player;
        }
    },

methods: {
        // --------------------視頻播放-開始-------------------- */
        // 初始化話播放-在onPlayerCanplay中調(diào)用
        initPlay(player) {
            console.log('initPlay>當前視頻播放器實例對象', this.player);
            player.play();
        },

        /* 視頻播放 */
        // 視頻準備完畢
        playerReadied(player) {
            console.log('Readied>視頻準備完畢!', player);
        },

        // 視頻加載完成
        onPlayerLoadeddata(player) {
            console.log('Loadeddata>視頻加載完成!', player);
        },

        // 可以播放視頻
        onPlayerCanplay(player) {
            console.log('Canplay>可以播放視頻!', player);
            // this.initPlay(player);
        },

        // 拖動視頻條會觸發(fā)事件-視頻暫停>可以播放視頻>可以播放視頻至拖動位置>視頻播放>視頻加載中>可以播放視頻>視頻播放中>視頻加載中>可以播放視頻>視頻播放中>視頻加載中>可以播放視頻>視頻播放中>可以播放視頻至拖動位置
        // 可以播放視頻至拖動位置
        onPlayerCanplaythrough(player) {
            console.log('Canplaythrough>可以播放視頻至拖動位置!', player);
        },

        // 視頻播放
        onPlayerPlay(player) {
            console.log('Play>視頻播放!', player);
        },

        // 視頻播放中
        onPlayerPlaying(player) {
            console.log('Playing>視頻播放中!', player);
        },

        // 視頻時間更新中
        onPlayerTimeupdate(player) {
            // console.log('Timeupdate>視頻時間更新中!', player);
        },

        // 視頻暫停
        onPlayerPause(player) {
            console.log('Pause>視頻暫停!', player);
        },

        // 視頻加載中
        onPlayerWaiting(player) {
            console.log('Waiting>視頻加載中!', player);
        },

        // 視頻狀態(tài)改變
        playerStateChanged(playerCurrentState) {
            console.log('StateChanged>視頻狀態(tài)改變', playerCurrentState);
        },

        // 視頻播放結(jié)束
        onPlayerEnded(player) {
            console.log('Ended>視頻播放結(jié)束!', player);
        }
        //切換視頻
        playVideo(url) {
          if (url) {
            this.playerOptions.sources = [
              {
                type: 'video/mp4',
                autoplay: true,
                src: 'http://172.19.82.59:1234/test' // 本地資源地址黍析，注意：本地資源存放在 static 文件夾中卖怜，本文視頻資源路徑 static/topicMaterial/1.mp4
              }
            ]; 
          } else {
            this.playerOptions.sources = [];
          }
        },

        // --------------------視頻播放-結(jié)束-------------------- */
}

參考文檔網(wǎng)址:
vue-video-player的使用總結(jié)
vue中使用video插件vue-video-player
vue-video-player語言設置
videoJs常用方法屎开、事件阐枣、VUE中使用的注意事項
webpack與video.js一同使用的一些坑
nuxt中使用vue-video-player，以及hls實現(xiàn)（支持m3u8)