quickQuote

A tool for journalists to easily find and add video quotes to news articles.

This project is maintained by Times Digital and Pietro Passarelli

User manual

"quickQuote" is a web application to select video quotes from a video, to embed in a article. it uses Spoken data API to generate a transcription of the video. The user can then search, and select a quote. This can be exported, and the application trims the video, and generates the HTML code to embed it with the corresponding part of the video associated as a dropdown.

Login

Autentication is done through Google Auth, so need to register, just login with user google credentials.

Login

Login

Uploading a video

Once loged in the navigaiton bar displayes two new menus videos and Upload videos.

click on upload videos to get started.

Upload

Upload

Viewing videos

You can check the status of a video by clicking on Check Status.

from there you can navigate to individual videos.

Videos

Videos

Hypertranscript

Search Video

You can search for specific words in the transcription. The line containing a match is hilighted and the word becomes bold.

Search

Search

 Clickable transcription

The text in the hypertranscript is sync with the video playhead. Clicking on the transcription takes you to the corresponding point in the video.

As the video playes the words change color to show the corresponding text.

Hypertranscript

Hypertranscript

Select a quote

To select a quote simply select it with you mouse. The Quote text area auto populates with the text you've selected.

Selection

Selection

Edit a quote

In this example, the text to speech API was very accurate, but we notice that the sentence doesn't add up, and if we play the clip we can hear it missed the word "law".

To fix this we can edit the selection of the quote for accuracy by editing the text in the Quote text area.

Edit the text of a quote selection

Edit the text of a quote selection

 Preview

To quickly preview what our quote will look like once published, we can click on preview, and a pop up window with a preview of the quote will come up.

Preview Quote

Preview Quote

Clicking on watch video triggers the dropdown, and we see the video corresponding to the text we've selected.

Preview Video

Preview Video

Export

Once pleased with our selection and ready to publish, click on the export button. Another pop up window comes up, this time containing the HTML embed code, to insert in your article.

Export

Export

Embedding the code

To demonstrate embedding the code, using JSFiddle

Export Quote

Export Quote

if we click on watch video the video segment comes down.

Export Dropdown

Export Dropdown

As you can see from the length of the clip in this example(7 seconds) the clip as been trimmed to the corresponding text of the quote to make for a faster loading of the video file.