Skip to content

Commit a0657b0

Browse files
carlevisoncarlevison
authored
Merge pull request #1 from cloudinary-devs/video_examples
Video examples
2 parents 30380cf + eddccf5 commit a0657b0

10 files changed

+323
-23
lines changed

‎package-lock.json

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@
2727
"webpack-cli": "4.9.2"
2828
},
2929
"dependencies": {
30-
"@cloudinary/url-gen": "1.5.1"
30+
"@cloudinary/url-gen": "1.6.0"
3131
}
3232
}

‎src/advancedVideoProperties.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import {Cloudinary} from "@cloudinary/url-gen";
2+
3+
export function getAdvancedVideoPropertiesVideo() {
4+
5+
// Create a Cloudinary instance and set your cloud name.
6+
const cld = new Cloudinary({
7+
cloud: {
8+
cloudName: 'demo'
9+
},
10+
url: {
11+
analytics: false
12+
}
13+
});
14+
15+
// Use the video with public ID, 'docs/walking_talking'.
16+
const myVideo = cld.video('dog');
17+
18+
return myVideo;
19+
}

‎src/index.js

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import './style.css';
2-
import getQuickstartImage from './quickstart.js';
3-
import getFullExampleImage from './fullExample.js';
4-
import getTransformationsImage from './transformations.js';
5-
import getAssetInstanceImage from './assetInstance.js';
6-
import getSyntaxOverviewImage from './syntaxOverview.js';
7-
import getFetchImage from './deliveryType.js';
8-
import getTransformingYourImageImage from './transformingYourImage.js';
9-
import getChainingTransformationsImage from './chainingTransformations.js';
10-
import getResizingAndCroppingImage from './resizingAndCropping.js';
11-
import getConvertingFormatExtensionImage from './convertingFormatExtension.js';
12-
import getConvertingFormatDeliveryImage from './convertingFormatDelivery.js';
13-
import getAutoFormatImage from './autoFormat.js';
14-
import getEffectsImage from './effects.js';
15-
import getOverlaysImage from './overlays.js';
16-
import getOptimizationsImage from './imageOptimizations.js';
2+
import getQuickstartImage from './quickstart';
3+
import getFullExampleImage from './fullExample';
4+
import getTransformationsImage from './transformations';
5+
import getAssetInstanceImage from './assetInstance';
6+
import getSyntaxOverviewImage from './syntaxOverview';
7+
import getFetchImage from './deliveryType';
8+
import getTransformingYourImageImage from './transformingYourImage';
9+
import getChainingTransformationsImage from './chainingTransformations';
10+
import getResizingAndCroppingImage from './resizingAndCropping';
11+
import getConvertingFormatExtensionImage from './convertingFormatExtension';
12+
import getConvertingFormatDeliveryImage from './convertingFormatDelivery';
13+
import getAutoFormatImage from './autoFormat';
14+
import getEffectsImage from './effects';
15+
import getOverlaysImage from './overlays';
16+
import getOptimizationsImage from './imageOptimizations';
1717

1818
async function getComponent(index) {
1919

@@ -155,13 +155,15 @@ async function getComponent(index) {
155155
const element = document.createElement('div');
156156
const spacing = document.createElement('div');
157157
const spacing2 = document.createElement('div');
158+
const spacing3 = document.createElement('div');
158159
const anchor = document.createElement('a');
159160
const imgElement = document.createElement('img');
160161

161162
// Set the styles
162163
element.classList.add('text','App');
163164
spacing.classList.add('space');
164165
spacing2.classList.add('space');
166+
spacing3.classList.add('space');
165167

166168
// Add the description
167169
element.innerHTML = description;
@@ -183,6 +185,16 @@ async function getComponent(index) {
183185
// Add the image and some space to the div
184186
element.appendChild(imgElement);
185187
element.appendChild(spacing2);
188+
189+
if (index == 15)
190+
{
191+
let endDiv = document.createElement('div');
192+
endDiv.innerHTML = "Go to <a href=\"videos.html\">video transformations...</a>";
193+
194+
element.appendChild(endDiv);
195+
196+
element.appendChild(spacing3);
197+
}
186198

187199
return element;
188200
}

‎src/transformingYourVideo.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {Cloudinary} from "@cloudinary/url-gen";
2+
// Import the scale mode from the resize action.
3+
import {scale} from "@cloudinary/url-gen/actions/resize";
4+
5+
export default function getTransformingYourVideoVideo() {
6+
7+
// Create a Cloudinary instance and set your cloud name.
8+
const cld = new Cloudinary({
9+
cloud: {
10+
cloudName: 'demo'
11+
},
12+
url: {
13+
analytics: false
14+
}
15+
});
16+
17+
// Instantiate a CloudinaryVideo object for the video with public ID, 'elephants'.
18+
const myVideo = cld.video('elephants');
19+
20+
// Scale the video to a width of 400 pixels.
21+
myVideo.resize(scale().width(400));
22+
23+
return myVideo;
24+
}

‎src/videoExample1.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {Cloudinary} from "@cloudinary/url-gen";
2+
import {Transformation} from "@cloudinary/url-gen";
3+
import {scale} from "@cloudinary/url-gen/actions/resize";
4+
import {byAngle} from "@cloudinary/url-gen/actions/rotate";
5+
import {source} from "@cloudinary/url-gen/actions/overlay";
6+
import {opacity} from "@cloudinary/url-gen/actions/adjust";
7+
import {image} from "@cloudinary/url-gen/qualifiers/source";
8+
import {Position} from "@cloudinary/url-gen/qualifiers/position";
9+
import {compass} from "@cloudinary/url-gen/qualifiers/gravity";
10+
11+
export default function getExample1Video() {
12+
13+
// Create a Cloudinary instance and set your cloud name.
14+
const cld = new Cloudinary({
15+
cloud: {
16+
cloudName: 'demo'
17+
},
18+
url: {
19+
analytics: false
20+
}
21+
});
22+
23+
// Use the video with public ID, 'elephants'.
24+
const myVideo = cld.video('elephants');
25+
26+
// Apply the transformation.
27+
myVideo
28+
.resize(scale().width(0.2))
29+
.rotate(byAngle(20))
30+
.overlay(
31+
source(
32+
image('cloudinary_icon')
33+
.transformation(new Transformation()
34+
.resize(scale().width(60))
35+
.adjust(opacity(50))
36+
)
37+
)
38+
.position(new Position().gravity(compass('south_east')).offsetX(60).offsetY(15))
39+
);
40+
41+
return myVideo;
42+
}
43+
44+
45+

‎src/videoExample2.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import {Cloudinary} from "@cloudinary/url-gen";
2+
import {Transformation} from "@cloudinary/url-gen";
3+
import {reverse,accelerate} from "@cloudinary/url-gen/actions/effect";
4+
import {brightness} from "@cloudinary/url-gen/actions/adjust";
5+
import {max} from "@cloudinary/url-gen/actions/roundCorners";
6+
import {concatenate} from "@cloudinary/url-gen/actions/videoEdit";
7+
import {Concatenate} from "@cloudinary/url-gen/qualifiers/concatenate";
8+
9+
export default function getExample2Video() {
10+
11+
// Create a Cloudinary instance and set your cloud name.
12+
const cld = new Cloudinary({
13+
cloud: {
14+
cloudName: 'demo'
15+
},
16+
url: {
17+
analytics: false
18+
}
19+
});
20+
21+
// Use the video with public ID, 'ski_jump'.
22+
const myVideo = cld.video('ski_jump');
23+
24+
// Apply the transformation.
25+
myVideo
26+
.videoEdit(concatenate(Concatenate.videoSource('ski_jump').transformation(new Transformation().effect(reverse()))))
27+
.videoEdit(concatenate(Concatenate.videoSource('ski_jump').transformation(new Transformation().effect(accelerate(-50)))))
28+
.adjust(brightness(10))
29+
.roundCorners(max());
30+
31+
return myVideo;
32+
}
33+
34+
35+

‎src/videoExample3.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {Cloudinary} from "@cloudinary/url-gen";
2+
3+
// Import required actions and qualifiers.
4+
import {fill} from "@cloudinary/url-gen/actions/resize";
5+
import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";
6+
import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn";
7+
import {Gravity} from "@cloudinary/url-gen/qualifiers";
8+
import {AutoFocus} from "@cloudinary/url-gen/qualifiers/autoFocus";
9+
10+
export default function getExample3Video() {
11+
12+
// Create a Cloudinary instance and set your cloud name.
13+
const cld = new Cloudinary({
14+
cloud: {
15+
cloudName: 'demo'
16+
},
17+
url: {
18+
analytics: false
19+
}
20+
});
21+
22+
// Use the video with public ID, 'docs/walking_talking'.
23+
const myVideo = cld.video('docs/walking_talking');
24+
25+
// Apply the transformation.
26+
myVideo
27+
.resize(fill().width(150).height(150).gravity(Gravity.autoGravity().autoFocus(AutoFocus.focusOn(FocusOn.faces()))))
28+
.roundCorners(byRadius(20)); // Round the corners.
29+
30+
return myVideo;
31+
}

‎src/videos.js

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
import './style.css';
2+
import getTransformingYourVideoVideo from './transformingYourVideo';
3+
import getExample1Video from './videoExample1';
4+
import getExample2Video from './videoExample2';
5+
import getExample3Video from './videoExample3';
6+
7+
async function getComponent(index) {
8+
9+
let description = "";
10+
let link = "";
11+
let linkText = "";
12+
let myVideoUrl = "";
13+
14+
// Set the variables for the different videos
15+
switch (index)
16+
{
17+
case 1:
18+
{
19+
description = "Resize a video to a width of 400 pixels, as shown in";
20+
link = "https://cloudinary.com/documentation/javascript_video_transformations#transforming_your_video";
21+
linkText = "Transforming your video";
22+
myVideoUrl = getTransformingYourVideoVideo().toURL();
23+
break;
24+
}
25+
case 2:
26+
{
27+
description = "Apply several transformations to the elephant video, as shown in";
28+
link = "https://cloudinary.com/documentation/javascript_video_transformations#example_1";
29+
linkText = "Example 1";
30+
myVideoUrl = getExample1Video().toURL();
31+
break;
32+
}
33+
case 3:
34+
{
35+
description = "Apply several transformations to the snowboarding video, as shown in ";
36+
link = "https://cloudinary.com/documentation/javascript_video_transformations#example_2";
37+
linkText = "Example 2";
38+
myVideoUrl = getExample2Video().toURL();
39+
break;
40+
}
41+
case 4:
42+
{
43+
description = "Focus on faces in a video, as shown in";
44+
link = "https://cloudinary.com/documentation/javascript_video_transformations#example_3";
45+
linkText = "Example 3";
46+
myVideoUrl = getExample3Video().toURL();
47+
break;
48+
}
49+
default:
50+
{
51+
console.log("Oops! Outside of range.");
52+
}
53+
}
54+
55+
// Create the elements
56+
const element = document.createElement('div');
57+
const spacing = document.createElement('div');
58+
const spacing2 = document.createElement('div');
59+
const spacing3 = document.createElement('div');
60+
const anchor = document.createElement('a');
61+
const videoElement = document.createElement('video');
62+
const webmSourceElement = document.createElement('source');
63+
const mp4SourceElement = document.createElement('source');
64+
const ogvSourceElement = document.createElement('source');
65+
66+
// Set the styles
67+
element.classList.add('text','App');
68+
spacing.classList.add('space');
69+
spacing2.classList.add('space');
70+
spacing3.classList.add('space');
71+
72+
// Add the description
73+
element.innerHTML = description;
74+
75+
// Define the link
76+
anchor.href = link;
77+
anchor.classList.add('App-link');
78+
anchor.target = "_blank";
79+
anchor.rel = "noopener noreferrer";
80+
anchor.innerHTML = linkText;
81+
82+
// Add the link and some space to the div
83+
element.appendChild(anchor);
84+
element.appendChild(spacing);
85+
86+
// Set the source elements for the video element
87+
webmSourceElement.src = myVideoUrl + ".webm";
88+
webmSourceElement.type = "video/webm";
89+
videoElement.appendChild(webmSourceElement);
90+
mp4SourceElement.src = myVideoUrl + ".mp4";
91+
mp4SourceElement.type = "video/mp4";
92+
videoElement.appendChild(mp4SourceElement);
93+
ogvSourceElement.src = myVideoUrl + ".ogv";
94+
ogvSourceElement.type = "video/ogg";
95+
videoElement.appendChild(ogvSourceElement);
96+
97+
// Set the attributes of the video element
98+
videoElement.controls = "true";
99+
videoElement.autoplay = "true";
100+
videoElement.loop = "true";
101+
videoElement.muted = "true";
102+
103+
// Add the video and some space to the div
104+
element.appendChild(videoElement);
105+
element.appendChild(spacing2);
106+
107+
if (index == 4)
108+
{
109+
let endDiv = document.createElement('div');
110+
endDiv.innerHTML = "Go to <a href=\"index.html\">image transformations...</a>";
111+
112+
element.appendChild(endDiv);
113+
114+
element.appendChild(spacing3);
115+
}
116+
117+
return element;
118+
}
119+
120+
// Loop through all the different videos, adding them to the page
121+
for (let i=1; i<5; i++)
122+
{
123+
getComponent(i).then((component) => {
124+
document.body.appendChild(component);
125+
});
126+
}
127+

0 commit comments

Comments
 (0)