关于vue.js:vue使用videojs

1. 开发环境 vue2
2. 电脑系统 windows10 专业版
3. 废话不多说, 间接上操作:

npm i video.js -D

3-1. 在 mian.js 中增加如下代码:

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$VideoJs = videojs;

4. 创立组件 VideoPlayer.vue:

<template>
    <div>
        <video ref="videoPlayer" id="videoplayer" class="video-js"></video>
    </div>
</template>

<script>
export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default () {return {};
            }
        }
    },
    data () {
        return {player: null};
    },
    created () {this.$nextTick( () => {this.player = this.$VideoJs(this.$refs.videoPlayer, this.options);
            const player = this.$VideoJs('videoplayer_html5_api');
            player.ready(function () {
                let _this = this;
                _this.playbackRate(parseFloat(4));
            });
        });
    },
    mounted () {},
    beforeDestroy () {if (this.player) {this.player.dispose();
        }
    }
};
</script>

5. 在对应的文件中引入 VideoPlayer 组件:

import VideoPlayer from './videoPlayer.vue';

components: {VideoPlayer},

5-1. 在页面上应用:

 <video-player ref="videoPlayer" 
class="videoplayer"  :options="options">
</video-player>

// 数据:
options:{
    autoplay: false,
    muted: false,
    loop: false,
    preload: 'auto',
    controls: true,
    language: 'zh-CN',
    aspectRatio: '16:9',
    fluid: true,
    sources: [
        {
            src: "",
            type: "video/mp4"
        }
    ],
    notSupportedMessage: '此视频暂无奈播放，请稍后再试',
    controlBar: {
        remainingTimeDisplay: false, //
        currentTimeDisplay: true, // 以后工夫
        timeDivider: true, // 工夫分割线
        durationDisplay: true, // 总工夫
        progressControl: true, // 进度条

        customControlSpacer: true, //
        fullscreenToggle: true, // 全屏按钮
        volumePanel: false
    }
},

5-2. 进度条工夫无奈显示:

.video-js .vjs-duration, .vjs-no-flex .vjs-duration{display: block;}

.video-js .vjs-current-time, .vjs-no-flex .vjs-current-time{display: block;}

.video-js .vjs-time-control{display: block;}

5-3. 成果如下:

5-4. 自定义视频倍速:

 初始化倍速:
initVideoJs () {this.initVideoJS = setTimeout(() => {this.$VideoJs(this.$refs.videoPlayer, this.options);
  },2000);
},

// 自定义倍速事件
speedUp (num) {const player = this.$VideoJs('videoplayer_html5_api');
    player.ready(function () {
        let _this = this;
        _this.playbackRate(parseFloat(num));
    });
}

6. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。