需要使用hls插件

首先安装依赖npm install hls.js --save

<audio ref="audio"></audio>
import Hls from 'hls.js';
methods: {
init(){
if (Hls.isSupported()) {
var hls = new Hls();// 实例化 Hls 对象
hls.loadSource('https://s.music.com/s/000000000/000_00000.m3u8');// 传入路径
hls.attachMedia(this.$refs.audio);
hls.on(Hls.Events.MANIFEST_PARSED, () => {//加载成功
setTimeout(() => {
console.log(this.$refs.audio)
this.$refs.audio.play();// 调用播放 API
}, 0)
});
}
}
}

  

在H5页面播放m3u8音频文件的更多相关文章

  1. iOS从零开始学习直播之音频1.播放本地音频文件

      现在直播越来越火,俨然已经成为了下一个红海.作为一个资深码农(我只喜欢这样称呼自己,不喜欢别人这样称呼我),我必须赶上时代的潮流,开始研究视频直播.发现视屏直播类的文章上来就讲拉流.推流.采集.美 ...

  2. 用 Qt 的 QAudioOutput 类播放 WAV 音频文件

    用 Qt 的 QAudioOutput 类播放 WAV 音频文件 最近有一个项目,需要同时控制 4 个声卡播放不同的声音,声音文件很简单就是没有任何压缩的 wav 文件. 如果只是播放 wav 文件, ...

  3. AVAudioPlayer播放在线音频文件

    AVAudioPlayer播放在线音频文件 一:原里: AVAudioPlayer是不支持播放在线音频的,但是AVAudioPlayer有一个 initWithData的方法:我们可以把在线音频转换为 ...

  4. Windows实现桌面录屏、指定窗口录制直播,低延时,H5页面播放

    接着前面记录的3种方式实现桌面推流直播: 1.Windows 11实现录屏直播,搭建Nginx的rtmp服务 的方式需要依赖与Flash插件,使用场景有限 2.Windows 11实现直播,VLC超简 ...

  5. Android使用WebView加载H5页面播放视频音频,退出后还在播放问题解决

    Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...

  6. 使用WaveOut API播放WAV音频文件(解决卡顿)

    虽然waveout已经过时,但是其api简单,有些时候也还是需要用到. 其实还是自己上msdn查阅相应api最靠谱,waveout也有提供暂停.设置音量等接口的,这里给个链接,需要的可以自己查找: h ...

  7. H5播放需要解密的m3u8音频文件

    <audio ref="audio"></audio> import CryptoJS from "crypto-js"; import ...

  8. 移动端h5 实现多个音频播放

    前一段时间做到一个项目,其中用到很多之前没用过的东西,其中一个就是h5的多音频实现,背景音频和说话同时播放,其中出现了很多问题,不过总算找到了解决方案. 平时做H5如果只有一个音乐的话就直接在页面里面 ...

  9. 多浏览器播放wav格式的音频文件

    html5的audio标签只在火狐下支持wav格式的音频播放,无法兼容IE和google , 使用audioplayer.js 基本上能支持大部分浏览器播放wav音频文件,经测试IE.火狐.googl ...

随机推荐

  1. Mybatis学习之自定义持久层框架(七) 自定义持久层框架优化

    前言 接上文,这里只是出于强迫症,凭借着半年前的笔记来把之前没写完的文章写完,这里是最后一篇了. 前面自定义的持久层框架存在的问题 Dao层若使用实现类,会存在代码重复,整个操作的过程模版重复(加载配 ...

  2. UA: Literally Vulnerable靶机

    前言 略有点虎头蛇尾.主要有一步没想通. web打点 nmap -sP 192.168.218.0/24 #发现主机IP 192.168.218.138 #端口扫描 nmap -sV -p- 192. ...

  3. Azure Storage 利用 azCopy 复制迁移数据

    一,引言 前两天遇到了Azure Blob Storage 需要迁移到另外的一个 Azure Blob Storage 中.手动下载.上传已经无法满足了,得另寻一种方式了 AzCopy.Azure 为 ...

  4. readdir_r()读取目录内容

    readdir()在多线程操作中不安全,Linux提供了readdir_r()实现多线程读取目录内容操作. #include <stdio.h> #include <stdlib.h ...

  5. 『政善治』Postman工具 — 12、Postman中实现数据驱动

    目录 1.什么是数据驱动? 2.测试集说明 3.创建请求与准备数据文件 (1)新增学院结果文档内容如下 (2)编写数据文件 (3)在Postman中创建请求 4.实现Postman中的数据驱动 步骤1 ...

  6. make: g77: Command not found 修改Makefile.in中的编译文件中的g77为gfortran

    make: g77: Command not found 编译cblas时报错,这时,修改Makefile.in中的编译文件中的g77为gfortran

  7. ARP欺骗-断网小技巧

    警告:请勿用于非法用途,后果自负! 环境: 攻击方: Kali Linux 被攻击方: Windows XP 二者在同一局域网下 步骤 1.查看Windows的IP,联网状态 在Windows的cmd ...

  8. Redis I/O 多路复用技术原理

    引言 Redis 是一个单线程却性能非常好的内存数据库, 主要用来作为缓存系统. Redis 采用网络 I/O 多路复用技术来保证在多个连接时,系统的高吞吐量(TPS). 系统吞吐量(TPS)指的是系 ...

  9. 技术干货 | 如何在 Library 中使用/依赖 mPaaS?

    使用场景 在使用 mPaaS 框架过程中,有时需要复用模块.复用时需要按照使用 Module 依赖的方式添加模块.本文以将复用 mPaaS 扫码组件的 Module 为例进行说明. 前提条件 已按照原 ...

  10. 安装篇--xshell评估过期解决方法

    打开XSHELL6(以自身版本为准,没有版本限制),弹出如上提示框,解决如下: 1.点击取消,不用卸载原来的,直接进入官网下载安装免费授权的https://www.netsarang.com/ 2.点 ...