vue video标签

作者：金钱打造势力狗。发布日期:2025-05-28 浏览:86

<!DOCTYPE html>
<html>
<head>
  <title>Vue Video 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <video controls width="400">
      <source :src="videoSrc" type="video/mp4">
      您的浏览器不支持 video 标签。
    </video>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!',
        videoSrc: 'https://www.w3schools.com/html/mov_bbb.mp4'
      }
    });
  </script>
</body>
</html>

解释说明：

HTML结构:
- 使用了<video>标签来嵌入视频，并设置了controls属性，使视频播放器显示默认的控制按钮（如播放、暂停等）。
- width="400" 设置了视频的宽度为400像素。
- <source>标签用于指定视频文件的路径和类型。这里使用了:src绑定到Vue实例中的videoSrc数据属性。
Vue实例:
- 创建了一个Vue实例，绑定了一个ID为#app的DOM元素。
- 在data选项中定义了两个属性：message 和 videoSrc。其中videoSrc是视频文件的URL。
脚本引入:
- 通过CDN引入了Vue.js库。

这个示例展示了如何在Vue项目中使用<video>标签来播放视频，并通过Vue的数据绑定动态设置视频源。

上一篇：props vue

下一篇：vue ajax请求