在H5页面播放m3u8音频文件
需要使用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音频文件的更多相关文章
- iOS从零开始学习直播之音频1.播放本地音频文件
现在直播越来越火,俨然已经成为了下一个红海.作为一个资深码农(我只喜欢这样称呼自己,不喜欢别人这样称呼我),我必须赶上时代的潮流,开始研究视频直播.发现视屏直播类的文章上来就讲拉流.推流.采集.美 ...
- 用 Qt 的 QAudioOutput 类播放 WAV 音频文件
用 Qt 的 QAudioOutput 类播放 WAV 音频文件 最近有一个项目,需要同时控制 4 个声卡播放不同的声音,声音文件很简单就是没有任何压缩的 wav 文件. 如果只是播放 wav 文件, ...
- AVAudioPlayer播放在线音频文件
AVAudioPlayer播放在线音频文件 一:原里: AVAudioPlayer是不支持播放在线音频的,但是AVAudioPlayer有一个 initWithData的方法:我们可以把在线音频转换为 ...
- Windows实现桌面录屏、指定窗口录制直播,低延时,H5页面播放
接着前面记录的3种方式实现桌面推流直播: 1.Windows 11实现录屏直播,搭建Nginx的rtmp服务 的方式需要依赖与Flash插件,使用场景有限 2.Windows 11实现直播,VLC超简 ...
- Android使用WebView加载H5页面播放视频音频,退出后还在播放问题解决
Android中经常会使用到WebView来加载H5的页面,如果H5页面中有音频或者视频的播放时,还没播放完就退出界面,这个时候会发现音频或者视频还在后台播放,这就有点一脸懵逼了,下面是解决方案: 方 ...
- 使用WaveOut API播放WAV音频文件(解决卡顿)
虽然waveout已经过时,但是其api简单,有些时候也还是需要用到. 其实还是自己上msdn查阅相应api最靠谱,waveout也有提供暂停.设置音量等接口的,这里给个链接,需要的可以自己查找: h ...
- H5播放需要解密的m3u8音频文件
<audio ref="audio"></audio> import CryptoJS from "crypto-js"; import ...
- 移动端h5 实现多个音频播放
前一段时间做到一个项目,其中用到很多之前没用过的东西,其中一个就是h5的多音频实现,背景音频和说话同时播放,其中出现了很多问题,不过总算找到了解决方案. 平时做H5如果只有一个音乐的话就直接在页面里面 ...
- 多浏览器播放wav格式的音频文件
html5的audio标签只在火狐下支持wav格式的音频播放,无法兼容IE和google , 使用audioplayer.js 基本上能支持大部分浏览器播放wav音频文件,经测试IE.火狐.googl ...
随机推荐
- 一个或多个listeners启动失败,更多详细信息查看对应的容器日志文件
碰到这个问题很多次,每次碰到都是去百度找.但是,不尽人意,好在最后还是解决了,所以写下总结. 报错内容: org.apache.catalina.core.StandardContext.startI ...
- JDBC往数据库里插入数据
首先还是一个工具类 插入数据
- 全套office版本安装教程及下载地址
1:office 2003 安装教程及下载地址 https://mp.weixin.qq.com/s/HHGFdiLgL-xhDAAlox2axw 2:office 2007 安装教程及下载地址 ht ...
- InnoDB解决幻读的方案——LBCC&MVCC
最近要在公司内做一次技术分享,思来想去不知道该分享些什么,最后在朋友的提示下,准备分享一下MySQL的InnoDB引擎下的事务幻读问题与解决方案--LBCC&MVCC.经过好几天的熬夜通宵,终 ...
- IO异步,读写压缩文件,监控文件系统
这节结尾IO,讲一下异步操作文件,读写压缩文件,监控文件系统这三个知识点. 异步操作文件: 说到异步,必然要了解的是async和await这两个关键字(异步详情点击基于任务的异步编程(Task ...
- 【Azure Redis 缓存】Azure Cache for Redis服务中,除开放端口6379,6380外,对13000,13001,15000,15001 为什么也是开放的呢?
问题描述 在使用安全检测工具对Azure Redis服务端口进行扫描时,发现Redis对外开放了13001, 13000,15000,15001端口.非常不理解的是,在门户上只开放了6379,6380 ...
- mitmproxy 获取请求响应数据
比较好的一个介绍是:https://blog.wolfogre.com/posts/usage-of-mitmproxy/ mitproxy 获取请求响应数据的代码如下: # -*- coding: ...
- [bug] idea编译后没有xml文件
原因 在maven中build 参考 https://www.cnblogs.com/lewskay/p/6422464.html https://blog.csdn.net/lovequanquqn ...
- 网速测试利器-iperf3
网速测试利器-iperf3 使用工具 简介 iperf3是一个网络速度测试工具,支持IPv4与IPv6,支持TCP.UDP.SCTP传输协议,可在Windows.Mac OS X.Linux.Fr ...
- Linux中find命令用法全汇总,看完就没有不会用的!
Linux中find命令用法全汇总,看完就没有不会用的! 中琦2513 马哥Linux运维 2017-04-10 糖豆贴心提醒,本文阅读时间7分钟 Linux 查找命令是Linux系统中最重要和最 ...