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调用返回的值生成的。在api中，它返回视频网址（stream_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调用中提取的。这里第一个播放器只播放视频，其余播放器没有播放。这个解决方案是什么？

Answer 1

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

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

多个视频js播放器无法正常工作

1 个答案: