How to display video field output

Submitted by arun.ak on Mon, 03/20/2023 - 15:05
Forums: 
Developers

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

otacke

Mon, 03/20/2023 - 17:32

Hi!

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.

Best,
Oliver

arun.ak

Mon, 03/20/2023 - 22:38

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 (event.data === H5P.Video.ENDED) { displayResults(); $videoContainer.hide(); } }); video.attach($videoContainer); // Resize on video loaded video.on('loaded', function () { self.trigger('resize'); }); video.play();
otacke's picture

otacke

Wed, 03/22/2023 - 00:00

Glad I could help. What are you building?