Video.js展示视频

在Vue 2中使用Video.js来展示视频是一个常见的需求，因为Video.js提供了丰富的API和灵活的自定义选项，使得在网页上嵌入和控制视频变得简单。以下是一个详细的示例，包括如何在Vue 2项目中集成Video.js，并展示一个基本的视频播放器。

1、支持格式

视频文件格式

MP4：这是最常见的视频文件格式之一，使用H.264视频编码和AAC音频编码。Video.js原生支持MP4格式的视频。
WebM：这是一种开源的视频格式，特别设计用于通过网页进行流媒体传输。WebM也得到了Video.js的支持。
Ogg Theora（OGV）：虽然不像MP4和WebM那样广泛使用，但Video.js也支持Ogg Theora编码的视频文件（通常保存为.ogv扩展名）。
其他格式（通过插件或转码）：
- FLV：虽然Video.js不直接支持FLV格式，但可以通过安装videojs-flash插件（注意，这可能需要用户设备支持Flash，但鉴于Flash已逐渐淘汰，此方法不再推荐）或使用其他转码技术将其转换为Video.js支持的格式。
- M3U8：这是一种HLS（HTTP Live Streaming）流媒体的播放列表格式，Video.js通过安装videojs-contrib-hls插件可以支持M3U8格式的视频流。
- WMV：虽然Video.js不直接播放WMV文件，但可以通过服务器端的转码服务（如华为云等提供的服务）将WMV视频转换为Video.js支持的格式。

流媒体协议

HLS（HTTP Live Streaming）：这是一种由Apple开发的流媒体网络传输协议，允许流媒体内容通过HTTP网络进行传输。Video.js通过安装插件可以支持HLS流媒体。
DASH（Dynamic Adaptive Streaming over HTTP）：这是另一种基于HTTP的自适应比特率流媒体技术，用于在网络中高效传输流媒体内容。虽然Video.js原生可能不完全支持DASH，但可以通过其他工具或插件来实现。

注意事项

当处理不同格式的视频文件时，可能需要在服务器端进行转码，以确保视频内容以Video.js支持的格式传输到客户端。
对于某些特定格式（如FLV），由于技术和兼容性问题，建议使用其他更广泛支持的格式或通过现代技术（如HLS或DASH）进行流媒体传输。
Video.js的功能和支持的格式可能会随着版本更新而发生变化，建议查阅最新的官方文档以获取最准确的信息。

2、使用步骤

步骤 1: 安装Video.js

首先，你需要在你的Vue项目中安装Video.js。你可以通过npm或yarn来安装它。

npm install video.js  
# 或者  
yarn add video.js

步骤 2: 引入Video.js到你的组件

在你的Vue组件中，你需要引入Video.js的CSS和JavaScript文件。通常，你可以在你的组件的<script>标签中引入JavaScript，在<style>标签中通过@import引入CSS（但更推荐在全局样式文件中引入CSS，以避免在每个组件中重复引入）。

然而，由于Vue的组件化特性，直接在组件中引入CSS可能不是最佳选择。因此，你可以在项目的入口文件（如main.js或app.js）中全局引入Video.js的CSS。

main.js

import 'video.js/dist/video-js.css'

步骤 3: 创建Vue组件

现在，你可以创建一个Vue组件来封装Video.js播放器。

VideoPlayer.vue

<template>  <div>  <!-- 提供一个video元素作为Video.js的容器 -->  <video  ref="videoElement"  class="video-js vjs-default-skin"  controls  preload="auto"  width="640"  height="264"  data-setup='{}'  >  <source src="YOUR_VIDEO_SOURCE.mp4" type="video/mp4" />  <!-- 可以在这里添加多个source标签以支持多种格式 -->  <!-- 如果浏览器不支持video标签，则显示以下文本 -->  你的浏览器不支持Video标签。  </video>  </div>  
</template>  <script>  
// 引入Video.js  
import videojs from 'video.js'  export default {  name: 'VideoPlayer',  mounted() {  // 组件挂载后，初始化Video.js播放器  this.player = videojs(this.$refs.videoElement, {  // 这里可以配置Video.js的选项  }, function onPlayerReady() {  console.log('播放器已就绪！');  // 可以在这里添加更多初始化后的操作  });  },  beforeDestroy() {  // 组件销毁前，销毁Video.js播放器  if (this.player) {  this.player.dispose();  }  }  
}  
</script>  <style scoped>  
/* 这里可以添加一些针对当前组件的样式，但通常Video.js的样式已经足够 */  
</style>

注意事项

视频源：请将YOUR_VIDEO_SOURCE.mp4替换为你的视频文件的实际URL。
data-setup属性：在<video>标签上，data-setup='{}'是一个空的JSON对象，用于告诉Video.js在DOM元素准备好时初始化播放器。虽然在这个例子中我们没有传递任何配置，但它仍然是必需的。
组件销毁：在Vue组件的beforeDestroy生命周期钩子中，我们调用了player.dispose()来销毁播放器。这是一个重要的步骤，因为它可以确保在组件被销毁时释放资源，避免内存泄漏。

以上就是在Vue 2中使用Video.js展示视频的一个基本示例。你可以根据自己的需求调整Video.js的配置，比如添加播放列表、自定义控制条等。Video.js的官方文档提供了丰富的选项和API，可以帮助你实现更复杂的视频播放功能。