Safari browsers above iOS 14 cannot play m3u8 videos and cannot load .ts files Safari browsers below ios 14 can play
First request the m3u8 file, then request the corresponding decryption key, then perform key replacement and ts resource domain replacement, and then generate base64 and put it in video src.
There is no problem with this operation below ios 14 but not above ios 14
async iosAutoKey(xhr) {
const me = this;
const res = me.addVideoFilePrefix(xhr.response);
let resKey = "";
resKey = await api
.downloadCertificateKeyH5({
videoId: me.videoData.id,
})
.then((resKey) => {
return resKey;
});
let key = new Blob([resKey], {
type: "text/plain",
});
const keyUrl = URL.createObjectURL(key);
let blob = new Blob(
[res.replace(/URI="[\d]{13}"|URI="{REMOTE_KEY}"/, `URI="${keyUrl}"`)],
{
type: "application/vnd.apple.mpegurl",
}
);
let reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function () {
const url = reader.result;
me.arrayBufferMap.set(me.videoData.id, url);
if (Hls.isSupported()) {
me.hlsInstance.loadSource(url);
} else if (isIOS()) {
me.theVideo.src = url;
} else {
me.$dialog.alert({
message: "The current browser does not support playing m3u8, please use the latest version of chrome",
});
}
};
},
addVideoFilePrefix(res) {
let result;
let reg = new RegExp('(http|https)://.+/group');
let prefix = `${this.vipFileSource}/group`;
if (reg.test(res)) {
result = res.replace(/(http|https):\/\/.+\/group/g, prefix);
} else {
result = res.replace(/\/group/g, prefix);
}
return result;
},
Video trigger event below ios 14 enter image description here
Video trigger event above ios 14 enter image description here
m3u8 first load enter image description here
The m3u8 file decrypted on ios 14 cannot load the video, and the .ts file cannot be loaded m3u8 decrypt the requested base64 enter image description here