vue-video-player在vue中的使用注意事项

前言：vue-video-player是一个相当不错的，较适用于vue的前端组件。GitHub文档

一、安装

npm install vue-video-player --save

二、引入

可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）

（1）全局引用， 在main.js里面导入并引用

    import VideoPlayer from 'vue-video-player'
    import 'vue-video-player/src/custom-theme.css'
    import 'video.js/dist/video-js.css'
     
    Vue.use(VideoPlayer)

（2）组件内引用

    import { videoPlayer } from 'vue-video-player'
    import 'video.js/dist/video-js.css'
     
    export default {
      components: {
        videoPlayer
      }
    }

三、使用

（1）html部分

（2）js部分

        export default {
          data() {
            return {
              playerOptions: {
                playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
                autoplay: false, // 如果为true,浏览器准备好时开始回放。
                muted: false, // 默认情况下将会消除任何音频。
                loop: false, // 是否视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在

（3）效果图

视频格式

    type："video/webm"   // 可以播放，用ogg也可打开
    type："video/ogg"    // 可以播放，用webm也可打开
    type："video/3gp"    // 可以播放
    type："video/mp4"    // 可以播放
    type："video/avi"    // 打不开
    type："video/flv"    // 打不开
    type："video/mkv"    // 打不开
    type："video/mov"    // 打不开
    type："video/mpg"    // 打不开
    type："video/swf"    // 打不开
    type："video/ts"     // 打不开
    type："video/wmv"    // 打不开
    type："video/vob"    // 没转化
    type："video/mxf"    // 转化出错
    type: "video/rm"     // 转化出错

 
控制播放和暂停

    this.$refs.videoPlayer.player.play() // 播放
    this.$refs.videoPlayer.player.pause() // 暂停
    this.$refs.videoPlayer.player.src(src) // 重置进度条

回调函数

 
————————————————
版权声明：本文为CSDN博主「@Demi」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38128179/article/details/102959762