여러 비디오 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

같은 것입니다 : 다음 플레이어 사업부는 값이 내 프로젝트에 사용되는 API를 호출에서 반환에 따라 생성된다. API에서 동영상 URL (stream_url)을 반환하고 직접 js에 URL을 할당합니다. 나는 적어도 4 플레이어를 얻을 것이다 루프에서 위의 코드에서

<?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> 

, 그것은 API 호출에서 가져온됩니다. 첫 번째 플레이어는 비디오 만 재생하고 나머지는 재생하지 않습니다. 이에 대한 해결책은 무엇입니까?

Answer 1

루프가 각 동영상 요소에 동일한 id 속성을 제공하는 것처럼 보입니다. 잘못된 HTML입니다. 해당 ID를 직접 또는 videojs를 통해 참조하려고하면 하나의 인스턴스 만 참조하게됩니다.

항목에 대한 ID가 있고 고유 한 것으로 가정 했으므로 한 가지 옵션은 해당 ID에 ID를 포함하는 것일 수 있습니다. <video id="wiPlayer<?=$entry->id?> width...