前端视频播放插件 videojs HLS库:videojs-contrib-hls, 下载JS直接引入使用

以 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"
            ]

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 的视频