There are few answers to this question online, so check github to get the answer you want, and record it here

First, to reduce package size, locally introduce vue-video-player into the component (introduced in main.js will increase package size)

Note two points when playing M3U8:

  1. You need to import VideoJS and bind it to the window
  2. Install dependency videojs-contrib-hls(npm i videojs-contrib-hls) and introduce
  3. Sources specifies type asapplication/x-mpegURL

The code is as follows:

<template>
    <section>
        <video-player :options="options"></video-player>
    </section>
</template>

<script>
import { videoPlayer } from 'vue-video-player'

import videojs from 'video.js'
// Note 1: We need to import VideoJS and bind it to the window
window.videojs = videojs
// Note 2: Introduce dependencies
require('videojs-contrib-hls/dist/videojs-contrib-hls.js')


require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

export default {
    name: 'test-video-player'.components: {
        videoPlayer
    },
    data() {
        return {
            options: {
                autoplay: false.height: '720'.playbackRates: [0.7.1.0.1.25.1.5.2.0].sources: [{withCredentials: false.type: 'application/x-mpegURL'.// Application /x-mpegURL = 'application/x-mpegURL'
                        src:
                            'https://tx-safety-video.acfun.cn/mediacloud/acfun/acfun_video/47252fc26243b079-e992c6c3928c6be2dcb2426c2743ceca-hls_720 p_2.m3u8?pkey=ABDuFNTOUnsfYOEZC286rORZhpfh5uaNeFhzffUnwTFoS8-3NBSQEvWcqdKGtIRMgiywklkZvPdU-2avzKUT-I738UJX6urdwxy_ZHp617 win7G6ga30Lfvfp2AyAVoUMjhVkiCnKeObrMEPVn4x749wFaigz-mPaWPGAf5uVvR0kbkVIw6x-HZTlgyY6tj-eE_rVnxHvB1XJ01_JhXMVWh70zlJ89EL2w sdPfhrgeLCWQ&safety_id=AAKir561j0mZgTqDfijAYjR6'}].hls: true}}},computed: {},
    methods: {},
    created(){}}</script>

<style lang="" scoped></style>
Copy the code

reference

  • Github.com/surmon-chin…