vue-video-player播放 hls(m3u8)视频流_vue3-video-player 播放hls时报2404

一、组件封装

<template>
    <div style="width:100%;height:100%;" ref="videoContainer">
        <video-player 
           class="video-js vjs-big-play-centered"
           ref="myPlayer" 
           :options="playerOptions" 
           v-show="contianerW"
           id="videoPlayer"
           :info="info"
        >
        </video-player>
    </div>
</template>

<script>
import Vue from 'vue';
import VideoPlayer from 'vue-video-player';
import 'videojs-flash';

require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
Vue.use(VideoPlayer);
import 'videojs-contrib-hls';

export default {
    components: {},
    data() {
       return {
        contianerW: 0,
        info : {}
       }
    },
    props: {
        videoOptions: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    computed: {
        playerOptions() {
            return {
                width : this.contianerW,
                height : this.videoOptions.videoHeight || 'auto',
                sources: [{
                    withCredentials: false,
                    type: this.videoOptions.sourceType || `application/x-mpegURL`,
                    src: this.videoOptions.sourceSrc || ``
                }],
                autoplay: true,
                controlBar: {
                    timeDivider: false,
                    durationDisplay: false
                },
                flash: { hls: { withCredentials: false }},
                html5: { hls: { withCredentials: false }},
                loop: false,
                notSupportedMessage: `当前无可播放视频源`
            }
        }
    },
    activated() {
    },
    deactivated() {
        this.$destroy('VideoPlayer');
    },
    mounted() {
        this.contianerW = this.$refs.videoContainer.offsetWidth;
    },
    methods : {
    }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

二、调用方式

代码如下（示例）：

import VueVideo from "$pc/components/vueVideo/index.vue";
...
...
<VueVideo :videoOptions="videoOptions"></VueVideo>

...
...

data() {
     return {
         loading: false,
         videoOptions: {
             sourceType: 'application/x-mpegURL',
             sourceSrc: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
             videoHeight : 160,
             loop : false
         },
     };
 },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19