• 小鱼儿心语：连太阳都无法做到让所有人喜欢，我说它温暖，你嫌它刺眼。所以，不必太在意别人的看法，凡是先讨好自己！

今天给大家写一个vue项目中播放m3u8视频的小demo，相信很多小伙伴工作中也会用到的，我来给大家总结一下，以下方法直接复制即可用哦：

1、首先npm安装

npm install vue-video-player --save
npm install videojs-contrib-hls --save

2、其次main.js中引入

import hls from 'videojs-contrib-hls'
import VideoPlayer from 'vue-video-player';
import "video.js/dist/video-js.css"
import "vue-video-player/src/custom-theme.css"

Vue.use(hls)
Vue.use(VideoPlayer)

3、接下来就可以去使用了：

<template>
    <!-- 用户管理 -->
    <div class="user">
      <!-- 播放m3u8视频 -->
      <video-player
        class="video-player vjs-custom-skin"
        :playsinline="true"
        :options="'http://192.168.0.197:83/openUrl/ZNbwjN6/live.m3u8'|videoOption">
      </video-player>
    </div>
  </template>
  
  <script>
  import "videojs-contrib-hls"
  export default {
    filters:{
        videoOption(val) {
            console.log('val',val)
            return {
                live: false,
                preload: "auto",
                autoplay: true,
                language: "zh-CN",
                aspectRatio: "16:8",
                fluid: true,
                sources: [
                    {
                        src: val //url地址
                    }
                ],
                notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                controlBar: {
                    timeDivider: false,
                    durationDisplay: false,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true //全屏按钮
                },
                flash: {
                    hls: {
                        withCredentials: false
                    }
                }
            }
        },
    },
    data() {
      return {
      }
    },
  }
  </script>

OK，去看看是不是可以播放了，样式最后大家自己调整一下就好了哦！是不是很简单呀，希望可以帮助到大家^ w ^！