在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.attachMedia(this.$refs.audio);

          hls.on(Hls.Events.MEDIA_ATTACHED, ()=> {
            hls.loadSource('https://s.music.com/s/000000000/000_00000.m3u8');// 传入路径        
            hls.on(Hls.Events.MANIFEST_PARSED, () => {//加载成功
                this.$refs.audio.play();// 调用播放 API
            });
          })
        } else if (this.$refs.audio.canPlayType('application/vnd.apple.mpegurl')) {

          this.$refs.audio.src = 'https://s.music.com/s/000000000/000_00000.m3u8'

          this.$refs.audio.addEventListener('loadedmetadata', () =>{

            this.$refs.audio.play()

          });
        }
    } 
}
posted @ 2021-06-17 16:54  chicidol  阅读(2037)  评论(0)    收藏  举报