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

Question

我一直在尝试用Hls.js库流式传输我的相机(返回m3u8(，它可以很好地用于Desktop(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>

TypeScript代码

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()");
}
}
}

Answer 1

Hls.js在iPhone上不受支持：https://github.com/video-dev/hls.js/issues/2367

Answer 2

首先，HLS内置在iPhone中，您可以直接使用HTML5播放器。这应该会让你开始，你需要在Hls上有一个else is Supported if语句。

//<video id="videoId"></video>
var video = document.getElementById('videoId');
function initializeHLS() {
video.removeAttribute('src');
// Set you path to m3u8
var sourceM3u8 = '../../streams/' + selectedSongName + '/' + selectedSongName + '_playlist.m3u8';
///////////////////////////////////////////
// FOR DOCUMENTION OF HLS EVENTS: 
// https://github.com/video-dev/hls.js/blob/master/docs/API.md
///////////////////////////////////////////
if (Hls.isSupported()) {
// Note the video element can be placed anywhere in the html and it is mandatory
// HLS uses the HTML video element to insert the player via API
hls = new Hls();
try {
hls.loadSource(sourceM3u8);
} catch (err) {
// If it gets back and was rejected, here we will console log the error to see what exactly failed
// In your case, the IP address you used failed to load the music. 
console.log('Error Loading Media!!! ' + err);
return false;
}
hls.attachMedia(video);
hls.on(Hls.Events.MEDIA_ATTACHED, function() {
// fired when MediaSource has been succesfully attached to media element
console.log('MEDIA_ATTACHED');
console.log("Hey now inside else condition");
// Enable all Player Controls
//enableAllControls(mediaPlayerContainer);
});
//... your remaining hls events code goes here if needed 
} else {
// You reached here because the device does not support hls.js library
// Check device for iphone or ipad, if found play directly in video element src
// HLS is built into iOS.
var mobileInformation = isMobile().toLowerCase();
if (mobileInformation.includes("iphone") || mobileInformation.includes("ipad")) {
alert("Apple Mobile Device Detected");
video.setAttribute('src', sourceM3u8); // The media starts playing on iphone right here
}
}
}
initializeHLS(); // Call initialize to start
// Whatever method you want to detect device, here is what I use:
function isMobile() {
var check = false;
(function(a) {
if (/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(a.substr(0, 4)))
check = true;
})(navigator.userAgent || navigator.vendor || window.opera);
return navigator.userAgent;
};