How to display video field output


How to display a video field output

  "name": "video",
  "type": "video",
  "label": "Finished video",
  "optional": true,
  "description": "Video to play before game results are shown."
otacke's picture


If that's your semantics, you will find a `video` property in the constructor's first argument. It should be an array containing one element per video that you added in the editor. Each element should contain values for `path` (path to video), `mime` (MIME type) and `copyright` (all the metadata).

You'll need to handle the video path yourself and can use whatever solution you'd like to render the video.

Given the example that you posted, I assume you copied that from QuestionSet - and its code is exactly where you can fine one way of rendering the video: It instantiates H5P.Video and lets that library render everything.


Example from questionset.js really helped. Thanks for the input.

var $videoContainer = $('<div class="video-container"></div>').appendTo($myDom); var video = new H5P.Video({ sources: videoData, fitToWrapper: true, controls: false, autoplay: false }, contentId); video.on('stateChange', function (event) { if ( === H5P.Video.ENDED) { displayResults(); $videoContainer.hide(); } }); video.attach($videoContainer); // Resize on video loaded video.on('loaded', function () { self.trigger('resize'); });;
otacke's picture

Glad I could help. What are you building?