问题描述
我正在尝试使用本机hls支持在IOS Safari上并排播放两个实时hls流（因为它们现在不支持MSE）。下面是代码：
<div style="display: flex; flex-direction:row">
<video autoplay controls style="width:50%" id="primary"></video>
<video autoplay controls style="width:50%" id="secondary"></video>
<div>
<script>
var primary = document.getElementById("clickPlay");
var secondary = document.getElementById("secondary");
var videoSrc = '*SOME LIVE STREAM-1.m3u8*';
var secvideoSrc = "*SOME LIVE STREAM-2.m3u8*";
if (primary.canPlayType('application/vnd.apple.mpegurl')) {
primary.src = videoSrc;
primary.addEventListener('loadedmetadata',function() {
primary.play();
});
secondary.src = secvideoSrc;
secondary.addEventListener('loadedmetadata',function() {
secondary.play();
});
} else{
alert("no native hls support boys")
}
</script>
现在的问题是，其中一个同时播放，其他停靠点，我无法同时播放两个。
这是一个限制吗？有什么办法可以在IOS中并排播放两个LIVE HLS流？
请注意，这些hls流是实时播放的，而不是VOD，并且我需要一起播放它们，并且我只需要使用html5播放器，而不是flash。
解决方法
不确定是Bug还是IOS限制，没有直接的方法来实现，但是有一种解决方法，我发现here
因此上述代码中的代码更改为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body style="margin: 0;padding: 0;">
<button onclick="doit();">doit</button>
<div style="display: flex; flex-direction:row">
<video webkit-playsinline muted playsinline style="outline: 1px solid green; width:50%" id="primary"></video>
<video webkit-playsinline muted playsinline style="outline: 1px solid red; width:50%" id="secondary"></video>
<audio style="outline: 1px solid green; width:50%; display: none !important;" id="primaryA"></audio>
<audio style="outline: 1px solid red; width:50%; display: none !important;" id="secondaryA"></video>
<div>
<script>
var primary = document.getElementById("primary");
var secondary = document.getElementById("secondary");
var primaryA = document.getElementById("primaryA");
var secondaryA = document.getElementById("secondaryA");
var videoSrc = "some-url1.m3u8"
var secvideoSrc = "some-url2.m3u8";
primary.src = videoSrc;
primaryA.src = videoSrc;
secondary.src = secvideoSrc;
secondaryA.src = secvideoSrc;
var vids = document.querySelectorAll("video");
var auds = document.querySelectorAll("audio");
setTimeout(() => {
vids.forEach(function(vid) {
vid.removeAttribute("controls");
vid.removeAttribute("autoplay");
vid.addEventListener('click',function(e) {
this.currentTime = 0;
this.play();
});
});
});
var doit = function () {
vids.forEach(function(vid) {
vid.currentTime = 0;
vid.play();
});
auds.forEach(function(aud) {
aud.currentTime = 0;
aud.play();
});
}
</script>
</body>
</html>
依赖报错 idea导入项目后依赖报错，解决方案：https://blog....
错误1：gradle项目控制台输出为乱码 # 解决方案：https://bl...