Video Quick Actions

Each Video Quick Actions component is loaded into the application as an iframe, like the Adobe Express editor component. Users will be prompted to browse for an asset once the QA iframe is loaded. Unlike the Image Quick Actions components, Video QAs cannot be launched with an asset attached during this beta phase.

openQuickAction()

After the SDK has been initialized, the CCEverywhere object exposes these Image Quick Actions via the openQuickAction() method.

ccEverywhere.openQuickAction(
    // QuickActionsParams
    {
        id: 'change-speed', 
        inputParams: {
            exportOptions: []
        },
        callbacks: {
            onCancel: () => {},
            onError: (err) => {},
            onLoadStart: () => {},
            onLoad: () => {},
            onPublishStart: () => {},
            onPublish: (publishParams) => {},
        },
        modalParams: {},
    }
)
Copied to your clipboard
1ccEverywhere.openQuickAction(
2    // QuickActionsParams
3    {
4        id: 'change-speed', 
5        inputParams: {
6            exportOptions: []
7        },
8        callbacks: {
9            onCancel: () => {},
10            onError: (err) => {},
11            onLoadStart: () => {},
12            onLoad: () => {},
13            onPublishStart: () => {},
14            onPublish: (publishParams) => {},
15        },
16        modalParams: {},
17    }
18)

QuickActionParams

openQuickAction() takes an object QuickActionParams with 4 parameters:

Property	Description	Type
id	Choose Quick Actions component	QuickActionId
inputParams	Configure export options	QuickActionInputParams
callbacks	Callback functions	Callbacks
modalParams	Define size of QA iframe	ModalParams

Only id and inputParams.exportOptions is required to initialize the iframe.

QuickActionId

Identifies which Video Quick Actions component should be loaded into the iframe.

Quick Action	QuickActionId
Change Speed	'change-speed'
Convert to GIF	'convert-to-gif'
Convert to MP4	'convert-to-mp4'
Crop Video	'crop-video'
Merge Video	'merge-video'
Resize Video	'resize-video'
Reverse Video	'reverse-video'
Trim Video	'trim-video'

Example

Flow: User clicks the "Change Speed" button.

The Change Speed QA Component is launched in an iframe. The user will browse for a mp4 asset to perform the QA on, within this iframe.
Once selected, the user is presented with options for changing the speed.

Finally, users can choose between 3 export options:

Customize: to continue designing in a Adobe Express editor component
Download: to save the asset
Custom buttons that target the host application

<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Quick Actions</title>
  </head>
    
  <body>
    <h1> Video Quick Action Example </h1>
    <button id="change-speed"> Change Speed </button>

    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
    <script type="text/javascript" >

    const PROJECT_NAME = 'cc everywhere';

    var ccEverywhere = window.CCEverywhere.initialize(
        {
            clientId: YOUR_CLIENT_ID,
            appName: PROJECT_NAME,
            appVersion: { major: 1, minor: 0 },
            platformCategory: 'web',
            redirectUri: YOUR_REDIRECT_URI
        }
    );

    const videoCallbacks = {
        onCancel: () => {},
        onPublish: (publishParams) => {
            if(publishParams.exportButtonId=="save-to-host-app"){
                // Customize functionality here 
            }
        },
        onError: (err) => {
            console.error('Error received is', err.toString())
        }
    }

    const exportOptions = [
        {
            target: 'Editor',
            variant: 'cta',
            optionType: 'button',
            buttonType: 'native'
        },
        {
            target: 'Download',
            variant: 'primary',
            optionType: 'button',
            buttonType: 'native'
        },
        /* Custom implementation in onPublish callback */
        {
            target: 'Host',
            id: 'save-to-host-app',
            label: 'Embed in app',
            variant: 'cta',
            optionType: 'button',
            buttonType: 'custom'
        }
    ];

    document.getElementById('change-speed')
    .addEventListener('click', () => {
        ccEverywhere.openQuickAction({
            id: 'change-speed', 
            inputParams: { 
                exportOptions: exportOptions
            },
            callbacks: videoCallbacks,
            modalParams: {},
        })
    })
    </script>
  </body> 
</html>
Copied to your clipboard
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4  <title>Quick Actions</title>
5  </head>
6    
7  <body>
8    <h1> Video Quick Action Example </h1>
9    <button id="change-speed"> Change Speed </button>
10
11    <script src="https://sdk.cc-embed.adobe.com/v1/CCEverywhere.js"></script>
12    <script type="text/javascript" >
13
14    const PROJECT_NAME = 'cc everywhere';
15
16    var ccEverywhere = window.CCEverywhere.initialize(
17        {
18            clientId: YOUR_CLIENT_ID,
19            appName: PROJECT_NAME,
20            appVersion: { major: 1, minor: 0 },
21            platformCategory: 'web',
22            redirectUri: YOUR_REDIRECT_URI
23        }
24    );
25
26    const videoCallbacks = {
27        onCancel: () => {},
28        onPublish: (publishParams) => {
29            if(publishParams.exportButtonId=="save-to-host-app"){
30                // Customize functionality here 
31            }
32        },
33        onError: (err) => {
34            console.error('Error received is', err.toString())
35        }
36    }
37
38    const exportOptions = [
39        {
40            target: 'Editor',
41            variant: 'cta',
42            optionType: 'button',
43            buttonType: 'native'
44        },
45        {
46            target: 'Download',
47            variant: 'primary',
48            optionType: 'button',
49            buttonType: 'native'
50        },
51        /* Custom implementation in onPublish callback */
52        {
53            target: 'Host',
54            id: 'save-to-host-app',
55            label: 'Embed in app',
56            variant: 'cta',
57            optionType: 'button',
58            buttonType: 'custom'
59        }
60    ];
61
62    document.getElementById('change-speed')
63    .addEventListener('click', () => {
64        ccEverywhere.openQuickAction({
65            id: 'change-speed', 
66            inputParams: { 
67                exportOptions: exportOptions
68            },
69            callbacks: videoCallbacks,
70            modalParams: {},
71        })
72    })
73    </script>
74  </body> 
75</html>