2018.12.06更新：
我在直播的優化當中採用了一種拋棄flash播放，直接採用html的video標籤的方案，該方案更加優秀，可以點擊在angular框架下使用flv.js播放http-flv實時流直播視頻進行查看。
正文：
最近公司項目需要在前端播放實時視頻信息，使用海康相機輸出RTSP流後由後臺轉碼爲RTMP流，發送給前端進行實時播放。
前端使用angular進行框架搭建，這裏記錄編寫Demo的過程。
1.建立Angular模板項目；
常規的Angular項目操作，這裏不再贅述。這裏使用的是最新版的Angular框架 —— v6.1.0。
2.安裝videojs
video.js是一個支持HTML5和Flash播放的成熟js庫，其核心思想是對於視頻優先使用HTML5直接播放，如果無法播放再調用Flash播放。
這裏需要說明的是，在video.js升級到6.0.0版本之後，官方在這個庫中移除了對Flash的支持，將Flash的支持分離到一個新的項目中，取名爲videojs-flash，故在這裏還需要引入該庫，包管理代碼如下：
npm install video.js --save
npm install videojs-flash --save
3.業務邏輯編寫
在完成安裝video.js後，需對其進行引入操作，引入有兩種形式：
- 網絡引入
- 本地引入
但無論哪種引入形式，按照videojs官方文檔，結合angular項目，都應該在項目根目錄下的index.html中進行操作。這裏我選擇了本地引入的形式。
index.html:
<html lang="en">
<head>
<meta charset="utf-8">
<title>RtmpVideojs</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="./assets/video.min.js"></script>
<link href="./assets/video-js.min.css" rel="stylesheet">
<script src="./assets/videojs-flash.min.js"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>
這裏直接將video.js的核心代碼文件從包管理文件夾node_modules下提取出來放入了assets文件夾中，當然也可以直接從node_modules文件夾中引用，區別僅僅是路徑不同。
需要注意的是引入順序的問題，videojs-flash需要在video.js之後再引入。
由於是demo程序，故直接在app.component中進行代碼編寫：
app.component.html:
<h1>RTMP-Play</h1>
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="1280px" height="720px"
data-setup="{}" autoplay>
<source [src]="safeUrl" type='rtmp/flv'>
<p class="vjs-no-js">播放視頻需要啓用JavaScript，推薦使用支持HTML5的瀏覽器訪問。
To view this video please enable JavaScript,
and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video</a>
</p>
</video>
這裏使用了HTML5的video標籤，對其中的屬性作如下解釋：
vjs-big-play-centered videojs中的樣式播放按鈕居中
poster 默認的顯示界面，在爲播放之前，播放器中顯示的界面
preload="auto" 是否提前加載
autoplay 自動播放
loop=true 自動循環
data-setup='{"example_option":true}' 把一些設置的屬性寫進來，如data-setup={"autoplay":true}
在完成以上的代碼編寫後，需要注意的幾個問題：
- 由於angular的安全機制問題，導致在組件component中引入外部的url視頻資源會發生安全檢測不通過的問題，故這裏在app.component.ts中還需要進行DomSanitizer服務的引入，來告知我們使用的RTMP流的特定鏈接是安全的，關於DomSanitizer服務，可以參考這裏進行簡要了解。
app.component.ts:
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; // 引入DomSanitizer服務
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
// 該鏈接是香港某電視臺的直播流鏈接，請放心使用
url = 'rtmp://live.hkstv.hk.lxdns.com/live/hks';
safeUrl: any;
constructor(private sanitizer: DomSanitizer) {
this.getUrl(this.url);
}
getUrl(url: string) {
this.safeUrl = this.sanitizer.bypassSecurityTrustUrl(url); // 獲取安全鏈接
}
}
- 瀏覽器去除Flash player是大勢所趨，如果以上demo在運行過程中需要調用flash，臨時啓用即可，我在本地的測試當中，chrome和firefox可以正常運行。
- 由於涉及到了flash，故在移動端的播放中，這個方案不甚理想，在查閱一些資料後，找到了一個移動端的解決方案——百度的開源播放器，音視頻轉碼 MCT，大家有空可以嘗試一下。
初次寫博客，感謝您的閱讀，如有表述不清和錯誤的地方，敬請大家指正，謝謝！