【H5 移动端播放 m3u8格式视频】应用场景：海康视频监控，rtmp 格式后台转成 m3u8 后使用

方案1：vue-video-player

NPM : npm install vue-video-player --save

代码如下：

import Vue from 'vue'
import App from './App.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)


Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

<template>
  <div class="item">
    <div class="player">
      <video-player
        class="vjs-custom-skin"
        :options="playerOptions"
        @ready="playerReadied"
      >
      </video-player>
    </div>
  </div>
</template>
<script>
// videojs
import videojs from "video.js";
window.videojs = videojs;
// hls plugin for videojs6
require("videojs-contrib-hls/dist/videojs-contrib-hls.js");
// export
export default {
  data() {
    return {
      playerOptions: {
        // videojs and plugin options
        height: "360",
        sources: [
          {
            withCredentials: false,
            type: "application/x-mpegURL",
            src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8",
          },
        ],
        controlBar: {
          timeDivider: false,
          durationDisplay: false,
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster:
          "https://surmon-china.github.io/vue-quill-editor/static/images/surmon-5.jpg",
      },
    };
  },
  methods: {
    playerReadied(player) {
      var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls;
      console.log(hls);
      player.tech_.hls.xhr.beforeRequest = function (options) {
        // console.log(options)
        return options;
      };
    },
  },
};
</script>

方案2：

CDN

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <!--https://www.bootcdn.cn/video.js/-->
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
    <!--https://www.bootcdn.cn/videojs-contrib-hls/-->
    <script src="https://cdn.bootcss.com/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>
</head>

<body>
    <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="1080"
        height="708" data-setup='{}'>
        <source id="source" src="https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8" type="application/x-mpegURL">
    </video>
</body>
<script>
    // videojs 简单使用  
    var myVideo = videojs('myVideo', {
        bigPlayButton: true,
        textTrackDisplay: false,
        posterImage: false,
        errorDisplay: false,
    })
    myVideo.play() // 视频播放
    myVideo.pause() // 视频暂停
</script>

</html>

参考地址：