angular5解决chrome等浏览器不能播放.m3u8视频流

最新推荐文章于 2024-06-24 09:35:11 发布

艹民一G

最新推荐文章于 2024-06-24 09:35:11 发布

阅读量1.9k

点赞数

分类专栏： angular 文章标签： chrome播放hls视频 chrome播放.u3m8视频

本文链接：https://blog.csdn.net/qq_29532651/article/details/91982041

版权

angular 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.安装video.js : npm install --save video.js

安装videojs-contrib-hls.js: npm install --save video.js

2.在.angular-cli.json的script标签中引入这两个依赖包

3.在typings.d.ts中声明： declare var videojs: any;

  <video #examplevideo class="video-js" autoplay="autoplay" controls preload="auto"
         width="100%" height="100%" >
    <source src="https://yunqivedio.alicdn.com/2017yq/v2/0x0/96d79d3f5400514a6883869399708e11/96d79d3f5400514a6883869399708e11.m3u8" type="application/x-mpegURL">
  </video>

@ViewChild('examplevideo') examplevideo: ElementRef;

ngOnInit() {
    const that = this;
    window.onload = function() {
      let player = videojs(that.examplevideo.nativeElement);
      player.play();
    };
  }