内容提交

whychdw

2021-08-05 7d6fabfb88c1dc560e2b310427aa0de5a4449c51

 src/components/rtmpVideo.vue

@@ -1,6 +1,6 @@
<template>
    <div class="rtmp-video-wrapper">
        <video ref="videoPlayer" :options="options" class="video-js"></video>
        <video ref="videoPlayer" class="video-js"></video>
    </div>
</template>

@@ -8,10 +8,17 @@
import videoJs from 'video.js';
import 'videojs-flash';
import SWF_URL from 'videojs-swf/dist/video-js.swf';
import loadImg from '@/assets/images/dw_bg.jpg';

export default {
    name: "rtmpVideo",
    player: "",
    props: {
        url: {
            type: String,
            default: "",
        },
    },
    data() {
        return {
            options: {
@@ -21,22 +28,26 @@
                autoplay: false,         // 自动播放
                sources: [{             // 流配置，数组形式，会根据兼容顺序自动切换
                    type: 'rtmp/mp4',
                    src: 'rtmp://58.200.131.2:1935/livetv/hunantv' // 亲测可用
                    src: loadImg // 亲测可用
                }],
                techOrder: ['html5', 'flash'],
                flash: {
                    swf: SWF_URL
                }
                },
            },
            playFlag: false,
        }
    },
    watch: {
        url() {
            this.changeUrl();
        },
    },
    methods: {
        create() {
            let self = this;
            // 初始化播放器
            this.$options.player = videoJs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
                console.log('onPlayerReady', this);

                this.on('pause', function() {
                    console.log('暂停播放')
@@ -56,13 +67,21 @@
                })
            });
        },
        changeUrl() {
            let url = this.url;
            if(this.$options.player) {
                let myPlayer =  this.$options.player;
                myPlayer.src(url);
                myPlayer.load(url);
            }

        },
        play() {
            this.$nextTick(()=>{
                if(this.$options.player) {
                    this.$options.player.play();
                }
            });

        },
        dispose() {
            if(this.$options.player) {
@@ -74,7 +93,6 @@
    },
    mounted() {
        this.create();
        console.log(this.$options.player);
    },
    beforeDestroy() {
        this.dispose();