利用 vue-video-player 播放 m3u8 视频流

应用场景

目前利用 vue 项目解决视频直播问题，通常采用 vue-video-player 组件来处理相关的视频流。以下提供完整的代码示例供参考。

示例源代码

<template>
    <div class="container">
       <div class="player">
            <video-player  class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
        </div>
    </div>
</template>
 
<script>
import 'video.js/dist/video-js.css';
import 'vue-video-player/src/custom-theme.css';
import { videoPlayer } from 'vue-video-player'; //导入组件
import videojs from 'video.js';
window.videojs = videojs;
require('videojs-contrib-hls/dist/videojs-contrib-hls.js');
 
export default {
 
    data() {
        return {
            srcvideo: , 
            : {
                : [, , , ], 
                : , 
                : , 
                : , 
                : , 
                : ,
                : , 
                : , 
                : [
                    {
                        : ,
                        :  
                    }
                ],
                
                : ,
                :,
                :  ,
                 : {
                  : ,
                  : ,
                  : ,
                  :  
                 }
            }
        };
    },
    : {    
        videoPlayer
    },
    : { 
        
    }
};