需要使用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-Plus01 快速开始

    Mybatis-Plus虽然官网上有一个快速开始,但是实际操作有点问题,所以,自己写了一个. 版本说明 如果用其他软件版本可能会有部分差异 mybatis-plus:3.4.0 之前我是使用的是3.0 ...

  2. 简单说几个MySQL高频面试题

    前言: 在各类技术岗位面试中,似乎 MySQL 相关问题经常被问到.无论你面试开发岗位或运维岗位,总会问几道数据库问题.经常有小伙伴私信我,询问如何应对 MySQL 面试题.其实很多面试题都是大同小异 ...

  3. ubuntu中执行可执行文件时报错“没有那个文件或目录”的解决办法(非权限问题)

    问题:可执行文件明明存在,也有可执行权限(x),但执行时就提示"没有那个文件或目录". 原因:这个程序的是32位的程序(比如arm-linux-gcc),而系统是64位的,运行时需 ...

  4. 字符串 前 L的含义

    转自http://blog.csdn.net/whz_zb/article/details/7446901 一. 在字符串前加一个L作用: unicode字符集是两个字节组成的.L告示编译器使用两个字 ...

  5. 获取CPU频率

    #include <stdio.h> #include <string.h> float get_cpu_clock_speed() { FILE *fp; char buff ...

  6. 16.分类和static

    1.案例驱动模式 1.1案例驱动模式概述 (理解) 通过我们已掌握的知识点,先实现一个案例,然后找出这个案例中,存在的一些问题,在通过新知识点解决问题 1.2案例驱动模式的好处 (理解) 解决重复代码 ...

  7. 【CentOS_7】使用tcpdump抓明文包

    tcpdump port 12345 -X -X:以十六进制与ASCII方式输出,用于抓取http等明文传输协议 tcpdump功能强大,更多参数可以参考  https://www.cnblogs.c ...

  8. commit信息修改

    场景:向社区提交commit信息,code reviewer给你回复说,请添加TrivialFix并且完善commit信息.好吧,虽然这对代码的运行无关紧要,但是对于日后的代码管理是很有必要的. 解决 ...

  9. Fedora镜像下载地址

    Fedora镜像下载地址 Fedora 7核心源码包在: http://archives.fedoraproject.org/pub/archive/fedora/linux/releases/7/F ...

  10. C++知识点案例 笔记-4

    1.纯虚函数 2.抽象类 3.内部类 4.运算符重载 5.类的函数重载 6.友元的函数重载 1.纯虚函数 ==纯虚函数== //有时基类中无法给出函数的具体体现,定义纯虚函数可以为派生函数保留一个函数 ...