Skip to main content

Hi all,

New to using Brightcove so bear with me here. My place of employment currently uses Brightcove to play videos on our site and I’ve been tasked with supporting playlists in this component. I have it mostly working (both videos and playlists work independently, using the default player for the videos and a custom player for playlists) but if they’re on the same page together, the second one to come in looks a little funky. I’ll attach a screenshot of what I’m talking about.

My suspicion is that there’s something in the import scripts that conflicts.

I’m using JSP so here’s what it looks like.

Import Scripts:

<c:choose>
    <c:when test="${empty playerId}">
        <script src="//players.brightcove.net/${accountId}/default_default/index.min.js" defer></script>
    </c:when>
    <c:otherwise>
        <script src="https://players.brightcove.net/${accountId}/${playerId}_default/index.min.js" defer></script>
    </c:otherwise>
</c:choose>

Component:

<%-- Responsive video --%>
<c:if test="${not empty videoId}">
  <h1>Video activated</h1>
  <h1>Padding top: <c:out value="${paddingTop}" /></h1>
  <div class="brightcove__container" style="${widthStyle}">
      <div class="video__wrapper" style="${paddingTop}">
        <video-js
          data-account="${accountId}"
          data-video-id="${videoId}"
          data-player="${playerId}"
          data-embed="default"
          controls=""
          data-application-id=""
          class="vjs-fill">
        </video-js>
      </div>
   </div>
</c:if>

<%-- Responsive playlist --%>
<c:if test="${not empty playlistId}">
  <div class="brightcove__container" style="${widthStyle}">
      <div style="padding-top: 73%">
      	<div class="vjs-playlist-player-container">
            <video-js
              data-account="${accountId}"
              data-playlist-id="${playlistId}"
              data-player="${playerId}"
              data-embed="default"
              controls=""
              data-application-id=""
              class="vjs-fill">
            </video-js>
          </div>
      </div>
   </div>
</c:if>

Summary:

  • Both players (default and custom for playlists) work fine independently
  • If I add a playlist player to a page, then add a video player afterwards, the video player looks funky.
  • If I add a video player to a page, then add a playlist player afterwards, the video player looks funky.
  • This may not be a video/playlist thing but perhaps a default/custom player thing.
  • “defer” keyword in import scripts doesn’t seem to make a difference whether it’s there or not, but it was there before I started working on this piece of our codebase so I’ve left it there.

 

I appreciate any ideas/feedback/context as to what may be happening or how to fix it. Hoping it’s a small thing I’m doing wrong.

Screenshots:

Since the playlist player is the first on the page, it looks fine.
I added the default video player after the playlist on the same page, and we’re missing timestamps. The progress bar isn’t full width, and the play button (not seen here) appears at the top left corner.

 

My plan is to combine the videos and playlists part of the code to reduce the size but for the time being I want to be sure that they can both work fine independently.

Since the player is build on top of the CSS+JS.
 

Then its best to use oEmbed instead. You can create your own wrapper to avoid the CORS issue. 


This solution is to avoid the CSS and/or JS conflict. 

Hi Andy, thanks for your response.

Could you elaborate? I’m currently using this method for embedding.

Also saw this regarding using multiple players on the same page. Not sure if this is the same issue but could this be why this is happening?

Currently I’m using one custom player and one default.

Does the issue still occurs with iFrame embed code?

oEmbed that i mention means, its using your own iframe. Instead of pointing to the players.brightcove.com, its pointing to your own domain.

And inside the iframe is your script with that advance method. 
Hopefully it will solve your issue.

 

The issue does not occur when using iframes. We have to modify some of the elements like controls on the site so we use the advanced integration. I like your approach - would we have to host this advanced integration somewhere to iframe it?

If you don’t have the current host, then you still stick to use the Brightcove iFrame instead. Kindly to take note to test the CORS if you have JS that interact with the parent/main page. 

However, if it’s working when using iframes, then i’m pretty sure there’s CSS/JS conflict. So it’s your call to modify some of the elements, or find the culprits. 

Reply


Terms of UseCookie settings