vue-video-player播放 hls(m3u8)视频流

最新推荐文章于 2024-08-30 11:52:30 发布

勤劳@小蚂蚁

最新推荐文章于 2024-08-30 11:52:30 发布

阅读量2.6k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zcylyzhi4/article/details/109737015

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、组件封装

<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>

二、调用方式

代码如下（示例）：

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
         },
     };
 },