Author: H5 Automation

Before you begin, first check the Getting Started section if you didn’t. Let’s see how to automate multiple interactive video creations in seconds. If you want to know details about how H5P Interactive video works, refer to this link. To automate the content creation, all you need is a JSON file. Download the sample interactive-video-content JSON file. Now, go to the WordPress admin side and click on the H5 Automation menu.

Select “Interactive Video” from the Content Types dropdown, choose the downloaded JSON file, and click the upload and generate button. And you are done with the interactive video content creation.

Understand the JSON video. Download the JSON file and open it on a text editor. In the JSON file, there may seem to be a lot of code script, but we only need to know and modify some things. These are:

The JSON structure:

[
  {},
  {}
]

The JSON file started & ended with a square bracket. Inside the square brackets, each curly brace means an interactive video. Here, two pairs of curly braces mean 2 interactive videos. Inside the curly braces, we add the contents.

Inside the {} curly braces, there is an interactiveVideo block with the following structure:

[
    {
       "interactiveVideo": {
           "title": "title",
           "video": {},
           "assets": {},
           "summary": {},
        },
        "override": {},
        "l10n": {}
    }
]

Title:

The title is an identifier of this video content. A human-readable text.

Video:

{
    "startScreenOptions": {
        "title": "Interactive Video",
        "hideStartTitle": false
    },
    "textTracks": {
        "videoTrack": [
            {
                "label": "Subtitles",
                "kind": "subtitles",
                "srcLang": "en"
            }
        ]
    },
    "files": [
        {
            "path": "https://www.youtube.com/watch?v=d95PPykB2vE",
            "mime": "video\/YouTube",
            "copyright": {
                "license": "U"
            },
            "aspectRatio": "16:9"
        }
    ]
},

startScreenOptions, you can leave it or modify the title if you want. The important part is “files”, here you need to add the URL of you video. You can add URLs from YouTube/Vimeo. Leave the rest of it.

Assets:

{
    "interactions": [],
    "bookmarks": [],
    "endscreens": [
        {
            "time": 28,
            "label": "1:22 Submit screen"
        }
    ]
}

The “interactives” property contains interactions like single choice, fill in the blank, drag & drop, etc. The “endscreens”, add the time in seconds & label for the endscreen. The time is in seconds. Here 28 means the end screen will appear on the 28th second of this video.

Summary Block:

{
"task": {
    "library": "H5P.Summary",
    "params": {
        "intro": "Choose the correct statement.",
        "summaries": [
            {
                "subContentId": "4f14d7f4-0ffb-4454-a76f-5cd23b3e0a2c",
                "tip": ""
            }
        ],
        "overallFeedback": [
            {
                "from": 0,
                "to": 40
            }
        ],
        "solvedLabel": "Progress:",
        "scoreLabel": "Wrong answers:",
        "resultLabel": "Your result",
        "labelCorrect": "Correct.",
        "labelIncorrect": "Incorrect! Please try again.",
        "alternativeIncorrectLabel": "Incorrect",
        "labelCorrectAnswers": "Correct answers.",
        "tipButtonLabel": "Show tip",
        "scoreBarLabel": "You got :num out of :total points",
        "progressText": "Progress :num of :total"
    },
    "subContentId": "982617fb-5857-45ff-a00b-033a67c63d76",
    "metadata": {
        "contentType": "Summary",
        "license": "U",
        "title": "Untitled Summary",
        "authors": [],
        "changes": [],
        "extraTitle": "Untitled Summary"
    }
},
"displayAt": 3
}

Configure the summary block if you want to change the text. For example: “solvedLabel”: “Progress:”, if you want to change the text ” Progress ” to your progress or something else, you can do it; otherwise, you can leave it. The “overallFeedback” is the feedback system. If you want to provide grading as per the score, then configure it like below. If you want don’t want to add grading, leave it.

   "overallFeedback": [
            {
                "from": 0,
                "to": 39,
                "feedback": "F"
            },
            {
                "from": 40,
                "to": 79,
                "feedback": "B"
            },
            {
                "from": 80,
                "to": 100,
                "feedback": "A"
            },
        ],

Override:

        "override": {
            "autoplay": false,
            "loop": false,
            "showBookmarksmenuOnLoad": false,
            "showRewind10": false,
            "preventSkippingMode": "none",
            "deactivateSound": false
        },

Override is to control the H5P behaviour settings. For example, if you want to play the video automatically then set “autoplay”: true.

l10n:

{
            "interaction": "Interaction",
            "play": "Play",
            "pause": "Pause",
            "mute": "Mute, currently unmuted",
            "unmute": "Unmute, currently muted",
            "quality": "Video Quality",
            "captions": "Captions",
            "close": "Close",
            "fullscreen": "Fullscreen",
            "exitFullscreen": "Exit Fullscreen",
            "summary": "Open summary dialog",
            "bookmarks": "Bookmarks",
            "endscreen": "Submit screen",
            "defaultAdaptivitySeekLabel": "Continue",
            "continueWithVideo": "Continue with video",
            "more": "More player options",
            "playbackRate": "Playback Rate",
            "rewind10": "Rewind 10 Seconds",
            "navDisabled": "Navigation is disabled",
            "navForwardDisabled": "Navigating forward is disabled",
            "sndDisabled": "Sound is disabled",
            "requiresCompletionWarning": "You need to answer all the questions correctly before continuing.",
            "back": "Back",
            "hours": "Hours",
            "minutes": "Minutes",
            "seconds": "Seconds",
            "currentTime": "Current time:",
            "totalTime": "Total time:",
            "singleInteractionAnnouncement": "Interaction appeared:",
            "multipleInteractionsAnnouncement": "Multiple interactions appeared.",
            "videoPausedAnnouncement": "Video is paused",
            "content": "Content",
            "answered": "@answered answered",
            "endcardTitle": "@answered Question(s) answered",
            "endcardInformation": "You have answered @answered questions, click below to submit your answers.",
            "endcardInformationOnSubmitButtonDisabled": "You have answered @answered questions.",
            "endcardInformationNoAnswers": "You have not answered any questions.",
            "endcardInformationMustHaveAnswer": "You have to answer at least one question before you can submit your answers.",
            "endcardSubmitButton": "Submit Answers",
            "endcardSubmitMessage": "Your answers have been submitted!",
            "endcardTableRowScore": "Score",
            "endcardQuestion": "Question",
            "endcardAnsweredScore": "answered",
            "endCardTableRowSummaryWithScore": "You got @score out of @total points for the @question that appeared after @minutes minutes and @seconds seconds.",
            "endCardTableRowSummaryWithoutScore": "You have answered the @question that appeared after @minutes minutes and @seconds seconds.",
            "videoProgressBar": "Video progress",
            "howToCreateInteractions": "Play the video to start creating interactions"
        }

This section is to customise the text if you want, but don’t translate the text here otherwise the default translation will not work. For example: “play”: “Play”, if you want to change the text from “Play” to “Play the video” you can do it, otherwise you don’t need to touch this section at all.

Let’s see the detailed process in the following video: