audio 标签动态src 且src是http无法播放问题

 <audioref="audio" :src="src"alt="加载失败"controls/>

src是动态传参的
无法播放因为动态src需要在赋值后对audio进行重载

this.$refs.audio.load()

注意如果,src跟本项目地址IP端口协议不同,会出现跨域问题。audio标签本身是允许跨域的资源的,但是如果src资源本身所在服务不允许跨域就会出现,直接访问文件地址能够播放,但是放到audio里面就无法播放的问题,这个有两个解决方法。
法一:
让资源服务器允许跨域。
法二:
不在audio里面去播放跨域的音频
直接用a标签连接打开新的浏览器页签

  <a  :href="src"         target="blank"style="text-decoration: none;">播放</a> 

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

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

相关文章

CSS3表格和表单样式

在传统网页中&#xff0c;表格主要用于网页布局&#xff0c;因此也成为网页编辑的主要工具&#xff1b;在标准化网页设计中&#xff0c;表格的主要功能是显示数据&#xff0c;也可适当辅助结构设计。本章主要介绍如何使用CSS控制表格和表单的显示效果&#xff0c;如表格和表单的…

Google Archive Patch 基础应用代码记录

项目地址 Google Archive Patch 前置 <!-- 差量应用模块 --> <dependency><groupId>com.google.archivepatcher</groupId><artifactId>archive-patch-applier</artifactId><version>1.0.4</version><scope>test</…

Linux并发与竞争(一)

Linux 并发与竞争 在讲 Linux 并发操作之前先了解一下并发和并行区别&#xff0c;这两个说法都是指多个操作同时被执行&#xff0c;不过这两个概念具有很大的差别&#xff0c;很多时候会混淆这两个概念。 并发强调执行多个操作的对象只能有一个&#xff0c;并行则不强调&…

第00章_写在前面

第00章_写在前面 讲师&#xff1a;尚硅谷-宋红康&#xff08;江湖人称&#xff1a;康师傅&#xff09; 官网&#xff1a;http://www.atguigu.comhttp://www.atguigu.com/) 一、MySQL数据库基础篇大纲 MySQL数据库基础篇分为5个篇章&#xff1a; 1. 数据库概述与MySQL安装篇…

快速入门:使用 Spring Boot 构建 Web 应用程序

前言 本文将讨论以下主题&#xff1a; 安装 Java JDK、Gradle 或 Maven 和 Eclipse 或 IntelliJ IDEA创建一个新的 Spring Boot 项目运行 Spring Boot 应用程序编写一个简单的 Web 应用程序打包应用程序以用于生产环境 通过这些主题&#xff0c;您将能够开始使用 Spring Boo…

Android NDK开发详解之NDK 使用入门

Android NDK开发详解之NDK 使用入门 下载 NDK 和工具创建或导入原生项目 原生开发套件 (NDK) 是一套工具&#xff0c;使您能够在 Android 应用中使用 C 和 C 代码&#xff0c;并提供众多平台库&#xff0c;您可使用这些平台库管理原生 activity 和访问实体设备组件&#xff0c;…

oracle (9)Storage Relationship Strut

Storage & Relationship Strut 存储和关系支柱 目标&#xff1a; 描述数据库的逻辑结构列出段类型其用途列出控制块空间使用的关键字获取存储结构信息 一、基础知识 1、数据库逻辑结构图 2、Types of Segments 段的类型 3、Storage Clause Precedence 存储条款的优先顺序 …

一文了解什么是WebSocket

WebSocket 允许我们创建“实时”应用程序&#xff0c;与传统 API 协议相比&#xff0c;该应用程序速度更快且开销更少。​ 一、WebSocket 是如何工作的 按照传统的定义&#xff0c;WebSocket是一种双工协议&#xff0c;主要用于客户端-服务器通信通道。它本质上是双向的&…

Spring Cloud之Docker的学习【详细】

目录 Docker 项目部署问题 总结 镜像与容器 Docker的安装 Docker基本操作 镜像相关命令 拉取镜像 镜像保存 删除镜像 镜像加载 容器相关命令 删除容器 数据卷 数据卷命令 数据挂载 自定义镜像 Dockerfile 案例 Docker-Compose Compose文件 Docker-Compos…

Termux SFTP如何实现远程文件传输

文章目录 1. 安装openSSH2. 安装cpolar3. 远程SFTP连接配置4. 远程SFTP访问4. 配置固定远程连接地址 SFTP&#xff08;SSH File Transfer Protocol&#xff09;是一种基于SSH&#xff08;Secure Shell&#xff09;安全协议的文件传输协议。与FTP协议相比&#xff0c;SFTP使用了…

CN考研真题知识点二轮归纳(3)

持续更新&#xff0c;上期目录&#xff1a; CN考研真题知识点二轮归纳&#xff08;2&#xff09;https://blog.csdn.net/jsl123x/article/details/134111760?spm1001.2014.3001.5501 1.TCP/IP 名称&#xff1a;传输控制协议/网络协议&#xff0c;是一个协议族&#xff0c;主…

数学知识:求组合数

求组合数 I&#xff1a; 注意&#xff1a;1~1w组数据 #include<iostream> using namespace std;const int mod 1e97; long long f[2010][2010];int main() {int n;scanf("%d",&n);//预处理for(int i0;i<2000;i){for(int j0;j<i;j){if(!j) f[i][j]…

力扣每日一题80:删除有序数组中的重复项||

题目描述&#xff1a; 给你一个有序数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使得出现次数超过两次的元素只出现两次 &#xff0c;返回删除后数组的新长度。 不要使用额外的数组空间&#xff0c;你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的…

管网智慧化建设能为管网提供哪些优势?第3点特别值得注意!

关键词&#xff1a;智能管网、智慧管网、智慧管网建设、智慧燃气、气管网压力监测解决方案 随着信息技术的不断发展&#xff0c;数字城市的发展正在快速向智慧城市推进&#xff0c;而管网智慧化建设是目前智慧城市建设中不可或缺的一个重要举措。 因为早期铺设使用的排水管道…

MathType2024破解版激活序列号

MathType序列号是一款针对该软件而制作的激活工具&#xff0c;大家都知道这款软件在官方是需要花钱购买的&#xff0c;不然得话就只能试用。有很多功能都无法正常使用&#xff01;而本序列号却可以完美的解决这一难题&#xff0c;因为它可以破解并激活“MathType”&#xff0c;…

Android WMS——Dialog和Toast窗口创建(五)

前面文章介绍了 Activity 窗口创建的流程,这里我们在看一下 Dialog 和 Toast 窗口创建的流程。 一、Dialog窗口创建 Dialog 中创建 Window 是在其构造方法中完成。 1、Dialog显示 源码位置:/frameworks/base/core/java/android/app/Dialog.java private final WindowMana…

java实现下载文件压缩包

业务背景&#xff1a; 在开发过程中&#xff0c;我们会遇到需要对文件&#xff08;单个或多个&#xff09;进行压缩并下载的功能需求&#xff0c;这里记录一下压缩多个文件的实现过程&#xff0c;或许有更好的方式请大家补充 前端实现一个按钮调下载压缩包的接口 <button…

jenkins、ant、selenium、testng搭建自动化测试框架

如果在你的理解中自动化测试就是在eclipse里面讲webdriver的包引入&#xff0c;然后写一些测试脚本&#xff0c;这就是你所说的自动化测试&#xff0c;其实这个还不能算是真正的自动化测试&#xff0c;你见过每次需要运行的时候还需要打开eclipse然后去选择运行文件吗&#xff…

MySQL篇---第十篇

系列文章目录 文章目录 系列文章目录一、说说悲观锁和乐观锁二、怎样尽量避免死锁的出现?三、使用 MySQL 的索引应该注意些什么?一、说说悲观锁和乐观锁 悲观锁 说的是数据库被外界(包括本系统当前的其他事物以及来自外部系统的事务处理)修改保持着保守 态度,因此在整个数…

230 - Borrowers (UVA)

题目链接如下&#xff1a; Online Judge 代码如下&#xff1a; #include <iostream> #include <string> #include <algorithm> #include <vector> #include <map> // #define debugstruct book{std::string title;std::string author;bool is…