html - 如何在 iPhone 中使用 Hls.js 流式传输视频

问题描述

我一直在尝试使用 Hls.js 库流式传输我的相机（返回m3u8），它适用于桌面（windows 和 mac）和 android。但不是在 iPhone 上流式传输，也不是停止流式传输。请在这里帮助我，我的代码如下

HTML 代码

<video #videoTag id="videoId" playsinline controls="controls" poster="{{imageName}}" preload="metadata" width="100%" height="250">
Your browser does not support HTML5 video.
</video>

<div id="video-controller-id" class="video-controller" fx fxLayoutAlign="space-between center">
    <div controls="controls">
         <mat-slide-toggle checked={{isToggle}} (change)="toggle($event)">
             {{cameraStatus}}
         </mat-slide-toggle>
    </div>
    <div fxLayout="row">
         <div fxLayout="row" class="volume">
              <mat-icon matTooltip="{{muteStatus}}" matTooltipHideDelay="500" matTooltipPosition="above" style="cursor: pointer; color: white;" (click)="videoVolume()">
                  {{volume}}</mat-icon>
              <input #volumeSlider class="volume-slider" id="volumeSlider" type="range" min="0" max="100" value="50" step="1" (input)="videoVolumeSlider(volumeSlider.value)">
         </div>
         <div>
              <mat-icon style="cursor: pointer; color: white;" (click)="fullScreen()">fullscreen</mat-icon>
         </div>
    </div>
</div>

打字稿代码

hlsObject
@ViewChild('videoTag') videoTag: ElementRef;
isToggle: boolean = false;
toggle(event: MatSlideToggleChange) {

    if (event.checked) {
        this.stationService.getCameraUrl(this.stationId, "hls").subscribe(
          data => {
            
            var urlData = data as any;

            // here in this URL I'm getting the m3u8 file.
            var url = urlData.url;

            if (Hls.isSupported()) {
              this.hlsObject = new Hls();
              this.hlsObject.attachMedia(this.videoTag.nativeElement);
              this.hlsObject.on(Hls.Events.MEDIA_ATTACHED, function () {
                this.hlsObject.loadSource(url);
                this.hlsObject.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
                });
              });
            }
            console.log("Hey video is attached");
            this.videoTag.nativeElement.play();

        },error => {
          console.log(error);
        });
    }else {
        if (Hls.isSupported()) {
          console.log("Hey now inside else condition");
          // var hls = new Hls();
          this.hlsObject.detachMedia(this.videoTag.nativeElement);
          this.hlsObject.loadSource('');
          this.hlsObject.stopLoad();
          this.hlsObject.on(Hls.Events.DESTROYING, function () {
            console.log("Hls destroy.");
          });
          console.log("hls.stopLoad()");
        }
    }
}

标签： htmlangulartypescriptm3u8hls.js

html - 如何在 iPhone 中使用 Hls.js 流式传输视频

问题描述

解决方案

推荐阅读