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

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

  1. 首先,在你的 Vue 项目中的assets文件夹下放入你的视频文件,比如video.mp4。
  2. 在你的 Vue 组件中,可以像这样引用这个本地视频文件
<template><div><video width="320" height="240" controls><source src="@/assets/video.mp4" type="video/mp4">Your browser does not support the video tag.</video></div>
</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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/713253.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s单机部署zookeeper

&#xff08;作者&#xff1a;陈玓玏&#xff09; 拉取镜像&#xff1a;docker pull zookeeper&#xff1b;编辑yaml&#xff1a; apiVersion: v1 kind: Service metadata:name: zookeeperlabels:app: zookeeper spec:ports:- name: clientport: 2181protocol: TCPtargetP…

QT TCP传输文件+ui

TCPFile tcp协议传输文件 TCPFile.pro QT core gui networkclientwidget.h #include <QWidget> #include <QTcpSocket> // 通信套接字 #include <QFile>private slots:void on_pushButton_clicked();private:QTcpSocket *tcpSocket;QFile file; /…

selenium进阶设置

1、无头浏览设置和规避爬虫检测 问题一&#xff1a;有界面时可以展示的元素&#xff0c;无头模式报错element not interactable 解决方法&#xff1a;通过错误截图发现&#xff0c;页面上有该元素&#xff0c;但是页面不够大&#xff0c;没有显示想定位的元素。 from seleni…

centos7 安装 docker-compose

1、直接参考官方&#xff1a; Install Compose standalone | Docker Docs 1、安装命令 curl -SL https://github.com/docker/compose/releases/download/v2.24.6/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose 2、修改 docker-compose 执行权限 不修改执行权…

升级pycharm之后,jupyter无法识别新安装的包

import sys print(sys.executable)在jupyter中运行&#xff0c;检测一下当前jupyter内核运行在哪个环境中-再pycharm的setting里面设置jupyter环境并没有什么用。需要重新在想要使用的环境中重新安装jupyter内核&#xff0c;并且重启。

c# cad2016系统变量解释说明

一、cad系统变量设置和获取 /// <summary> /// 设置CAD系统变量 /// </summary> /// <param name"name">变量名</param> /// <param name"value">变量值</param> public static void SetSystemVariable(string name,…

Sora背后的技术原理:深度探索Video Compression Network与语言理解在视频生成中的应用

Sora背后的技术原理&#xff1a;深度探索Video Compression Network与语言理解在视频生成中的应用 摘要&#xff1a; 随着人工智能技术的飞速发展&#xff0c;视频生成技术逐渐成为研究热点。Sora作为一种先进的视频生成技术&#xff0c;其背后的技术原理值得深入研究。本文详…

物联网平台如何实现SaaS化

物联网平台实现SaaS化是一个复杂的过程&#xff0c;涉及到多个关键步骤和要素。以下是实现物联网平台SaaS化的主要步骤和要点&#xff0c;以及如何确保成功实施。 一、平台架构设计是实现SaaS化的基础 一个分布式、模块化的架构设计对于支持多租户、高并发、高可扩展性等特性…

【Django】执行查询—F()表达式

F() F()可以实现将模型字段值与同一模型中的另一字段做比较。举个例子看一下&#xff1a; class Entry(models.Model):...number_of_comments models.IntegerField(default0)number_of_pingbacks models.IntegerField(default0)...找到所有 number_of_pingbacks 大于 numbe…

大数据权限认证 Kerberos 部署

文章目录 1、什么是 Kerberos2、Kerberos 术语和原理2.1、Kerberos 术语2.1、Kerberos 原理 3、Kerberos 服务部署3.1、前置条件3.2、安装依赖3.3、配置 krb5.conf3.4、配置 kdc.conf3.5、配置 kadm5.acl3.6、安装 KDC 数据库3.7、启动服务3.8、创建 Kerberos 管理员3.9、创建普…

idea 手动打 jar 包

1.在 File 中找到并点击 Project Structure 2.按图中高亮的部分依次点击 3.在 Main Class 处设置要打包的类&#xff0c;记得在 Directory for ... 处设置目录为根目录&#xff0c;设置好以后点击两次 OK 回到首页 4.在页面上方找到 Build &#xff0c;点击 Build Artifacts...…

【Linux】在 Ubuntu 系统下使用 Screen 运行 Python 脚本

在 Ubuntu 系统下使用 Screen 运行 Python 脚本的优点 在 Ubuntu 操作系统中&#xff0c;Screen 是一种非常有用的工具&#xff0c;特别是在需要长时间运行的任务或者需要在后台运行的任务中。结合 Python 脚本&#xff0c;Screen 提供了一种灵活且高效的方式来管理和执行任务…

ECOVADIS评估-自2024年1月1日起发布的记分卡的资格标准说明

EcoVadis评分&#xff08;0-100分&#xff09;反映了进行评估时公司的企业社会责任管理体系的质量。EcoVadis奖牌和奖章计划旨在表彰按EcoVadis评估方法中所述&#xff0c;已完成EcoVadis评估流程并展示出相对强大的管理系统来解决企业社会责任标准的合格公司。奖牌和奖章的资格…

docker常用操作命令

常用的命令&#xff0c;详细的命令下方有具体介绍 docker ps 查看正在运行的容器 docker ps -a 查看全部容器 docker images 查看本地镜像 docker search [镜像名称] 查询镜像 docker run --name mynginx -d nginx:latest&#xff1a; 使用docker镜像nginx:latest以后台模…

在Windows系统上安装Docker和SteamCMD容器的详细指南有哪些?

在Windows系统上安装Docker和SteamCMD容器的详细指南有哪些&#xff1f; 安装Docker&#xff1a; 首先&#xff0c;需要在Windows操作系统上激活WSL2功能。这是因为Docker作为一个容器工具&#xff0c;依赖于已存在并运行的Linux内核环境。可以通过使用winget来安装Docker。具体…

排序(2)——希尔排序

希尔排序&#xff08;缩小增量排序&#xff09; 基本思想 希尔排序法又称缩小增量法。希尔排序法的基本思想是&#xff1a;先选定一个整数&#xff0c;把待排序文件中所有记录分成个组&#xff0c;所有距离为的记录分在同一组内&#xff0c;并对每一组内的记录进行排序。然后&…

Linux - 基本背景

1、linux发展史 1.1、UNIX发展历史 1968年&#xff0c;一些来自通用电器公司、贝尔实验室和麻省理工学院的研究人员开发了一个名叫Multics的特殊操作系统。Multics在多任务文件管理和用户连接中综合了许多新概念。1969&#xff0d;1970年&#xff0c;AT&T的贝尔实验室研究…

[SD] 安装使用stable diffusion webui

1.下载基础版本并解压&#xff1a; https://github.com/AUTOMATIC1111/stable-diffusion-webui/releases/download/v1.0.0-pre/sd.webui.zip 2.运行update.bat 这步的目的是升级到最新版本&#xff0c;并下载相应的依赖库。 这步可能会提示某些git仓库无法clone到本地&#…

[工具探索]-Gitlab的CI/CD操作

在 GitLab 中&#xff0c;CI&#xff08;持续集成&#xff09;是一项强大的功能&#xff0c;它允许你自动化构建、测试和部署你的代码。 在 GitLab CI/CD 中&#xff0c;.gitlab-ci.yml 文件是用于定义构建和部署流程的配置文件。它使用一种基于 YAML 的语法。 下面是一个简单…

dp——路径距离

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 01 62. 不同路径02 63. 不同路径 II03 64. 最小路径和04 72. 编辑距离05 120. 三角形最小路径和06 124. 二叉树中的最大路径和07 174. 地下城游戏08 514. 自由之路09 576. 出界的路径数10 931. 下降路径最小和11 13…