前端視頻播放插件 videojs

以 angular 為例：

安裝videojs npm install video.js --save npm install videojs-flash --save

在 angular.json 中引入 "styles": [ "src/styles.less", "node_modules/video.js/dist/video-js.min.css" ], "scripts": [ "node_modules/video.js/dist/video.js", "node_modules/video.js/dist/lang/zh-CN.js", "src/assets/js/videojs-contrib-hls.min.js" ]

 HLS庫:videojs-contrib-hls, 下載JS直接引入使用

https://github.com/videojs/videojs-contrib-hls

　

使用 <video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%;" controls preload="auto"  data-setup='{}'>    
    <source id="source" [src]="safeRtmpUrl"  type="application/x-mpegURL">
</video>



// 在完成以上的代碼編寫后，需要注意的幾個問題： 由於angular的安全機制問題，導致在組件component中引入外部的url視頻資源會發生安全檢測不通過的問題， 故這里在app.component.ts中還需要進行DomSanitizer服務的引入，來告知我們使用的RTMP流的特定鏈接是安全的. transformRtmpurl() { console.log(this.option.data.url) // 視頻地址 this.safeRtmpUrl = this.sanitizer.bypassSecurityTrustUrl(this.option.data.url) console.log(this.safeRtmpUrl) } initVideo() { // videojs.options.flash.swf = '../../../../../assets/videojs-assets/video-js.swf' // var player = videojs(this.videoEleId) //my-player為頁面video元素的id // player.play() //播放
    
        this.player = videojs( 'my-player', // 'my-player',
 { language: 'zh-CN', // width: '1000', // height: '600', // poster: '', // controls: true, // autoplay: false, // techOrder: ['html5', 'flash'], // loop: false, // muted: false, // preload: 'metadata', // poster: this.poster || '',
 }, function onPlayerReady() { var myPlayer = this
            this.play() //在回調函數中，this代表當前播放器， //可以調用方法，也可以綁定事件。
            /** * 事件events 綁定事件用on 移除事件用off */
            this.on('suspend', function () { //延遲下載
              console.log('延遲下載') }) this.on('loadstart', function () { //客戶端開始請求數據
              console.log('客戶端開始請求數據') }) this.on('progress', function () { //客戶端正在請求數據
              console.log('客戶端正在請求數據') }) this.on('abort', function () { //客戶端主動終止下載（不是因為錯誤引起）
              console.log('客戶端主動終止下載') }) this.on('error', function () { //請求數據時遇到錯誤
              console.log('請求數據時遇到錯誤') }) this.on('stalled', function () { //網速失速
              console.log('網速失速') }) this.on('play', function () { //開始播放
              console.log('開始播放') }) this.on('pause', function () { //暫停
              console.log('暫停') }) this.on('loadedmetadata', function () { //成功獲取資源長度
              console.log('成功獲取資源長度') }) this.on('loadeddata', function () { //渲染播放畫面
              console.log('渲染播放畫面') }) this.on('waiting', function () { //等待數據，並非錯誤
              console.log('等待數據') }) this.on('playing', function () { //開始回放
              console.log('開始回放') }) this.on('canplay', function () { //可以播放，但中途可能因為加載而暫停
              console.log('可以播放，但中途可能因為加載而暫停') }) this.on('canplaythrough', function () { //可以播放，歌曲全部加載完畢
              console.log('可以播放，歌曲全部加載完畢') }) this.on('seeking', function () { //尋找中
              console.log('尋找中') }) this.on('seeked', function () { //尋找完畢
              console.log('尋找完畢') }) this.on('timeupdate', function () { //播放時間改變 // console.log('播放時間改變')
 }) this.on('ended', function () { //播放結束
              console.log('播放結束') }) this.on('ratechange', function () { //播放速率改變 // console.log('播放速率改變')
 }) this.on('durationchange', function () { //資源長度改變 // console.log('資源長度改變')
 }) this.on('volumechange', function () { //音量改變 // console.log('音量改變')
 }) } ) } destroyVideo() { if (this.player != null) { this.player.dispose() this.player = null } }

當前只試過播放  .m3u8 的視頻