vue播放视频

作者：寂寞带点伤发布日期:2025-03-31 浏览:99

<!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>
    <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 是 Vue 的语法糖，用于绑定 videoSrc 数据属性到视频源。
Vue 实例:
- el: '#app'：将 Vue 实例挂载到 #app 元素上。
- data：定义了一个 videoSrc 数据属性，初始值为一个视频 URL。
- methods：定义了一个 changeVideo 方法，点击按钮时会改变 videoSrc 的值，从而切换视频源。
按钮:
- 点击按钮后会触发 changeVideo 方法，更换视频源。

上一篇：vue3 获取ref

下一篇：vue删除node_modules文件指令