无法在IOS Safari中使用html5 <video>标签一起播放两个LIVE hls流

Xaovnumwsercy

我正在尝试使用本地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。

Xaovnumwsercy

不确定是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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用AV Player播放AES加密的hls流-iOS Swift

来自分类Dev

实时音频HLS流无法播放

来自分类Dev

无法在Android中投放HLS Live流

来自分类Dev

HTML5音频播放器无法在Safari或IE上与jQuery一起使用

来自分类Dev

HTML5音频播放器无法在Safari或IE上与jQuery一起使用

来自分类Dev

HTML5 <video>标签:没有Flash的RTMP流?

来自分类Dev

两个OnEdit函数无法一起使用

来自分类Dev

HTML5- Safari无法播放或识别<video>

来自分类Dev

在Android上使用Google Exoplayer播放HLS流时出错

来自分类Dev

在iOS Safari中同时播放两个HTML5视频

来自分类Dev

HTML5视频无法在Safari中使用

来自分类Dev

加载后如何一起自动播放两个HTML5视频?

来自分类Dev

视频无法在HTML <video>标签中播放

来自分类Dev

使用HLS的Android视频流

来自分类Dev

使用节点JS的HLS流

来自分类Dev

带有ac3音频的HLS流无法在Chromecast上使用

来自分类Dev

如何使用包括主播放列表的FFmpeg将一个输入文件编码为多个HLS流

来自分类Dev

HLS流无法在Apple设备上运行

来自分类Dev

自适应HLS流-Flutter video_player

来自分类Dev

DataTables TableTools无法与两个表一起使用

来自分类Dev

我无法让 OnClickListeners 与包含两个不同片段的 Android 活动一起使用

来自分类Dev

让两个应用程序的用户使用播放服务一起播放

来自分类Dev

HTML5视频背景无法在iPhone上播放Safari

来自分类Dev

HLS视频流自动播放Iphone

来自分类Dev

Video.js HTML5播放器可以播放m3u8播放列表(HLS)吗?

来自分类Dev

计算机上文件中的视频未与<video> HTML5一起播放

来自分类Dev

HTML5 Video&Source标签

来自分类Dev

iOS 7 Safari:jwplayer不发送cookie来加载m3u8文件(加密的hls流)

来自分类Dev

一线创建HLS流

Related 相关文章

热门标签

归档