{"id":22308,"date":"2021-03-22T14:42:33","date_gmt":"2021-03-22T14:42:33","guid":{"rendered":"http:\/\/navigating_real_estate_videos_with_auto_tagged_markers"},"modified":"2023-11-24T08:39:19","modified_gmt":"2023-11-24T16:39:19","slug":"navigating_real_estate_videos_with_auto_tagged_markers","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers","title":{"rendered":"Navigating Real-Estate Videos With Auto Tagged Markers"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>A picture is worth a thousand words, and that also holds true for <a href=\"https:\/\/cloudinary.com\/video_api\">video<\/a>, one minute of which, according to Dr. James McQuivey of Forrester Research, is worth 1.8 million words. That\u2019s why online stores rely on rich media to promote products and sales. Images and videos impart a real sense of involvement with a purchase\u2014a car, a vacation getaway, an apartment rental\u2014setting your business apart from the competition.<\/p>\n<p>Make no mistake, visual media wields a huge influence in the real-estate industry by offering an idyllic picture of a visitor\u2019s forever home. Of significance, video can offer pertinent details about a property before potential customers begin the process of working with a real-estate agent on visits and so forth.<\/p>\n<p>Linear video is helpful, but enhancing it to enable navigation like in an image gallery and go directly to the points of interest is a big plus. Traditionally, you as web developers implement that enhancement with software by manually navigating through linear video to add markers and navigation points. Automating those tasks would result in tremendous savings in time and labor.<\/p>\n<p>Check out cloud-based services like Cloudinary for a smooth, automated process along with advanced capabilities. Your site visitors would greatly welcome the convenience and ease with which they can steer through your app\u2019s videos and locate the specifics that interest them.<\/p>\n<p>This article steps you through the procedure in the following sections:<\/p>\n<ul>\n<li>\n<a href=\"#requirements\">Understanding the Requirements<\/a>\n<\/li>\n<li>\n<a href=\"#tag-video\">Tagging Videos<\/a>\n<\/li>\n<li>\n<a href=\"#upload\">Uploading, Tagging, and Storing Video Files<\/a>\n<\/li>\n<li>\n<a href=\"#process\">Extracting Tags From Processed Videos<\/a>\n<\/li>\n<li>\n<a href=\"#navigation\">Creating Navigation Markers in Videos<\/a>\n<\/li>\n<li>\n<a href=\"#render-video\">Rendering Video With Markers<\/a>\n<\/li>\n<li>\n<a href=\"#large-video\">Handling Large Video Files<\/a>\n<\/li>\n<li>\n<a href=\"#next-steps\">Moving On to the Next Steps<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"requirements\">Understanding the Requirements<\/h2>\n<p>What goes into the process of auto-tagging videos?<\/p>\n<p>First, you must analyze the video, frame by frame, to select and tag objects in the frame. It\u2019s a bit like processing images, but you\u2019d be processing a bunch of images all linked together. For a desktop app, it\u2019s fairly straightforward. Doing that for a self-service web app, however, means that you must tackle these challenges:<\/p>\n<ul>\n<li>Upload and storage of large video files.<\/li>\n<li>Processing and editing, such as blurring and applying various digital filters.<\/li>\n<li>AI for object recognition.<\/li>\n<li>Edge deployment and content caching for serving video.<\/li>\n<\/ul>\n<p>On top of that, the files must be manageable and organizable. Often, you must share videos through URLs and controlled access. You might also need to implement ratings and feedback capabilities.<\/p>\n<p>Last, you must optimize videos for fast rendering through the website or app.<\/p>\n<p>How do you do all that without creating a patchwork of separate tools and services?<\/p>\n<h2 id=\"tag-video\">Tagging Videos<\/h2>\n<p>This section shows you how to auto-tag a video in a real-estate website with Cloudinary so as to enable visitors to navigate a property through the video. Specifically, you\u2019ll learn how to perform these two tasks:<\/p>\n<ul>\n<li>Upload a video for hosting in the cloud.<\/li>\n<li>Tag the video automatically with <a href=\"http:\/\/sampingchuang.com\/videojs-markers\">Videojs-markers<\/a> to show how certain rooms appear, as shown in the photo below:<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_500,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/autotag_demo.png\" alt=\"auto tagging demo\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"368\"\/><\/p>\n<p>The companion code is <a href=\"https:\/\/github.com\/dawidborycki\/Cloudinary-VideoAutoTagging\">on GitHub<\/a>.<\/p>\n<h2 id=\"upload\">Uploading, Tagging, and Storing Video Files<\/h2>\n<p>You probably have someone on your team creating videos. For a reasonable simulation of this example, I first downloaded three pictures from <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a>, which depict the kitchen, bedroom, and living room. I then created a simple real-estate video with iMovie to render those pictures, each one spanning four seconds, resulting in a 12-second video (<a href=\"https:\/\/github.com\/dawidborycki\/Cloudinary-VideoAutoTagging\/blob\/main\/video\/house.mp4\">see video<\/a> on GitHub).<\/p>\n<p>Afterwards, I did the following:<\/p>\n<p><strong>1.<\/strong> I signed up for a free <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">Cloudinary account<\/a> and enabled the Google Automatic Video Tagging add-on, the underlying Cloudinary service for automatically tagging videos. You manage add-ons through the Cloudinary website, as shown below:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/add-ons.png\" alt=\"Add ons\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1021\"\/><\/p>\n<p><strong>2.<\/strong> I went back to the dashboard to note my cloud name and API credentials:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/media_library.png\" alt=\"Media Library\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"899\"\/><\/p>\n<p>Now I have everything I need to start coding.<\/p>\n<p><strong>3.<\/strong> As a first step for using Cloudinary\u2019s Node.js SDK, I installed the Cloudinary <code>npm<\/code> package with this command:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>npm install cloudinary\n<\/code><\/pre>\n<p><strong>4.<\/strong> I created the <code>common.js<\/code> module, into which I imported the <code>npm<\/code> package and then configured the API credentials:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>var cloudinary = require('cloudinary').v2;\n \ncloudinary.config({ \n    cloud_name: '&lt;YOUR_CLOUD_NAME&gt;', \n    api_key: '&lt;YOUR_KEY&gt;', \n    api_secret: '&lt;YOUR_SECRET&gt;' \n});\n \nexports.cloudinary = cloudinary; \n<\/code><\/pre>\n<p><strong>5.<\/strong> I created the <code>uploadVideo.js<\/code> file, which references the <code>common.js<\/code> file and invokes the <code>upload<\/code> function from the Cloudinary SDK:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>var common = require('.\/common.js');\n \ncommon.cloudinary.uploader.upload('.\/video\/house.mp4', { \n        resource_type: 'video', \n        categorization: 'google_video_tagging',\n        auto_tagging: 0.5 \n    },\n    (error, result) =&gt; {\n        console.log(result, error) \n \n        \/\/ Display public id of the uploaded video\n        console.log('Your public id is: ' + result['public_id']);\n    }\n);\n<\/code><\/pre>\n<p>The <code>upload<\/code> function takes several <a href=\"https:\/\/cloudinary.com\/documentation\/image_upload_api_reference\">parameters<\/a>. At a minimum, you must specify the video\u2019s file path. You can also add upload parameters. For this example, I added three:<\/p>\n<ul>\n<li>\n<code>resource_type<\/code>: This parameter notifies Cloudinary the type of content you are uploading. The possible values are <code>image<\/code>, <code>raw<\/code>, <code>video<\/code>, and <code>auto<\/code>.<\/li>\n<li>\n<code>categorization<\/code>: This parameters contains a collection of add-ons. You can specify one of these values:  <code>google_video_tagging<\/code> or <code>azure_video_indexer<\/code>.<\/li>\n<li>\n<code>auto_tagging<\/code>: This parameter specifies the confidence score you desire before tagging the resource.<\/li>\n<\/ul>\n<p>In my example, Cloudinary adds all the tags with a confidence score higher than 50 percent to the resource. Note that this tagging is related to categorizing content within Cloudinary, i.e., Cloudinary adds the tags based on the recognized video content.<\/p>\n<p>You must also pass to the <code>upload<\/code> function a callback, which I leveraged to report responses from Cloudinary. Here\u2019s a typical response:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>{\n  asset_id: 'dc5b3c8891d9ad974455839816ba34af',\n  public_id: 'dosfm1nxpjkystb3uqtj',\n  version: 1610890792,\n  version_id: '76121d9c617365ffbc24f15e2b043ba1',\n  signature: 'ffd2f8daadd2f8a71097bdb69699548e1fc45c5f',\n  width: 1280,\n  height: 720,\n  format: 'mp4',\n  resource_type: 'video',\n  created_at: '2021-01-17T13:39:52Z',\n  tags: [],\n  pages: 0,\n  bytes: 18216284,\n  type: 'upload',\n  etag: 'bc2f54f085adaa0f365437027d0cc6f3',\n  placeholder: false,\n  url: 'http:\/\/res.cloudinary.com\/futuresoftpl\/video\/upload\/v1610890792\/dosfm1nxpjkystb3uqtj.mp4',\n  secure_url: 'https:\/\/res.cloudinary.com\/futuresoftpl\/video\/upload\/v1610890792\/dosfm1nxpjkystb3uqtj.mp4',\n  info: { categorization: { google_video_tagging: [Object] } },\n  audio: {},\n  video: {\n    pix_format: 'yuv420p',\n    codec: 'h264',\n    level: 31,\n    profile: 'High',\n    bit_rate: '12032377',\n    dar: '16:9',\n    time_base: '1\/30000'\n  },\n  frame_rate: 29.97002997002997,\n  bit_rate: 12132057,\n  duration: 12.012,\n  rotation: 0,\n  original_filename: 'house',\n  nb_frames: 360\n}\n<\/code><\/pre>\n<p>That\u2019s the JSON object with all the details of your uploaded resource, including the public URLs you can cite within your website and the public identifier of the resource in your Cloudinary account. My callback displays this public identifier because I\u2019ll use it later to obtain the video tags.<\/p>\n<h2 id=\"process\">Extracting Tags From Processed Videos<\/h2>\n<p>The response from the <code>upload<\/code> function does <strong>not<\/strong> display the tags. Instead, it only shows <code>[Object]<\/code> within the <code>info.categorization.google_video_tagging<\/code> property. You need additional code to reveal those tags. Specifically, you must traverse the resulting JSON:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>result['info']['categorization']['google_video_tagging']['data']\n<\/code><\/pre>\n<p>To avoid reuploads of the video, I made use of the Cloudinary <a href=\"https:\/\/cloudinary.com\/documentation\/admin_api\">Admin API\u2019s<\/a> <code>api.resource<\/code> method, which, given the public identifier and resource type, returns the details of the resource.<\/p>\n<p>Here\u2019s the example for the video (see <code>getMarkers.js<\/code> in the companion code):<\/p>\n<pre class=\"js-syntax-highlighted\"><code>var common = require('.\/common.js');\n \npublic_id = 'dosfm1nxpjkystb3uqtj';\n \ncommon.cloudinary.api.resource(public_id, {resource_type: &quot;video&quot;}, \n    (error, result) =&gt; {\n    \/\/ Get categorization data\n    categorizationData = result['info']['categorization']\n        ['google_video_tagging']['data'];    \n \n    console.log(categorizationData)       \n    });\n});\n\n<\/code><\/pre>\n<p>Running this code gives you all the information on the content detected in your video. Here\u2019s a selected portion of the response for my video:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>[\n  {\n    tag: 'interior design',\n    categories: [],\n    start_time_offset: 0,\n    end_time_offset: 11.978633,\n    confidence: 0.9868196845054626,\n    shot_level: false\n  },\n  {\n    tag: 'apartment',\n    categories: [ 'building' ],\n    start_time_offset: 0,\n    end_time_offset: 11.978633,\n    confidence: 0.7973060011863708,\n    shot_level: false\n  },\n  {\n    tag: 'house',\n    categories: [ 'building' ],\n    start_time_offset: 8.008,\n    end_time_offset: 11.978633,\n    confidence: 0.8208440542221069,\n    shot_level: true\n  },\n  {\n    tag: 'wall',\n    categories: [],\n    start_time_offset: 4.004,\n    end_time_offset: 7.974633,\n    confidence: 0.5453928709030151,\n    shot_level: true\n  },\n  {\n    tag: 'living room',\n    categories: [ 'room' ],\n    start_time_offset: 0,\n    end_time_offset: 3.970633,\n    confidence: 0.4006035029888153,\n    shot_level: true\n  },\n  {\n    tag: 'living room',\n    categories: [ 'room' ],\n    start_time_offset: 4.004,\n    end_time_offset: 7.974633,\n    confidence: 0.5230793952941895,\n    shot_level: true\n  },\n  {\n    tag: 'kitchen',\n    categories: [ 'room' ],\n    start_time_offset: 0,\n    end_time_offset: 3.970633,\n    confidence: 0.9755304455757141,\n    shot_level: true\n  },\n  {\n    tag: 'bedroom',\n    categories: [ 'room' ],\n    start_time_offset: 4.004,\n    end_time_offset: 7.974633,\n    confidence: 0.7389670610427856,\n    shot_level: true\n  },\n  {\n    tag: 'real estate',\n    categories: [],\n    start_time_offset: 8.008,\n    end_time_offset: 11.978633,\n    confidence: 0.8142818212509155,\n    shot_level: true\n  },\n]\n<\/code><\/pre>\n<p>See how masterfully Cloudinary delivers a rundown of video content? The next section will show you how to create navigation markers with the tags in the response.<\/p>\n<h2 id=\"navigation\">Creating Navigation Markers in Videos<\/h2>\n<p>I rendered video markers with <a href=\"http:\/\/sampingchuang.com\/videojs-markers\">Videojs-markers<\/a>. The examples on their site show that, to add a marker, you must specify several objects, each of which comprising two values: the time at which the marker should appear and the description (text).<\/p>\n<p>The Cloudinary API returns objects with six values, of which I needed only two: <code>tag<\/code> and <code>start_time_offset<\/code>. In this example, the first one is for the marker text; and the second one, for the marker\u2019s start time.<\/p>\n<p>Also, the Cloudinary API contains tags I didn\u2019t need because my video depicted a kitchen, a bedroom, and a  living room only. So, I filtered out all the other tags with the <code>underscore npm<\/code> package (<code>npm install underscore<\/code>) and then modified <code>getMarkers.js<\/code>, as shown below:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>var common = require('.\/common.js');\nvar _ = require('underscore');\n \npublic_id = 'dosfm1nxpjkystb3uqtj';\n \ncommon.cloudinary.api.resource(public_id, {resource_type: &quot;video&quot;}, (error, result) =&gt; {\n    \/\/ Get categorization data\n    categorizationData = result['info']['categorization']['google_video_tagging']['data'];        \n \n    \/\/ Define rooms\n    var rooms = ['kitchen', 'bedroom', 'living room'];\n \n    \/\/ Get markers for each room\n    \/\/ Use underscore to filter &quot;tag&quot; (get last element only)\n    markers = [];\n    rooms.forEach((room) =&gt; {        \n        data = _.where(categorizationData, {'tag': room}).pop();\n \n        marker = {\n            'time': data['start_time_offset'],\n            'text': data['tag']\n        }\n \n        markers.push(marker);        \n    });\n \n    console.log(markers)    \n});\n \nThe method now returns the list of markers we can use along with videojs-markers:\n \n[\n  { time: 0, text: 'kitchen' },\n  { time: 4.004, text: 'bedroom' },\n  { time: 8.008, text: 'living room' }\n]\n<\/code><\/pre>\n<p>In the real world, Cloudinary generates thousands of tags, and you\u2019d need mechanisms to properly manage them. To partition the results, you could use the <code>max_results<\/code> and <code>derived_next_cursor<\/code> options, which you pass next to the <code>resource_type<\/code> option.<\/p>\n<h2 id=\"render-video\">Rendering Video With Markers<\/h2>\n<p>To wire up everything and achieve the result shown in the photo of the room near the top of this post, I created a simple website (see <code>website\/index.html<\/code> in the companion code), which references <code>videojs-markers<\/code> and some other helper JavaScript code. In the <code>body<\/code> section, a <code>&lt;video&gt;<\/code> HTML tag renders the sample real-estate video:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;video id=&quot;house&quot; controls class=&quot;video-js vjs-default-skin&quot; \n    width=&quot;800&quot; height=&quot;600&quot;&gt;\n    &lt;source src=&quot;..\/video\/house.mp4&quot; type=&quot;video\/mp4&quot;&gt;    \n&lt;\/video&gt;\n<\/code><\/pre>\n<p>To optimize <a href=\"https:\/\/cloudinary.com\/glossary\/video-rendering\">video rendering<\/a>, you could replace the <code>src<\/code> tag with the one from Cloudinary, which in my case reads like this:<\/p>\n<p><code>https:\/\/res.cloudinary.com\/demo\/video\/upload\/v1614368895\/house_tour.mp4<\/code><\/p>\n<p>You could further optimize the video with <a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery\">video transformations<\/a> just by adding parameters to the URL, for example:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/video\\\/upload\\\/f_auto\\\/house_tour.mp4&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;video&quot;,&quot;transformation&quot;:[{&quot;format&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;f_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;house_tour.mp4&quot;,&quot;extension&quot;:&quot;mp4&quot;,&quot;format&quot;:&quot;mp4&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;video&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<link href=\"https:\/\/unpkg.com\/cloudinary-video-player@1.5.1\/dist\/cld-video-player.min.css\" rel=\"stylesheet\">\n<script src=\"https:\/\/unpkg.com\/cloudinary-core@latest\/cloudinary-core-shrinkwrap.min.js\" type=\"text\/javascript\"><\/script>\n<script src=\"https:\/\/unpkg.com\/cloudinary-video-player@1.5.1\/dist\/cld-video-player.min.js\" \n    type=\"text\/javascript\"><\/script>\n<p><video id=\"optimizer\" class=\"cld-video-player cld-fluid \" data-cld-big-play-button=\"init\" data-cld-poster-options='{ \"start_offset\": 20}' controls=\"true\" muted=\"true\"><\/video><\/p>\n<script>\nvar marketingCld = cloudinary.Cloudinary.new({ cloud_name: \"demo\"}); \nvar optimizer = marketingCld.videoPlayer(\"optimizer\", {\n     publicId: \"house_tour\"\n}) \n \n<\/script>\n<p>Afterwards, I added markers with the JavaScript video player:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;script&gt;\n    var player = optimizer.videoJS;\n    \n    player.markers({\n        markerTip:{\n            display: true,\n            text: function(marker) {\n                return marker.text;\n            }\n        },\n        markers: [\n            { time: 0, text: 'kitchen' },\n            { time: 4.004, text: 'bedroom' },\n            { time: 8.008, text: 'living room' }\n        ]\n    });\n&lt;\/script&gt;\n<\/code><\/pre>\n<p>Cloudinary has now added markers to my video.<\/p>\n<h2 id=\"large-video\">Handling Large Video Files<\/h2>\n<p>The above video example being a short one, uploading and rendering it was fast, requiring no additional tools. For long video files, however, a good practice would be to configure the asynchronous upload with a <a href=\"https:\/\/cloudinary.com\/documentation\/notifications\">notification URL<\/a> to keep you informed of when the upload is ready.<\/p>\n<p>To render a video on a website, you could also employ adaptive bitrate streaming through the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Cloudinary Video Player<\/a>.<\/p>\n<h2 id=\"next-steps\">Moving On to the Next Steps<\/h2>\n<p>You\u2019ve now learned how to tag video sequences through automation on Cloudinary and detect the content in a video, such as that of an apartment. From there, you can create markers to help visitors to your site navigate through the video.<\/p>\n<p>The Cloudinary API and its comprehensive AI methods make for a straightforward process, enhancing apps with tagged, easy-to-navigate videos, a boon for visitors who would be sure to come back for more. Beyond real estate, you can employ the same techniques to add tags and structure to videos for events, training courses, and so forth.<\/p>\n<p>Do try it out for your next project! Start with <a href=\"https:\/\/cloudinary.com\/users\/register\/free\">signing up<\/a> for a free Cloudinary account.<\/p>\n<h2>About the Author<\/h2>\n<p>Dawid Borycki is a software engineer and biomedical researcher with extensive experience in Microsoft technologies. He has completed a broad range of challenging software-development projects for device prototypes (mostly medical equipment), embedded device interfacing, and desktop and mobile programming. He\u2019s also the author of two Microsoft Press books: <em>Programming for Mixed Reality<\/em> (2018) and <em>Programming for the Internet of Things<\/em> (2017).<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22309,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,286,303,305],"class_list":["post-22308","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-tagging","tag-video","tag-video-api"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Auto-Tag Video With Markers on Cloudinary for Easy Navigation<\/title>\n<meta name=\"description\" content=\"Learn how to auto-tag videos, e.g., real-estate-related ones, with Cloudinary to create markers so that visitors can navigate points of interest fast.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Navigating Real-Estate Videos With Auto Tagged Markers\" \/>\n<meta property=\"og:description\" content=\"Learn how to auto-tag videos, e.g., real-estate-related ones, with Cloudinary to create markers so that visitors can navigate points of interest fast.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-22T14:42:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T16:39:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Navigating Real-Estate Videos With Auto Tagged Markers\",\"datePublished\":\"2021-03-22T14:42:33+00:00\",\"dateModified\":\"2023-11-24T16:39:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Tagging\",\"Video\",\"Video API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers\",\"url\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers\",\"name\":\"How to Auto-Tag Video With Markers on Cloudinary for Easy Navigation\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA\",\"datePublished\":\"2021-03-22T14:42:33+00:00\",\"dateModified\":\"2023-11-24T16:39:19+00:00\",\"description\":\"Learn how to auto-tag videos, e.g., real-estate-related ones, with Cloudinary to create markers so that visitors can navigate points of interest fast.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Navigating Real-Estate Videos With Auto Tagged Markers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Auto-Tag Video With Markers on Cloudinary for Easy Navigation","description":"Learn how to auto-tag videos, e.g., real-estate-related ones, with Cloudinary to create markers so that visitors can navigate points of interest fast.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers","og_locale":"en_US","og_type":"article","og_title":"Navigating Real-Estate Videos With Auto Tagged Markers","og_description":"Learn how to auto-tag videos, e.g., real-estate-related ones, with Cloudinary to create markers so that visitors can navigate points of interest fast.","og_url":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers","og_site_name":"Cloudinary Blog","article_published_time":"2021-03-22T14:42:33+00:00","article_modified_time":"2023-11-24T16:39:19+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers"},"author":{"name":"","@id":""},"headline":"Navigating Real-Estate Videos With Auto Tagged Markers","datePublished":"2021-03-22T14:42:33+00:00","dateModified":"2023-11-24T16:39:19+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA","keywords":["Asset Management","Tagging","Video","Video API"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers","url":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers","name":"How to Auto-Tag Video With Markers on Cloudinary for Easy Navigation","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA","datePublished":"2021-03-22T14:42:33+00:00","dateModified":"2023-11-24T16:39:19+00:00","description":"Learn how to auto-tag videos, e.g., real-estate-related ones, with Cloudinary to create markers so that visitors can navigate points of interest fast.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/navigating_real_estate_videos_with_auto_tagged_markers#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Navigating Real-Estate Videos With Auto Tagged Markers"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649719385\/Web_Assets\/blog\/Auto-video-tagging_2230902f9c\/Auto-video-tagging_2230902f9c.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22308"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22308\/revisions"}],"predecessor-version":[{"id":31881,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22308\/revisions\/31881"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22309"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}