Richie.js 2.0.2 released 🚀 Explore
DocumentationSupported Rich ResultsLearning Video

Learning video (LearningResource, VideoObject, Clip)

What is learning video rich result?

Google Search serves as a gateway for users to find and watch videos. Although Google attempts to automatically interpret your video’s details, you can proactively provide information like the description, thumbnail URL, upload date, and duration by using VideoObject markup. This enables your videos to appear in Google Search results, video search results, Google Images, and Google Discover.

Kindly Refer Google Doc to know more about learning video rich result.

What are necessary data for learning video rich result?

1. Embed Video (rjs-video-[number]-vframe)

learning-video.html
<div id="video-1">
  <iframe
    class="rjs-video-1-vframe"
    src="https://www.youtube.com/embed/zxyz"
    width="560"
    height="315"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay;clipboard-write; encrypted-media; gyroscope; 
        picture-in-picture; web-share"
    allowfullscreen
  >
  </iframe>
</div>

2. Segment Index (rjs-video-[number]-index)

đź’ˇ

Time stamp of the beginning of each segment should be set using the data-offset attribute, where the value is the number of seconds.

learning-video.html
<div id="video-1">
  <ul class="rjs-video-1-index">
    <li data-offset="30">Photo Testing</li>
    <li data-offset="200">Video Testing</li>
    <li data-offset="800">Cinematic Testing</li>
  </ul>
</div>

Function and parameters

đź’ˇ
By default input file is overwriiten with result so destination is optional
This is only for API method. We prefer CLI method for keeping it simpler (refer - Working with API & CLI).
func_params.js
const richResultType = "video";
const filePath = 'learning-video.html';
const destination = 'dist/learning-video.html'; /* optional */
 
richie([richResultType], filePath, destination);

Example of a Instance

Any number of video instance can be added in single page

learning-video.html
<body>
  <!-- video instance 1 -->
  <div id="video-1">
    <ul class="rjs-video-1-index">
      <li data-offset="30">Photo Testing</li>
      <li data-offset="200">Video Testing</li>
      <li data-offset="800">Cinematic Testing</li>
    </ul>
 
    <iframe
      class="rjs-video-1-vframe"
      src="https://www.youtube.com/embed/zxyz"
      width="560"
      height="315"
      title="YouTube video player"
      frameborder="0"
      allow="accelerometer; autoplay;clipboard-write; encrypted-media; gyroscope; 
            picture-in-picture; web-share"
      allowfullscreen
    >
    </iframe>
  </div>
</body>

Output of a Instance

learning-video.html
<script type="application/ld+json">
[
    {
        "@context": "https://schema.org",
        "@type": "VideoObject",
        "name": "TERRIBLY Misunderstood! Full-Frame Blackmagic Cinema Camera 6K [Review w/ Footage] - YouTube",
        "description": "My review of the new full-frame Blackmagic Cinema Camera 6K with lots of beautiful footage...⚡︎ Blackmagic Cinema Camera 6K 👉🏻 https://amzn.to/3uB3mBx⚡︎ Mo...",
        "thumbnailUrl": "https://i.ytimg.com/vi/pI4TnpCMgP8/maxresdefault.jpg",
        "contentUrl": "https://www.youtube.com/watch?v=pI4TnpCMgP8",
        "embedUrl": "https://www.youtube.com/embed/pI4TnpCMgP8?si=wPfEdco5EIZ9oaMW",
        "uploadDate": "2023-11-24T09:00:41-08:00",
        "duration": "PT11M44S",
        "interactionStatistic": {
        "@type": "InteractionCounter",
        "interactionType": { "@type": "WatchAction" },
        "userInteractionCount": 48659
        },
        "expires": "3023-11-24T22:30:41+05:30",
        "hasPart": [
        {
            "@type": "Clip",
            "name": "Photo Testing",
            "startOffset": 30,
            "endOffset": 200,
            "url": "https://www.youtube.com/watch?v=pI4TnpCMgP8&t=30s"
        },
        {
            "@type": "Clip",
            "name": "Video Testing",
            "startOffset": 200,
            "endOffset": 800,
            "url": "https://www.youtube.com/watch?v=pI4TnpCMgP8&t=200s"
        },
        {
            "@type": "Clip",
            "name": "Cinematic Testing",
            "startOffset": 800,
            "endOffset": 805,
            "url": "https://www.youtube.com/watch?v=pI4TnpCMgP8&t=800s"
        }
        ]
    }
]
</script>


Let’s see what’s next!

FAQLocal Business