cloudinary-video-player/docs/visual-search.html at 2f67ef8cba57b8d6c41789b1ec10d1506026f8a5 · cloudinary/cloudinary-video-player · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cloudinary Video Player - Visual Search</title>
    <link
      href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32/v1597183771/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
      rel="icon"
      type="image/png"
    />

    <!-- Bootstrap -->
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />

    <!-- highlight.js -->
    <link
      rel="stylesheet"
      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-light.min.css"
    />
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

    <!--
    We're loading scripts & style dynamically for development/testing.
    Real-world usage would look like this:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.css">
    <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/cld-video-player.min.js"></script>

  -->

    <script type="text/javascript" src="./scripts.js"></script>

    <script type="text/javascript">
      window.addEventListener(
        'load',
        function () {
          // Initialize player with visual search plugin
          const player = cloudinary.videoPlayer('player', {
            cloudName: 'demo'
          });

          player.source({
            publicId: 'marketing-video-2025',
            info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
            chapters: {
              0: 'Opening credits',
              3: 'A dangerous quest',
              8: 'The attack'
            },
            visualSearch: true
          });

          // Playlist with mixed content
          var source1 = {
            publicId: 'marmots',
            info: { title: 'Visual search mocked', subtitle: 'Random results from mocked data' },
            visualSearch: {
              useMockData: true
            }
          };
          var source2 = {
            publicId: 'marketing-video-2025',
            info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
            visualSearch: true
          };
          var source3 = { publicId: 'elephants', info: { title: 'Visual search disabled' } };
          var source4 = { publicId: 'snow_horses', info: { title: 'Visual search disabled' } };

          var playlistSources = [source1, source2, source3, source4];
          var playlistOptions = {
            autoAdvance: true,
            repeat: true,
            presentUpcoming: 8
          };

          var playerPlaylist = cloudinary.videoPlayer('player-playlist', {
            cloudName: 'demo',
            playlistWidget: {
              direction: 'horizontal',
              total: 4
            }
          });

          playerPlaylist.playlist(playlistSources, playlistOptions);
        },
        false
      );
    </script>
  </head>

  <body>
    <div class="container p-4 col-12 col-md-9 col-xl-6">
      <nav class="nav mb-2">
        <a href="./index.html">&#60;&#60; Back to examples index</a>
      </nav>
      <h1>Cloudinary Video Player</h1>
      <h3 class="mb-4">Visual Search Plugin</h3>

      <video id="player" playsinline controls class="cld-video-player cld-fluid"></video>

      <hr />

      <h3 class="mb-4">Playlist with mixed content</h3>

      <video id="player-playlist" playsinline controls class="cld-video-player cld-fluid"></video>

      <p class="mt-4">
        <a href="https://cloudinary.com/documentation/cloudinary_video_player"
          >Full documentation</a
        >
      </p>

      <h3 class="mt-4">Example Code:</h3>
      <pre>
      <code class="language-html">
    &lt;video
      id="player"
      playsinline
      controls
      class="cld-video-player cld-fluid"
      width="500"
    &gt;&lt;/video&gt;
      </code>
      <code class="language-javascript">
    // Initialize player with visual search plugin
    const player = cloudinary.videoPlayer('player', {
      cloudName: 'demo',
      publicId: 'elephants',
      visualSearch: true
    });

      </code>
    </pre>
    </div>
  </body>
</html>