videojs-playlist-ui icon indicating copy to clipboard operation
videojs-playlist-ui copied to clipboard

Description to show

Open pthorup opened this issue 9 years ago • 7 comments

Hi, Any idea how the description can show up in the playlist?

pthorup avatar Dec 14 '16 10:12 pthorup

I would also like to know how to get the video descriptions to show up in the playlist.

redolivedev avatar Jan 12 '17 23:01 redolivedev

I really needed this done so went and changed one of the core files with the code below:

// Video Description var descEl = document.createElement("p"); var descText = item.description || this.localize("No Description"); descEl.className = "vjs-playlist-desc"; descEl.appendChild(document.createTextNode(descText)); descEl.setAttribute("description", descText); descContainerEl.appendChild(descEl);

I placed it in the videojs-playlist-ui.js file. Worked perfectly after that.

pthorup avatar Jan 13 '17 09:01 pthorup

Descriptions aren't showing up for me either, as they do on the advanced example demonstration here.

Video.js 5.16.0

videojs-playlist version 3.0.1

videojs-playlist-ui - v3.0.0 - 2016-09-08

oshihirii avatar Feb 03 '17 14:02 oshihirii

Any breakthroughs with this? Where is a good place to place the code poonamthorup posted above. Thanks.

1nspect0rGadget avatar Mar 29 '17 18:03 1nspect0rGadget

Add this after line 199 where the li is constructed.

// Name and description
  var name = document.createElement('cite');
  var nameValue = item.name || this.localize('Untitled Video');
  name.className = 'vjs-playlist-name';
  name.appendChild(document.createTextNode(nameValue));
  name.setAttribute('title', nameValue);
  li.appendChild(name);

  if (item.description) {
    var description = document.createElement('p');
    description.className = 'vjs-playlist-description';
    description.appendChild(document.createTextNode(item.description));
    description.setAttribute('title', item.description);
    li.appendChild(description);
  }

1nspect0rGadget avatar Mar 29 '17 18:03 1nspect0rGadget

I downloaded what I think was the most recent version, and just used the existing code design pattern to add it in. I was at line 301 when I added this, where the LI is being constructed, just as is mentioned above. I was using a description no matter what so I didn't check for one, though I think you could probably pass an empty string instead of something like "No Description" like I did. I also like checking for the description, as done above, I just knew I always needed one...

//Video descrption
	var descEl = document_1.createElement('description');
	var descText = item.description || this.localize('No Description');
	
	descEl.className = 'vjs-playlist-description';
	descEl.appendChild(document_1.createTextNode(descText));
	descEl.setAttribute('title', descText);
	titleContainerEl.appendChild(descEl);

The class already matches up with existing styles, and can be overwritten with inline styles, though I had to use !important.

j-arred avatar May 25 '17 15:05 j-arred

You can also try the steps mentioned in - https://player.support.brightcove.com/references/video-metadata-mediainfo.html Basically, you can get the description as well in js using videojs.getPlayer('myPlayerID').mediaInfo.description

Ghanendra1209 avatar Sep 02 '20 13:09 Ghanendra1209