Ionic做直播-播放m3u8格式如此简单

想用ionic做直播，尝试了videogular2这个库，播放mp4没问题，但是播放m3u8这样的直播协议的地址就完了，经过尝试居然发现用HTML5的video标签就可以实现，绕了这么远的路，原来实现播放m3u8居然可以如此的简单。 

第一步：在html文件中添加如下的代码

<video id="vidioID" preload="auto" autoplay="autoplay">
<source [src]="strUrl" type="video/mp4"/>
</video>

第二步：在ts文件中添加如下的代码

export class HomePage {
strUrl:string;
medio:HTMLElement;

constructor(public navCtrl: NavController) {
this.strUrl = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'
}

ionViewDidEnter(){
this.medio = document.getElementById("vidioID");
//在这里就可以添加相应的代码对medio进行控制了
}
}

第三步：在scss文件中添加如下的代码

page-home {
video{
background-color: #000;//因为有两个白边，所以更改此背景
width:100%;
height:100%;
}
}

第四步：打包成APK在手机中就可以看到效果了

 如果觉得写的不错，可以打赏哦，您的支持是我一直努力的动力！