在H5页面播放m3u8音频文件

chicidol 2021-06-17

栏目: nginx ·

来源: chicidol

作者:chicidol

简介  这篇文章主要介绍了在H5页面播放m3u8音频文件以及相关的经验技巧,文章约737字,浏览量156,点赞数4,值得参考!

需要使用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)
          });
        }
    }
}          

  


以上就是本文的全部内容,希望对大家的学习有所帮助,本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 原文地址:https://www.cnblogs.com/chicidol/p/14894272.html

相关文章

Html5之高级-5 HTML5音频处理(在H5中播放音频、编程实现音频播放器)(示例代码)

H5 音频(示例代码)

h5音频和视频解决方案(示例代码)

H5基础篇--HTML5 audio与video标签实现视频播放,音频播放(示例代码)

H5基础篇--HTML5 audio与video标签实现视频播放,音频播放(示例代码)

ios微信h5音频audio无法自动播放(示例代码)

那些H5用到的技术(2)——音频和视频播放

H5音频处理的一些小知识