Vue компонент для видео-плеера *.m3u8

Категория: VueJS

Пример Vue-компонента для воспроизведения формата video.m3u8.

Зависимости:

"vue-video-player": "^5.0.2",
"@videojs/http-streaming": "^1.12.0",
Внимание!

Я редко публикую простые компоненты, но в этом компоненте была ошибка "Uncaught ReferenceError: t is not defined", которая проявлялась только в production сборке.

Почему только в production? В prod-билде происходит минификация зависимостей. Изначально, не правильно импортировался пакет videojs-contrib-hls:

// require('videojs-contrib-hls/dist/videojs-contrib-hls.js'); ## Не правильно!!

Компонент:

<template>
    <div class="video_modal">
        <video-player class="video-player-box"
            ref="videoPlayerRef"
            :options="playerOptions"
            @ready="onPlayerReady" />
    </div>
</template>

<script>
    //import VueVideoPlayer from 'vue-video-player';
    //Vue.use(VueVideoPlayer);
    import {videoPlayer} from 'vue-video-player';
    
    // @note Required for support m3u8. Else: VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.
    import 'video.js'; // OR: import videojs from 'video.js';
    import 'videojs-contrib-hls';
    import 'video.js/dist/video-js.css';
    
    export default {
        components: { videoPlayer },
        data: function() {
            return {
                playerOptions: {
                    width: '1024px',
                    sources: [{
                        type: 'application/x-mpegurl',
                        src: this.videoUrl,
                        withCredentials: false,
                    }],
                    controlBar: {
                        timeDivider: false,
                        durationDisplay: false,
                    },
                    flash: {hls: {withCredentials: false}},
                    html5: {hls: {withCredentials: false}},
                    poster: this.thumbnail,
                    name: 'player',
                },
            };
        },
        props: {
            thumbnail: {type: String, default: ''},
            videoUrl: {type: String, default: ''},
        },
        computed: {
            player() {
                return this.$refs.videoPlayerRef.player;
            }
        },
        mounted() {
            window.vuePlayerModal = this;
        },
        methods: {
            onPlayerReady(player) {
                /*const hls = player.tech({IWillNotUseThisInPlugins: true}).hls;

                player.tech_.hls.xhr.beforeRequest = function(options) {
                    /!* options: {
                        timeout: 45000,
                        uri: "https://d1uava4t3l5aij.cloudfront.net/recordings/1582812531578/video_2020-02-27360.m3u8",
                        withCredentials: false,
                        callback: ƒ(e,t),
                    } *!/

                    return options;
                };*/
            },
        }
    };
</script>

#vue, #vue-video-player, #m3u8

категория: VueJS