vue项目实现视频播放

Vue 项目中实现视频播放的方法

使用 HTML5 <video> 标签

Vue 项目中可以直接使用 HTML5 的 <video> 标签实现视频播放功能。这种方式简单易用，适合基本的视频播放需求。

<template>
  <div>
    <video controls width="640" height="360">
      <source src="/path/to/video.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
  </div>
</template>

controls 属性会显示默认的视频控制条，包括播放、暂停、音量调节等。可以通过 width 和 height 设置视频的显示尺寸。

使用第三方库（如 Video.js）

如果需要更丰富的功能和更好的兼容性，可以使用第三方库如 Video.js。Video.js 是一个开源的 HTML5 视频播放器库，支持多种格式和自定义皮肤。

安装 Video.js：

npm install video.js

在 Vue 组件中使用：

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

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default() {
        return {
          controls: true,
          sources: [{
            src: '/path/to/video.mp4',
            type: 'video/mp4'
          }]
        };
      }
    }
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
      console.log('Player is ready');
    });
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>

<style>
.video-js {
  width: 640px;
  height: 360px;
}
</style>

使用 Vue 专用视频播放器组件（如 Vue-Video-Player）

Vue-Video-Player 是基于 Video.js 的 Vue 专用封装，提供了更便捷的集成方式。

安装 Vue-Video-Player：

npm install vue-video-player

在 Vue 组件中使用：

<template>
  <div>
    <video-player :options="playerOptions"></video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player';
import 'video.js/dist/video-js.css';

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        controls: true,
        sources: [{
          src: '/path/to/video.mp4',
          type: 'video/mp4'
        }]
      }
    };
  }
};
</script>

实现自定义控制条

如果需要完全自定义视频控制条，可以通过监听 <video> 标签的事件并手动控制播放器的行为。

<template>
  <div>
    <video ref="videoPlayer" width="640" height="360" @play="onPlay" @pause="onPause">
      <source src="/path/to/video.mp4" type="video/mp4">
    </video>
    <button @click="togglePlay">{{ isPlaying ? 'Pause' : 'Play' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPlaying: false
    };
  },
  methods: {
    togglePlay() {
      const video = this.$refs.videoPlayer;
      if (this.isPlaying) {
        video.pause();
      } else {
        video.play();
      }
    },
    onPlay() {
      this.isPlaying = true;
    },
    onPause() {
      this.isPlaying = false;
    }
  }
};
</script>

流媒体支持（如 HLS 或 DASH）

对于流媒体视频（如 HLS 或 DASH），可以使用相应的库来实现。例如，对于 HLS 流，可以使用 hls.js。

安装 hls.js：

npm install hls.js

在 Vue 组件中使用：

<template>
  <div>
    <video ref="videoPlayer" controls width="640" height="360"></video>
  </div>
</template>

<script>
import Hls from 'hls.js';

export default {
  mounted() {
    const video = this.$refs.videoPlayer;
    const hls = new Hls();
    hls.loadSource('https://example.com/stream.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, () => {
      video.play();
    });
  }
};
</script>

跨浏览器兼容性

不同浏览器对视频格式的支持不同，可以通过提供多种格式的视频源来增强兼容性。

<video controls width="640" height="360">
  <source src="/path/to/video.mp4" type="video/mp4">
  <source src="/path/to/video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

响应式视频播放器

为了让视频播放器适应不同屏幕尺寸，可以使用 CSS 实现响应式设计。

<template>
  <div class="video-container">
    <video controls>
      <source src="/path/to/video.mp4" type="video/mp4">
    </video>
  </div>
</template>

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 宽高比 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

以上方法涵盖了从基础到高级的视频播放实现方式，可以根据项目需求选择合适的方法。