vue-video-player 播放m3u8视频流的实现

该问题网上答案较少,翻阅github得到想要的答案，在此记录一下

首先，为了减少包体积，在组件中局部引入vue-video-player（在main.j s中引入会增加包体积）

播放m3u8需要注意两点：

需要引入videojs并绑定到window上安装依赖videojs-contrib-hls( npm i videojs-contrib-hls)并引入sources要指定type为application/x-mpegURL

代码如下：

<template>    <section>        <video-player :options="options"></video-player>    </section></template><script>import { videoPlayer } from 'vue-video-player'import videojs from 'video.js'//注意点1：需要引入videojs并绑定到window上window.videojs = videojs//注意点2：引入依赖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: fwww.easck.comalse,                        type: 'application/x-mpegURL', //注意点3：这里的type需要指定为 'application/x-mpegURL'                        src:                            'https://tx-safety-video.acfun.cn/mediacloud/acfun/acfun_video/47252fc26243b079-e992c6c3928c6be2dcb2426c2743ceca-hls_720p_2.m3u8?pkey=ABDuFNTOUnsfYOEZC286rORZhpfh5uaNeFhzffUnwTFoS8-3NBSQEvWcqdKGtIRMgiywklkZvPdU-2avzKUT-I738UJX6urdwxy_ZHp617win7G6ga30Lfvfp2AyAVoUMjhVkiCnKeObrMEPVn4x749wFaigz-mPaWPGAf5uVvR0kbkVIw6x-HZTlgyY6tj-eE_rVnxHvB1XJ01_JhXMVWh70zlJ89EL2wsdPfhrgeLCWQ&safety_id=AAKir561j0mZgTqDfijAYjR6'                    }                ],                hls: true            }        }    },    computed: {},    methods: {},    created() {}}</script><style lang="" scoped></style>

参考

https://github.com/surmon-china/vue-video-player/blob/master/examples/04-video.vue