Richie JS version 1.1.4 🚀

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 (opens in a new tab) to know more about learning video rich result.

What are necessary data for learning video rich result?

1. Embed video

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

đź’ˇ
Time stamp of beginning of each segment should be set using data-offset attribute. Where value is 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!