需要使用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. .NET Core with 微服务 - 什么是微服务

    微服务是这几年最流行的架构,说起架构不提微服务都不好意思跟人家打招呼.最近想要再梳理一下关于微服务的知识,并且结合本人的一些实践经验来做一些总结与分享.前面会分享一些概念性的东西,后面也会使用.net ...

  2. unbuntu下清理磁盘空间

    把很多大文件删除,并清空回收站后,发现可用存储空间并没增大,如图: 用find /home -size +500k 过滤出大于500k bytes的文件,发现原来删除的yuv文件都被置于.cache目 ...

  3. 1Spring注入小结

    Spring注入小结 (在Application.xml中) Spring学习笔记 周芋杉2021/5/14 1.基本注入类型注入 注入前的准备 <bean id="#配置文件的唯一标 ...

  4. mysqldMY-010457] [Server] --initialize specified but the data directory has files in it. Aborting. 2020-12

    删除mysql的/var/lib/mysql目录下的所有文件 https://blog.csdn.net/tr1912/article/details/81271851 # mysqld --init ...

  5. 置的测试文件的大小一定要大过你的内存(最佳为内存的两倍大小),不然linux会给你的读写的内容进行缓存,会使数值非常不准确。

    使用iozone测试磁盘性能   IOzone是一个文件系统测试基准工具.可以测试不同的操作系统中文件系统的读写性能.可以通过 write, re-write, read, re-read, rand ...

  6. Yarn 集群环境 HA 搭建

    环境准备 确保主机搭建 HDFS HA 运行环境 步骤一:修改 mapred-site.xml 配置文件 [root@node-01 ~]# cd /root/apps/hadoop-3.2.1/et ...

  7. CSS 重置技术

    元素默认样式显示问题 每个浏览器对不同元素都有自己的默认样式.Google Chrome 渲染正文标题.段落.列表等,与 IE 浏览器可能都有所不同.这就导致同一个页面元素在不同的浏览器中显示效果不一 ...

  8. S8 Linux磁盘与文件系统管理命令

    8.1 fdisk:磁盘分区工具 8.2-3 partprobe.tune2fs 8.4 parted:磁盘分区工具 8.5-7 mkfs.dumpe2fs.resize2fs 8.8-9 fsck. ...

  9. /usr/bin/docker-current: Error response from daemon: oci runtime error: container_linux.go:247: starting container process caused "process_linux.go:245: running exec setns .....

    docker创建容器时报错如下: containerd: start container" error="oci runtime error: container_linux.go ...

  10. Arduino+AS608指纹锁避坑记

    Arduino+AS608指纹锁避坑记 .title { text-align: center; margin-bottom: 0.2em } .subtitle { text-align: cent ...