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>
相关推荐
極光未晚1 分钟前
JavaScript BOM 对象:浏览器的隐形控制塔
前端·javascript·源码
天涯学馆2 分钟前
网站秒变 App!手把手教你搞定 PWA
前端·javascript·面试
神仙别闹3 分钟前
基于Python实现LSTM对股票走势的预测
开发语言·python·lstm
用户9272472502197 分钟前
PHP + CSS + JS 数据采集与展示系统
javascript
小样还想跑39 分钟前
axios无感刷新token
前端·javascript·vue.js
字节跳跃者40 分钟前
为什么Java已经不推荐使用Stack了?
javascript·后端
字节跳跃者40 分钟前
深入剖析HashMap:理解Hash、底层实现与扩容机制
javascript·后端
chao_7891 小时前
回溯题解——子集【LeetCode】二进制枚举法
开发语言·数据结构·python·算法·leetcode
Web小助手1 小时前
js高级程序设计(日期)
javascript
Web小助手1 小时前
js高级程序设计(4/5章节)
javascript