想用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在手機中就可以看到效果了

如果覺得寫的不錯，可以打賞哦，您的支援是我一直努力的動力！