|
36 | 36 | yarn add cloudinary-react-native --save |
37 | 37 | ``` |
38 | 38 |
|
| 39 | +### For Video Player functionality |
| 40 | +If you want to use the video player features, you need to install `expo-av`: |
| 41 | + |
| 42 | +```bash |
| 43 | +npm install expo-av |
| 44 | +``` |
| 45 | +Or |
| 46 | +```bash |
| 47 | +yarn add expo-av |
| 48 | +``` |
| 49 | + |
39 | 50 | ## Usage |
40 | 51 | ### Setup |
41 | 52 | The `Cloudinary` class is the main entry point for using the library. Your `cloud_name` is required to create an instance of this class. Your `api_key` and `api_secret` are also needed to perform secure API calls to Cloudinary (e.g., image and video uploads). Setting the configuration parameters can be done either programmatically using an appropriate constructor of the Cloudinary class or globally using an environment variable. You can find your account-specific configuration parameters in the **Dashboard** page of your [account console](https://cloudinary.com/console). |
@@ -71,6 +82,70 @@ export default function App() { |
71 | 82 | }; |
72 | 83 | ``` |
73 | 84 |
|
| 85 | +### Video Player |
| 86 | +The `AdvancedVideo` component provides video playback capabilities with optional analytics tracking. **Note: This requires `expo-av` to be installed.** |
| 87 | + |
| 88 | +```tsx |
| 89 | +import { AdvancedVideo } from 'cloudinary-react-native'; |
| 90 | +import {Cloudinary} from '@cloudinary/url-gen'; |
| 91 | + |
| 92 | +const myCld = new Cloudinary({ |
| 93 | + cloud: { |
| 94 | + cloudName: "demo", |
| 95 | + }, |
| 96 | +}); |
| 97 | + |
| 98 | +let video = myCld.video('sea_turtle'); |
| 99 | + |
| 100 | +export default function App() { |
| 101 | + return ( |
| 102 | + <View style={styles.container}> |
| 103 | + <AdvancedVideo |
| 104 | + cldVideo={video} |
| 105 | + videoStyle={{width: 400, height: 220}} |
| 106 | + /> |
| 107 | + </View> |
| 108 | + ); |
| 109 | +}; |
| 110 | +``` |
| 111 | + |
| 112 | +#### Video Player with Analytics |
| 113 | +Enable analytics tracking for detailed video performance insights: |
| 114 | + |
| 115 | +```tsx |
| 116 | +import { AdvancedVideo } from 'cloudinary-react-native'; |
| 117 | +import {Cloudinary} from '@cloudinary/url-gen'; |
| 118 | + |
| 119 | +const myCld = new Cloudinary({ |
| 120 | + cloud: { |
| 121 | + cloudName: "demo", |
| 122 | + }, |
| 123 | +}); |
| 124 | + |
| 125 | +let video = myCld.video('sea_turtle'); |
| 126 | + |
| 127 | +export default function App() { |
| 128 | + return ( |
| 129 | + <View style={styles.container}> |
| 130 | + <AdvancedVideo |
| 131 | + cldVideo={video} |
| 132 | + videoStyle={{width: 400, height: 220}} |
| 133 | + enableAnalytics={true} |
| 134 | + autoTrackAnalytics={true} |
| 135 | + analyticsOptions={{ |
| 136 | + customData: { |
| 137 | + userId: 'user-123', |
| 138 | + appVersion: '1.0.0' |
| 139 | + }, |
| 140 | + videoPlayerType: 'expo-av', |
| 141 | + videoPlayerVersion: '14.0.0' |
| 142 | + }} |
| 143 | + /> |
| 144 | + </View> |
| 145 | + ); |
| 146 | +}; |
| 147 | +``` |
| 148 | + |
74 | 149 | ### Uploading Assets |
75 | 150 | The following example performs an unsigned upload of a `string` using the default settings, a request upload callback, and an upload preset (required for unsigned uploads): |
76 | 151 |
|
|
0 commit comments