Vue Html中插入本地视频(Video 标签)

在 Vue 中插入本地视频可以通过使用标签来实现。你可以将视频文件放在你的项目中的合适位置(比如assets文件夹),然后在 Vue 组件中引用这个视频文件。html同理

  1. 首先,在你的 Vue 项目中的assets文件夹下放入你的视频文件,比如video.mp4。

  2. 在你的 Vue 组件中,可以像这样引用这个本地视频文件

    <template>
    </template> <script> export default { name: 'VideoComponent' } </script>

controls 属性是一个布尔属性。

如果存在,则指定应显示视频控件。

视频控件应包括:

播放

暂停

定位

音量

全屏切换

字幕/字幕(如果有)

跟踪(如果可用)

1.Video标签属性

我们来一起看看 标签的常用属性:

controls: 如果 controls 属性被声明,浏览器将提供一个包含声音、播放进度、播放暂停的控制面板,让用户可以控制视频的播放。

width & height: 视频显示区域的宽度和高度。

poster: 海报帧图片 URL,用于在视频处于下载中的状态时显示。如果未指定 poster 属性,则在视频第一帧可用之前不会显示任何内容,然后将视频的第一帧作为海报帧来显示。

autoplay: 如果 autoplay 属性被声明,视频会尽快自动播放,不会等待整个视频文件下载完成。

autopictureinpicture: 如果 autopictureinpicture 属性被声明,那么当用户在当前页面和另一个页面或应用程序之间来回切换时,会自动切换画中画模式。

disablepicutreinpicture: 如果 disablepictureinpicture 属性被声明,则禁用了画中画模式。

loop: 如果 loop 属性被声明,将循环播放视频。

muted: 如果 muted 属性被声明,视频将被静音。

preload: preload 属性的值示意了浏览器使用何种加载方式以达到最好的用户体验。它的值可以是 none (视频不会被缓存)、 meta (获取例如视频长度的视频元数据)或 auto (整个视频都将被加载)。如果 autoplay 属性已经被声明时, preload 属性将被忽略。

playsinline: 如果 playsinline 属性被声明,视频将在元素的播放区域内播放。

disableRemotePlayback: 如果 disableRemotePlayback 属性被声明,浏览器将禁用远程设备上进行进度控制的能力。

2.视频文件格式

HTML 支持 3 种视频文件格式: MP4、 WebM 和 OGG。
MP4: MP4 对比 WebM 有更高的视频质量。

WebM: WebM 是在旧版本电脑上也可以保证高质量的视频文件,但在移动端 和播放器上的兼容性较差。

OGG: OGG 是一个自由且开放标准的多媒体文件格式,可以纳入各式各样自由和开放源代码的编解码器,包含音效、视频、文字(例如字幕)与元数据的处理。

复制代码
<video controls width="300">
  <!-- MP4 文件 -->
  <source src="video.mp4" type="video/mp4" />

  <!-- WebM 文件 -->
  <source src="video.webm" type="video/webm" />

  <!-- OGG 文件 -->
  <source src="video.ogg" type="video/ogg" />
</video>
相关推荐
zhanshuo10 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan11 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
软件黑马王子16 分钟前
C#系统学习第八章——字符串
开发语言·学习·c#
阿蒙Amon17 分钟前
C#读写文件:多种方式详解
开发语言·数据库·c#
Da_秀25 分钟前
软件工程中耦合度
开发语言·后端·架构·软件工程
Fireworkitte32 分钟前
Java 中导出包含多个 Sheet 的 Excel 文件
java·开发语言·excel
撰卢34 分钟前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机39 分钟前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js
sophister1 小时前
Flex 布局中容易踩的那些坑,你踩过几个?
前端·css·html
lemonzoey1 小时前
Node.js child_process 核心 API 详解
前端·javascript