Vue中实现视频播放——vue-video-player、dplayer

在Vue中实现视频播放，可以使用vue-video-player或dplayer等第三方库。以下是使用vue-video-player的示例代码：

1. 安装vue-video-player：

npm install vue-video-player --save

2. 在Vue组件中引入并使用vue-video-player：

<template>
  <div>
    <video-player class="vjs-custom-skin"
                  ref="videoPlayer"
                  :options="playerOptions">
    </video-player>
  </div>
</template>
 
<script>
import 'video.js/dist/video-js.css';
import { videoPlayer } from 'vue-video-player';
 
export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,播放器即将准备就绪时将自动播放
        muted: false, // 默认情况下是否静音
        loop: false, // 视频一结束就重新开始
        preload: 'auto', // 视频预加载
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: 'your-video-url.mp4' // 视频url地址
          }
        ],
        poster: '', // 视频封面图片
        notSupportedMessage: '此视频播放器需要更新', // 视频不支持时显示的消息
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    };
  }
};
</script>
 
<style>
.vjs-custom-skin {
  /* 自定义样式 */
}
</style>

在这个例子中，你需要替换your-video-url.mp4为你的视频文件URL。playerOptions中包含了播放器的配置选项，你可以根据需要调整这些选项。