cloudinary-video-player/docs/custom-cld-errors.html at 58dd065a1851c6d988754eda315990ab2a89d477 · 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
<!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/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/player.min.css">
    <script src="https://cdn.jsdelivr.net/npm/cloudinary-video-player/dist/player.min.js"></script>

  -->

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

  <script type="text/javascript">

    window.addEventListener('load', function() {

      player = cloudinary.videoPlayer('player', {
        cloud_name: 'demo_err',
        publicId: 'snow_horses'
      });

      // Add a custom error handler on 'error' event
      player.on('error', function(e) {
        const error = e.Player.videojs.error(); // Get current error

        // Custom error code should be > 99, smaller values might already be used by the player.
        const customErrorCode = 999;

        // Replace current error message with your custom error message
        if (error && error.code !== customErrorCode) {
          errorContainerText = 'Error:' + error.statusCode + ',' + error.message;

          // Set text under the video player
          let errorContainer = document.querySelector('.error-container');
          errorContainer.innerHTML = errorContainerText;
          errorContainer.style.color = 'red';

          // Set video player custom error message
          player.videojs.error(null); // Stop default error handling
          player.videojs.error({code: customErrorCode, message: "My custom error message"}); // Set error
        }
      });

    }, 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">Custom Errors</h3>

    <video
      id="player"
      playsinline
      controls
      muted
      autoplay
      class="cld-video-player"
      width="500"
    ></video>

    <div class="error-container"></div>

    <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"
          controls
          muted
          autoplay
          class="cld-video-player"
          width="500"
        &gt;&lt;/video&gt;
        &lt;div class="error-container"&gt;&lt;/div&gt;
      </code>
      <code class="language-javascript">

        player = cloudinary.videoPlayer('player', {
          cloud_name: 'demo_err',
          publicId: 'snow_horses',
        });

        // Add a custom error handler on 'error' event
        player.on('error', (e) => {
          const error = e.Player.videojs.error(); // Get current error

          // Custom error code should be > 99, smaller values might already be used by the player.
          const customErrorCode = 999;

          // Replace current error message with your custom error message
          if (error && error.code !== customErrorCode) {
            errorContainerText = `Error: ${error.statusCode}, ${error.message}`;

            // Set text under the video player
            let errorContainer = document.querySelector('.error-container');
            errorContainer.innerHTML = errorContainerText;
            errorContainer.style.color = 'red';

            // Set video player custom error message
            player.videojs.error(null); // Stop default error handling
            player.videojs.error({code: customErrorCode, message: "My custom error message"}); // Set error
          }
        });
      </code>
    </pre>
  </div>

</body>
</html>