vue video.js

作者：尒忸旳迣鎅゛沬卜鋽旳凄涼发布日期:2025-06-04 浏览:10

<!DOCTYPE html>
<html>
<head>
  <title>Vue Video.js Example</title>
  <!-- 引入 Video.js 的 CSS 文件 -->
  <link href="https://vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
  <!-- 引入 Vue 和 Video.js 的 JS 文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 使用 video 标签，并绑定 video.js 的属性 -->
    <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264">
      <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
      <source src="https://vjs.zencdn.net/v/oceans.webm" type="video/webm">
      <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
    </video>
  </div>

  <script>
    new Vue({
      el: '#app',
      mounted() {
        // 初始化 Video.js 播放器
        this.player = videojs('my-video');
      },
      beforeDestroy() {
        // 销毁播放器实例，防止内存泄漏
        if (this.player) {
          this.player.dispose();
        }
      }
    });
  </script>
</body>
</html>

解释说明：

引入资源：
- 通过 <link> 标签引入了 Video.js 的 CSS 文件，用于样式。
- 通过 <script> 标签引入了 Vue 和 Video.js 的 JS 文件。
HTML 结构：
- 使用了一个 video 标签，并给它添加了 id="my-video"，以便在 Vue 中进行操作。
- class="video-js vjs-default-skin" 用于应用 Video.js 的默认样式。
- controls 属性表示显示播放控件（如播放、暂停等）。
- preload="auto" 表示视频会自动加载。
- width 和 height 设置了视频的宽高。
- <source> 标签指定了视频的源文件和类型。
Vue 实例：
- 在 Vue 的 mounted 生命周期钩子中，使用 videojs('my-video') 初始化了一个 Video.js 播放器实例。
- 在 beforeDestroy 钩子中销毁了播放器实例，以防止内存泄漏。
Video.js 播放器：
- Video.js 提供了丰富的功能，如自定义皮肤、多种格式支持、响应式设计等。

上一篇：vue动态绑定class

下一篇：vue3创建项目的命令