vue视频播放

作者：——嘘丶低调发布日期:2025-05-14 浏览:106

<!DOCTYPE html>
<html>
<head>
  <title>Vue 视频播放</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <video controls :src="videoSrc" width="600">
      您的浏览器不支持 video 标签。
    </video>
    <br>
    <button @click="changeVideo">切换视频</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4'
      },
      methods: {
        changeVideo() {
          // 切换到另一个视频源
          this.videoSrc = 'https://www.w3schools.com/html/movie.mp4';
        }
      }
    });
  </script>
</body>
</html>

解释说明：

HTML 部分:
- 使用了 <video> 标签来嵌入视频，controls 属性为视频添加了播放控制条（如播放、暂停等）。
- :src="videoSrc" 是 Vue 的绑定语法，表示视频的源地址会动态绑定到 data 中的 videoSrc 变量。
- <button> 按钮用于触发视频源的切换。
Vue 实例:
- el: '#app' 表示 Vue 实例将挂载到具有 id="app" 的 DOM 元素上。
- data 中定义了一个 videoSrc 变量，初始值为一个视频 URL。
- methods 中定义了一个 changeVideo 方法，点击按钮时会调用该方法，修改 videoSrc 的值，从而切换视频源。
效果:
- 页面加载后，默认播放第一个视频。
- 点击“切换视频”按钮后，视频源会更改为第二个视频并自动播放。

上一篇：vue子组件调用父组件方法

下一篇：vue suspense