Improvements to the Video Card

Bugs
1

Hey all,

I’ve just tried out the new video card on a blog post. Works really great, nice to be able to drop a video straight onto the page and get working.

However I was wondering if there’s some performance improvements to be made with how the video is setup with HTML and JavaScript? I’m using Ghost as a headless CMS, which means I’ve basically opted out of the custom controls and presentation that comes with the video card. I’m ok with that part, it’s the extra HTML that I’m unsure about. Not only do I need to hide a bunch of HTML that’s not being used, but I also need to re-enable the default video controls with the controls attribute.

I was wondering that instead of all this custom HTML coming down the line it should be added using the same JavaScript that controls the video when the buttons are interacted with? In addition the JavaScript could remove the controls attribute and prep the video element for your custom controls. I don’t think there would be a massive performance hit, if anything it would be more progressively enhanced as if the JavaScript didn’t run the default video element and controls would be there in their place.

The “loop” option may not even need that HTML as it just loops automatically, all the JavaScript would do there is possibly remove the controls attribute incase someone is using the page deliberately without JS.

I’ve put this into the contributing category as I’m kinda accepting that I may have to get my hands dirty with code, but I’d also like feedback on this idea before making any code changes. For reference I’m guessing all the video code is here?

Anywho thanks for reading! :v:

2 Likes
2

Coming back to this with some very simple pseudo code:

const setupTemplate = function (videoElementContainer) {
  const videoControlsTemplate = `
<div class="kg-video-overlay">
  <button class="kg-video-large-play-icon">Play</button>
</div>
<div class="kg-video-player-container kg-video-hide">
  <div class="kg-video-player">
    <button class="kg-video-play-icon">Play</button>
    <input type="range" class="kg-video-volume-slider" max="100" value="100" />
  </div>
</div>
`;

  const videoContainer = videoElementContainer.querySelector(
    ".kg-video-container"
  );

  videoContainer.innerHTML = videoContainer.innerHTML + videoControlsTemplate;
};

I’ve removed the SVG code to keep the code sample brief. I did try to put this together with the existing code but didn’t get as far as I need to effectively turn it into a promise so this will get applied before the rest. I still think this is a good idea as loading these controls without JavaScript could be misleading. Better to provide the default video element to people if the JavaScript fails.

1 Like
3

Update: This is how the video card looks when shown inside an RSS app.

Screenshot 2022-10-28 at 18.13.43
Screenshot 2022-10-28 at 18.13.431460×1222 7.27 KB

I thought it might be my own custom Jamstack setup but this is a video from the official Ghost Changelog feed. I really think it would be beneficial if the custom video controls were loaded in as part of the client-side JavaScript. Doing so would eliminate this broken experience and follow progressive enhancement more elegantly.

2 Likes
4

Update: This is how the video card looks when shown inside an AMP page.

Screenshot 2023-06-28 at 14.11.55
Screenshot 2023-06-28 at 14.11.551190×516 13.2 KB

I’ll admit that AMP is far less popular than it was, however it is surfaced by many of the popular networks. For example this video card I saw in an official Ghost changelog post that had been shared from the official Ghost LinkedIn account. I believe LinkedIn will lift the AMP version out of the page if there’s one. It’s the same for certain Google results, the AMP article counterpart will get surfaced.

I really think the video card should be redone so that it’s a regular <video> element out of the box with enhancements via client-side JavaScript.

5

Running into this issue also. Ended up just managing videos with the HTML block. It sucks, because you cant see a preview within your article, but it is much better than the disaster output in RSS.

1 Like
6

You’re running headless so I don’t know if it is is a viable option but I’ve replaced the video card with custom HTML/javascript. It loads the poster image initially, no js or cookies.

When a visitor clicks play the youtube player embed is loaded with js, 37 cookies and the video stream.

To embed a YouTube video you only need a custom HTML card with the clip ID…

<div class="youtube-player" data-id="sXiRZhDEo8A"></div>

Instructions and live demo here

Happy to help with any questions…
/m

2 Likes
7

Nice solution! Yea, there’s plenty of methods I could think of, but ideally I’d like the video card to work a little more elegantly than it does right now. Seems a bit poor to have a video card, designed for videos, not to elegantly handle videos in all formats.

1 Like
8

Agree, have been working with streaming media / video for 20+ years and it is hell on earth.
Codecs… AV1 - AVC - H.264 - VP6. Containers: .webm / .mkv / MP4… and then the mobile players.

Since Ghost relies on the browsers capability they are … unpredictable… we do not transcode to a “this will work on most devices” bitrate ladder. I’m using BunnyCDN for video transcode and delivery and it works like a dream.

2 Likes
9

I didn’t know about Bunny, thanks. Looks excellent value in all departments :blush:

1 Like
10

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.