vue中动态设置source标签

项目中有个视频播放,路径通过接口返回,而且不带后缀,并不确定是什么类型的视频文件,所以要通过source标签去进行设置.

问题:当video中存在source标签的时候,浏览器渲染之后会自动去获取地址,即便地址改变,浏览器也不会再去获取地址。
解决方法:通过动态的插入source标签的方式,可以触发浏览器进行重排,从而去获取相应地址的文件进行播放。
代码示例:

<template><video ref="videoPlayer" controls loop></video></template><script>export default {mounted(){this.getVideo();},methods: {getVideo(){new Promise((resolve,reject)=>{resolve('https://www.runoob.com/try/demo_source/movie')}).then(res=>{this.$refs.videoPlayer.innerHTML=`<source src="${res}.ogg" type="video/ogg"><source src="${res}.mp4" type="video/mp4"><source src="${res}.webm" type="video/webm">您的浏览器不支持 video 标签。`})}}}</script>

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

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

相关文章

3、Flowable任务分配和流程变量

任务分配和流程变量 1.任务分配 1.1 固定分配 固定分配就是我们前面介绍的&#xff0c;在绘制流程图或者直接在流程文件中通过Assignee来指定的方式 1.2 表达式分配 Flowable使用UEL进行表达式解析。UEL代表Unified Expression Language&#xff0c;是EE6规范的一部分.Flo…

无蓝光的护眼灯有哪些品牌?分享五款优秀的无蓝光护眼台灯

现在儿童近视率越来越高了&#xff0c;用眼过度疲劳是导致近视的主要因素&#xff0c;学习环境的光线是否合适&#xff0c;都会直接影响用眼的疲劳程度。所以给孩子营造一个良好的学习环境非常重要&#xff01;为大家推荐五大品牌的护眼台灯。 1.书客护眼台灯L1 推荐指数&…

jenkins pipeline使用

1、jenkins全局配置 1.1、maven配置 1.2、jdk配置 1.3、git配置 2、构建环境配置 2.1、安装时间插件 Date Parameter 2.2、Git Parameter 插件安装 3、pipeline如下 pipeline {agent anyenvironment {image_name "192.168.122.150/ken-test/price-service:${date}&…

【大数据】Kafka 入门简介

Kafka 入门简介 1.什么是 Kafka2.Kafka 的基本概念3.Kafka 分布式架构4.配置单机版 Kafka4.1 下载并解压包4.2 启动 Kafka4.3 创建 Topic4.4 向 Topic 中发送消息4.5 从 Topic 中消费消息 5.实验5.1 实验一&#xff1a;Python 实现生产者消费者5.2 实验二&#xff1a;消费组实现…

最新AI创作系统ChatGPT源码+搭建部署教程+支持GPT4.0+支持ai绘画(Midjourney)/支持Prompt

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…

FPGA 图像缩放 1G/2.5G Ethernet PCS/PMA or SGMII实现 UDP 网络视频传输,提供工程和QT上位机源码加技术支持

目录 1、前言版本更新说明免责声明 2、相关方案推荐UDP视频传输--无缩放FPGA图像缩放方案我这里已有的以太网方案 3、设计思路框架视频源选择ADV7611 解码芯片配置及采集动态彩条跨时钟FIFO图像缩放模块详解设计框图代码框图2种插值算法的整合与选择 UDP协议栈UDP视频数据组包U…

使用MinIO Client客户端实现MySQL数据库跨机备份

安装Minio客户端 下载Linux版客户端文件 wget https://dl.min.io/client/mc/release/linux-amd64/mc -P /usr/local/bin/ chmod x /usr/local/bin/mc 添加目标对象 # 给Minio服务【用户名&#xff1a;yourusername&#xff0c;密码&#xff1a;youruserpassword】设置一个…

让iPhone用电脑的网络上网

让iPhone用电脑的网络上网&#xff0c;可以按照以下步骤操作&#xff1a; 在iPhone上找到并点击“设置”选项&#xff0c;进入“蜂窝移动网络”。打开“个人热点”选项。此时下方的弹出对话框会显示“仅USB”。用数据线将你的iPhone与电脑相连&#xff0c;并在电脑上打开“控制…

【Linux】文件IO基础知识——下篇

目录 一&#xff0c;stderr 2. errno全局变量 二&#xff0c;文件系统 1. 软链接 2. 硬链接 三&#xff0c;静态库 1. 制作静态库 2. 自动化生成静态库 & 自动发布库与头文件 3. 如何使用第三方库 法&#xff08;一&#xff09;&#xff1a;修改系统文件库 …

液压自动化成套设备比例阀放大器

液压电气成套设备的比例阀放大器是一种电子控制设备&#xff0c;用于控制液压动力系统中的液压比例阀1。 比例阀放大器通常采用电子信号进行控制&#xff0c;以控制比例阀的开度和流量&#xff0c;以实现液压系统的可靠控制。比例阀放大器主要由以下组成部分&#xff1a; 驱动…

julia 笔记/论文辅助笔记:T2vec 轨迹处理

deepgtt/harbin/julia/Trip.jl at master boathit/deepgtt (github.com) 1 导入和声明 using HDF5, CSV, DataFrames, Dates, Sockets # 引入几个模块&#xff0c;这些模块用于文件操作、数据处理、日期处理、网络操作等功能。using Distances: euclidean # 从Distances模块…

如何修改模型颜色

1、模型材质颜色介绍 在3D模型中&#xff0c;材质&#xff08;Material&#xff09;是指表面质感的特性&#xff0c;包括颜色、光泽、透明度等属性。其中&#xff0c;颜色是最基本的属性之一&#xff0c;它决定了物体表面的外观和感觉。 在现代计算机图形学中&#xff0c;通常…

常用redis-lua脚本

REDIS控制台 1. 进入控制台 E:\soft\Redis-x64-5.0.14.1\redis-cli.exe -h 127.0.0.1 -p 6379 -a password常用redis-lua脚本 在REDIS控制台输入 1. 查询以xxx为前缀的key的数量 local prefix ARGV[1] local keys redis.call(KEYS, prefix .. *) return #keys对应EVAL脚…

网络安全是什么?一文认识网络安全

一、网络安全 1.概念 网络安全从其本质上讲就是网络上的信息安全&#xff0c;指网络系统的硬件、软件及数据受到保护。不遭受破坏、更改、泄露&#xff0c;系统可靠正常地运行&#xff0c;网络服务不中断。 &#xff08;1&#xff09;基本特征 网络安全根据其本质的界定&#…

JS 数组 splice 用法

JS数组的 splice() 方法是用于向/从数组中添加/删除元素。它的语法如下&#xff1a; array.splice(start, deleteCount, item1, item2, ...)其中&#xff0c; start&#xff1a;从该索引开始修改数组&#xff08;从0开始计数&#xff09;。如果索引为负数&#xff0c;则从倒数…

C++ 配置VSCode开发环境

C配置VSCode开发环境 简介 Visual Studio Code (VSCode) 是一款开源的轻量级代码编辑器。它支持许多编程语言&#xff0c;包括C。本文档将详细介绍如何在Windows环境下配置VSCode的C开发环境。 安装步骤 1. 安装Visual Studio Code 首先&#xff0c;你需要下载并安装Visua…

Git构建分布式版本控制系统

一、版本控制 1、概念&#xff1a; 版本控制&#xff08;Version Control&#xff09;&#xff0c;也被称为版本管理、源代码管理或代码控制&#xff0c;是一种系统和工具&#xff0c;用于跟踪和管理文件、数据或源代码的不同版本和历史记录&#xff0c;在软件开发、文档管理…

jdbc设置StatementTimeout后还需要设置socket timeout参数吗

背景 我们设置JDBC参数时&#xff0c;不管有没有在Statement中配置超时时间StatementTimeout&#xff0c;我们都需要配置jdbc的socket timeout参数&#xff0c;那么为什么这个socket timeout参数如此必要&#xff0c;不设置又会怎么样&#xff1f; 问题真相 首先设置了State…

【Linux笔记】Linux基础权限

【Linux笔记】Linux基础权限 一、Linux权限的概念1.1、Linux中一切皆文件1.2、文件访问者的分类1.3、、Linux中的“用户白名单” 二、文件访问权限的修改2.1、权限的增加和减少的基础方法2.2、以八进制数修改权限 三、用户身份的修改3.1、修改文件的拥有者3.2、修改文件的所属组…