cloudinary-video-player/docs/visual-search.html at 57b7bf8dfea26736387d3da137fdaa8326adbcb0 · 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
145
146
147
<!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' },
            visualSearch: true
          });

          // Playlist with mixed content
          var source1 = {
            publicId: 'marketing-video-2025',
            info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
            visualSearch: true,
          };
          var source2 = {
            publicId: 'docs/ping_pong_paddle',
            info: { title: 'Visual search with chapters', subtitle: 'Real results from indexed video' },
            visualSearch: true,
            chapters: {
              0: 'Opening credits',
              3: 'A dangerous quest',
              8: 'The attack'
            },
          };
          var source3 = {
            publicId: 'docs/pizza_slice',
            info: { title: 'Visual search', subtitle: 'Real results from indexed video' },
            visualSearch: true
          };
          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',
            aspectRatio: '16:9',
            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>