一、vue-video-player

1.安装

cnpm install vue-video-player -S
cnpm install \'video.js\' -S

2.导入使用

在main.js中导入：

import VueVideoPlayer from \'vue-video-player\';
import \'video.js/dist/video-js.css\';

Vue.use(VueVideoPlayer);

使用video组件：（完整代码）

<template>
  <div class=\'home\'>
    <video-player class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                  @ended="onPlayerEnded($event)"
                  @waiting="onPlayerWaiting($event)"
                  @playing="onPlayerPlaying($event)"
                  @loadeddata="onPlayerLoadeddata($event)"
                  @timeupdate="onPlayerTimeupdate($event)"
                  @canplay="onPlayerCanplay($event)"
                  @canplaythrough="onPlayerCanplaythrough($event)"
                  @statechanged="playerStateChanged($event)"
                  @ready="playerReadied"
    >
    </video-player>
  </div>
</template>

<script>
  export default {
    name: \'Home\',
    data() {
      return {
        playerOptions: {
          playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], // 可选的播放速度
          autoplay: false, // 如果为true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 是否视频一结束就重新开始。
          preload: \'auto\', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: \'zh-CN\',
          aspectRatio: \'16:9\', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          sources: [{
            type: "video/mp4", // 类型
            src: \'../../static/videos/aaa.mp4\' // url地址
          }],
          poster: \'\', // 封面地址
          notSupportedMessage: \'此视频暂无法播放，请稍后再试\', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true, // 当前时间和持续时间的分隔符
            durationDisplay: true, // 显示持续时间
            remainingTimeDisplay: false, // 是否显示剩余时间功能
            fullscreenToggle: true // 是否显示全屏按钮
          }
        }
      }
    },
    methods: {
      // 播放回调
      onPlayerPlay(player) {
        console.log(\'player play!\', player)
      },
      // 暂停回调
      onPlayerPause(player) {
        console.log(\'player pause!\', player)
      },
      // 视频播完回调
      onPlayerEnded($event) {
        console.log(player)
      },
      // DOM元素上的readyState更改导致播放停止
      onPlayerWaiting($event) {
        console.log(player)
      },
      // 已开始播放回调
      onPlayerPlaying($event) {
        console.log(player)
      },
      // 当播放器在当前播放位置下载数据时触发
      onPlayerLoadeddata($event) {
        console.log(player)
      },
      // 当前播放位置发生变化时触发。
      onPlayerTimeupdate($event) {
        console.log(player)
      },
      //媒体的readyState为HAVE_FUTURE_DATA或更高
      onPlayerCanplay(player) {
        // console.log(\'player Canplay!\', player)
      },
      //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
      onPlayerCanplaythrough(player) {
        // console.log(\'player Canplaythrough!\', player)
      },
      //播放状态改变回调
      playerStateChanged(playerCurrentState) {
        console.log(\'player current update state\', playerCurrentState)
      },
      //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
      playerReadied(player) {
        console.log(\'example player 1 readied\', player);
      }
    },
  }
</script>
<style scoped>
  .home {
    width: 1000px;
    height: 800px;
    margin: 0 auto;
    text-align: center;
  }
</style>

3.支持的控制函数、回调函数

控制函数：

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

事件函数：

 @play="onPlayerPlay($event)"
 @pause="onPlayerPause($event)"
 @ended="onPlayerEnded($event)"
 @waiting="onPlayerWaiting($event)"
 @playing="onPlayerPlaying($event)"
 @loadeddata="onPlayerLoadeddata($event)"
 @timeupdate="onPlayerTimeupdate($event)"
 @canplay="onPlayerCanplay($event)"
 @canplaythrough="onPlayerCanplaythrough($event)"
 @statechanged="playerStateChanged($event)"
 @ready="playerReadied"

参照：https://www.jb51.net/article/173816.htm

4.实现效果

 二、vue-dplayer

1.安装

cnpm install vue-dplayer -S

2.导入使用

在main.js中导入：

import VueDPlayer from \'vue-dplayer\';
import \'vue-dplayer/dist/vue-dplayer.css\';

Vue.use(VueDPlayer);

使用vue-dplayer组件：

<template>
  <div class=\'home\'>
    <d-player ref="player" :options="options"></d-player>
  </div>
</template>

<script>
  export default {
    name: \'Home\',
    data() {
      return {
        options: {
          video: {
            url: \'../../static/videos/fengjing.mkv\'
          },
          contextmenu: [
            {}
          ]
        }
      }
    }
  }
</script>
<style scoped>
  .home {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
</style>

以上是最基本的使用代码。

3.options参数

参考dplayer的官方文档：http://dplayer.js.org/guide.html#options。参照options章节，填写参数进行自定义播放器。

<template>
  <div class=\'home\'>
    <d-player ref="player" :options="options"></d-player>
  </div>
</template>

<script>
  export default {
    name: \'Home\',
    data() {
      return {
        options: {
          theme: \'#b7daff\',  // 风格颜色，例如播放条，音量条的颜色
          loop: false,  // 是否自动循环
          lang: \'zh-cn\',  // 语言，\'en\', \'zh-cn\', \'zh-tw\'
          screenshot: true,  // 是否允许截图（按钮），点击可以自动将截图下载到本地
          hotkey: true,  // 是否支持热键，调节音量，播放，暂停等
          preload: \'auto\',  // 自动预加载
          volume: 0.7,  // 初始化音量
          logo: \'../../static/images/1.jpg\',  // 在视频左脚上打一个logo
          video: {
            url: \'../../static/videos/fengjing.mkv\', // 播放视频的路径
            quality: [  // 设置多个质量的视频
              {
                name: \'HD\',
                url: \'../../static/videos/fengjing.mkv\',
                type: \'auto\',  // \'auto\', \'hls\', \'flv\', \'dash\', \'webtorrent\', \'normal\' 或 其他自定义类型
              },
              {
                name: \'SD\',
                url: \'../../static/videos/fengjing.mkv\',
                type: \'auto\',
              }
            ],
            defaultQuality: 0,  // 默认是HD
            pic: \'../../static/images/2.jpg\',  // 视频封面图片
            thumbnails: \'../../static/images/3.jpg\'  // 进度条上的缩略图,需要通过dplayer-thumbnails来生成
          },
          subtitle: {
            url: \'http://www.baidu.com\',
            fontSize: \'20px\',
            bottom: \'40px\',
          },
          danmaku: {   // 弹幕
            id: \'9E2E3368B56CDBB4\',
            api: \'https://api.prprpr.me/dplayer/\',
            token: \'tokendemo\',
            maximum: 1000,
            addition: [\'https://api.prprpr.me/dplayer/v3/bilibili?aid=4157142\'],
            user: \'DIYgod\',
            bottom: \'15%\',
            unlimited: true
          },
          contextmenu: [  // 右键菜单
            {
              text: \'custom1\',
              link: \'https://www.bilibili.com\'
            },
            {
              text: \'custom2\',
              click: (player) => {
                console.log(player);
              }
            }
          ],
          highlight: [  // 进度条时间点高亮
            {
              text: \'10M\',
              time: 600,
            },
            {
              text: \'20M\',
              time: 1200,
            },
          ],
        }
      }
    }
  }
</script>
<style scoped>
  .home {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
</style>

4.API函数及事件绑定

API函数参考：http://dplayer.js.org/guide.html#api

事件绑定参考：http://dplayer.js.org/guide.html#event-binding

三、自己封装一个播放器

参考：[前端] vue封装自定义播放器

 

≥Ö‿Ö≤