<template>
  <a-card>
      <a-input class="input" placeholder="请输入播放地址" v-model="videoUrl"></a-input>
      <a-button class="input" type="primary" @click="play">初始化播放</a-button>
      <div id="mui-player"></div>
  </a-card>
</template>

<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import Hls from 'hls.js'
export default {
    name:'radio',
    components:[
        
    ],
    data(){
        return{
            videoUrl:"",
        }
    },
    mounted(){
        let mp = new MuiPlayer({
            container:"#mui-player",
            height:"400px"
        })
        // let mp = new MuiPlayer({
        //     container:"#mui-player",
        //     title:'Video',
        //     src:"",
        //     live:true,
        //     parse:{
        //         type:'hls',
        //         loader:Hls,
        //         config:{
        //             debug:false
        //         }
        //     }
        // })
    },
    methods:{
        play(){
            if(this.videoUrl != ""){
                let mp = new MuiPlayer({
                    container:"#mui-player",
                    title:"Video",
                    src:this.videoUrl,
                    live:true,
                    autoplay:true,
                    parse:{
                        type:"hls",
                        loader:Hls,
                        config:{
                            debug:false
                        }
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
    @import '~@assets/less/common.less';
    .input{
        margin-bottom: 2%;
    }
</style>