多个视频js播放器不工作

Question

当我在同一个页面中添加多个视频播放器时，我遇到了一个视频js的问题。js代码如下。

 <script>
var stream_url = $(this).attr('data-stream'); wiFetchBroadcast(entryId); player = videojs('wiPlayer'); player.src({ src: stream_url , type: "application/x-mpegURL", useCueTags: true }); window.onOrientation(player,   'wiPlayer'); player.play();

​

视频html如下所示:这里的播放器div是根据我的项目中使用的api调用返回的值生成的。在接口中，它返回视频url (stream_url )，我直接将该url赋值给js。

<?php foreach($posts->content as $entry) { ?> <div class="col-md-3" data-scrollreveal="enter 0.2s after 0.03s">        
 <a class="popup-with-zoom-anim wiplay"  href="#small-dialog" data-detail-id="<?=$entry->id?>" data-stream="http://54.255.142.187:5080/live/finaltesthari.m3u8<?php //stream_url($entry->streamName);?>">
 <div class="post-holder wow zoomIn animated" data-wow-duration=".5s" style="visibility: visible; animation-duration:.5s; animation-name: zoomIn;">
            <div class="post-img img-full">
          <img src="<?=$entry->screenShotUrl;?>" class="img-responsive" alt="<?=$entry->name;?>"> 
             </div>
            <div class="post-overlay" onmouseover="wiPlayInitThumbPlay()" >
                <div class="overlya-content">                    
                   <div class="video-thumbnail">                       
                       <video id="wiPlayer" width=700 height=250 class="video-js vjs-default-skin" controls autoplay 
                       data-setup='{"techOrder":["html5", "flash"],"autoplay": true, "preload": "auto", "loop": "true","width": 960,"height":250}'></video> </div><div class="tag" id="<?=$entry->channelName;?>">#<?=$entry->channelName;?></div>
                    <div class="hash">#trump #uselection16</div>
                    <div class="content"><span><?=$entry->name;?></span></div>
                    <div class="aurthor">By <?=$entry->userHandle;?> </div>
                    <div class="stats">
                        <span><?=$entry->likes;?> Likes</span>
                        <span><?=$entry->views;?> views</span>
                        <div class="live"><?=$entry->status;?></div>
                    </div>
                </div>
            </div>
        </div>
     </a>

​

在上面的循环代码中，我将获得至少4个玩家，它是从api调用中拉出的。这里的第一个播放器只播放视频，其余的都不是playing.Any的解决方案吗？

Answer 1

您的循环似乎为每个视频元素提供了相同的id属性。这是无效的HTML。尝试直接或通过videojs引用该id将仅引用一个实例。

由于您的条目似乎具有id，并且假设这些id是唯一的，因此一种选择可能是将其包含在id中，例如<video id="wiPlayer<?=$entry->id?> width...