The javascript code that Brightcove provides for the video is very inefficient. It would be great to only load the video javascript as the video comes in to view to help with page load speeds.

This change adds:

  1. A placeholder element. The height is calculated by determining the ratio of the video and then uses CSS padding to fill it out. A SVG "play" button has been added to the template so there is visual indicator a video will be coming.
  2. Player.js is attached with a new library. This uses intersection observer to load in the brightcove JS for each video as it comes in to view.
    mutation observer is used to remove the placeholder when the video-js element is changed by the brightcove js.

Issue fork brightcove-3394599

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

paulsheldrake created an issue. See original summary.

paulsheldrake opened merge request !24

paulsheldrake’s picture

paulsheldrake commented
Issue summary: View changes
paulsheldrake’s picture

paulsheldrake commented

I believe this patch is ready to go now after some further on-site testing

yce’s picture

yce commented
Status: Active » Closed (works as designed)

Hi,

The theming of the displays should be the task of who integrates the module into a project.

The default templates are representing the official embed code from the Brightcove studio and as such should be good enough to get started. I would rather not deviate from that.

The templates can be overridden by a custom theme.

rpayanm made their first commit to this issue’s fork.

rpayanm opened merge request !28