我正在尝试使用本地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限制,没有直接方法可以做到,但是我在这里找到了解决方法
因此,上述代码中的代码更改为:
<!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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句