cloudinary-video-player/docs/es-modules/autoplay-on-scroll.html at d99004fbe6dadb7942de767d4203bc24053ddb03 · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Cloudinary Video Player</title>
    <link
      href="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto/c_scale,w_32,e_hue:290/creative_staging/cloudinary_internal/Website/Brand%20Updates/Favicon/cloudinary_web_favicon_192x192.png"
      rel="icon"
      type="image/png"
    />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </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">Autoplay on scroll</h3>
      <p class="alert alert-primary">
        <b>Scroll down to see the player and then up to see the above in action.</b>
      </p>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet egestas
        lectus. Aenean sit amet ultricies tortor. Sed feugiat sollicitudin quam ut pretium. Fusce
        placerat pulvinar metus, et mollis nibh. Morbi dictum maximus odio et facilisis. Quisque ac
        metus ut dui congue feugiat id at eros. Donec cursus nibh arcu, ac vestibulum diam molestie
        vitae. Sed a lacinia mi. Suspendisse malesuada eget ex vitae commodo. Nulla eget odio nec
        est pulvinar ornare a sed enim. Mauris et velit nibh. Morbi bibendum leo tellus, vel cursus
        augue molestie et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Morbi et nisi ut dolor varius convallis at eu enim. In eros tortor,
        sodales fermentum ligula in, aliquet facilisis nisl. Morbi congue volutpat porttitor. Etiam
        velit metus, laoreet nec consequat sit amet, ullamcorper quis mi. Sed id nulla tincidunt,
        molestie enim id, mollis odio. Fusce sit amet posuere tellus. Aliquam auctor imperdiet nisi,
        sed sagittis tortor sagittis sit amet. In dictum metus eu nunc porta malesuada. Quisque
        congue risus non arcu vehicula, ut rhoncus risus tincidunt. In et augue nunc. Mauris massa
        magna, condimentum et odio at, convallis maximus turpis. Cras et dolor augue. Fusce in
        finibus nisi. Nam tempus enim purus, id pretium tellus mollis non. Integer accumsan pulvinar
        finibus. Proin tincidunt nibh ut elit venenatis, ac feugiat turpis placerat. Ut et faucibus
        magna. Sed lectus lectus, dictum in ligula quis, varius mattis eros. Vestibulum in eros
        neque. Etiam cursus imperdiet aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Pellentesque sit amet egestas lectus. Aenean sit amet ultricies tortor. Sed feugiat
        sollicitudin quam ut pretium. Fusce placerat pulvinar metus, et mollis nibh. Morbi dictum
        maximus odio et facilisis. Quisque ac metus ut dui congue feugiat id at eros. Donec cursus
        nibh arcu, ac vestibulum diam molestie vitae. Sed a lacinia mi. Suspendisse malesuada eget
        ex vitae commodo. Nulla eget odio nec est pulvinar ornare a sed enim. Mauris et velit nibh.
        Morbi bibendum leo tellus, vel cursus augue molestie et. Class aptent taciti sociosqu ad
        litora torquent per conubia nostra, per inceptos himenaeos. Morbi et nisi ut dolor varius
        convallis at eu enim. In eros tortor, sodales fermentum ligula in, aliquet facilisis nisl.
        Morbi congue volutpat porttitor. Etiam velit metus, laoreet nec consequat sit amet,
        ullamcorper quis mi. Sed id nulla tincidunt, molestie enim id, mollis odio. Fusce sit amet
        posuere tellus. Aliquam auctor imperdiet nisi, sed sagittis tortor sagittis sit amet. In
        dictum metus eu nunc porta malesuada. Quisque congue risus non arcu vehicula, ut rhoncus
        risus tincidunt. In et augue nunc. Mauris massa magna, condimentum et odio at, convallis
        maximus turpis. Cras et dolor augue. Fusce in finibus nisi.
      </p>

      <div>
        <video
          id="player"
          playsinline
          controls
          class="cld-video-player"
          width="500"
          data-cld-public-id="sea_turtle"
          data-cld-autoplay-mode="on-scroll"
        ></video>
      </div>

      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet egestas
        lectus. Aenean sit amet ultricies tortor. Sed feugiat sollicitudin quam ut pretium. Fusce
        placerat pulvinar metus, et mollis nibh. Morbi dictum maximus odio et facilisis. Quisque ac
        metus ut dui congue feugiat id at eros. Donec cursus nibh arcu, ac vestibulum diam molestie
        vitae. Sed a lacinia mi. Suspendisse malesuada eget ex vitae commodo. Nulla eget odio nec
        est pulvinar ornare a sed enim. Mauris et velit nibh. Morbi bibendum leo tellus, vel cursus
        augue molestie et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos. Morbi et nisi ut dolor varius convallis at eu enim. In eros tortor,
        sodales fermentum ligula in, aliquet facilisis nisl. Morbi congue volutpat porttitor. Etiam
        velit metus, laoreet nec consequat sit amet, ullamcorper quis mi. Sed id nulla tincidunt,
        molestie enim id, mollis odio. Fusce sit amet posuere tellus. Aliquam auctor imperdiet nisi,
        sed sagittis tortor sagittis sit amet. In dictum metus eu nunc porta malesuada. Quisque
        congue risus non arcu vehicula, ut rhoncus risus tincidunt. In et augue nunc. Mauris massa
        magna, condimentum et odio at, convallis maximus turpis. Cras et dolor augue. Fusce in
        finibus nisi. Nam tempus enim purus, id pretium tellus mollis non. Integer accumsan pulvinar
        finibus. Proin tincidunt nibh ut elit venenatis, ac feugiat turpis placerat. Ut et faucibus
        magna. Sed lectus lectus, dictum in ligula quis, varius mattis eros. Vestibulum in eros
        neque. Etiam cursus imperdiet aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit. Pellentesque sit amet egestas lectus. Aenean sit amet ultricies tortor. Sed feugiat
        sollicitudin quam ut pretium. Fusce placerat pulvinar metus, et mollis nibh. Morbi dictum
        maximus odio et facilisis. Quisque ac metus ut dui congue feugiat id at eros. Donec cursus
        nibh arcu, ac vestibulum diam molestie vitae. Sed a lacinia mi. Suspendisse malesuada eget
        ex vitae commodo. Nulla eget odio nec est pulvinar ornare a sed enim. Mauris et velit nibh.
        Morbi bibendum leo tellus, vel cursus augue molestie et. Class aptent taciti sociosqu ad
        litora torquent per conubia nostra, per inceptos himenaeos. Morbi et nisi ut dolor varius
        convallis at eu enim. In eros tortor, sodales fermentum ligula in, aliquet facilisis nisl.
        Morbi congue volutpat porttitor. Etiam velit metus, laoreet nec consequat sit amet,
        ullamcorper quis mi. Sed id nulla tincidunt, molestie enim id, mollis odio. Fusce sit amet
        posuere tellus. Aliquam auctor imperdiet nisi, sed sagittis tortor sagittis sit amet. In
        dictum metus eu nunc porta malesuada. Quisque congue risus non arcu vehicula, ut rhoncus
        risus tincidunt. In et augue nunc. Mauris massa magna, condimentum et odio at, convallis
        maximus turpis. Cras et dolor augue. Fusce in finibus nisi. Nam tempus enim purus, id
        pretium tellus mollis non. Integer accumsan pulvinar finibus. Proin tincidunt nibh ut elit
        venenatis, ac feugiat turpis placerat. Ut et faucibus magna. Sed lectus lectus, dictum in
        ligula quis, varius mattis eros. Vestibulum in eros neque. Etiam cursus imperdiet aliquet.
      </p>

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

    <script type="module">
      import { videoPlayer } from 'cloudinary-video-player';
      import 'cloudinary-video-player/player.min.css';

      const player = videoPlayer('player', {
        cloudName: 'demo'
      });
    </script>

    <!-- 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"
    />
  </body>
</html>