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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【H5 移动端播放 m3u8格式视频】应用场景：海康视频监控，rtmp 格式后台转成 m3u8 后使用 -> 正文阅读

[JavaScript知识库]【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>

参考地址：