SurveyJS "Image" - contentMode set to "video" doesn't appear to work

Underglow

created 4 years ago (modified 4 years ago)

Hi,

I have a quiz with an "Image". I set the contentMode to "video" and I'm trying to get it to display said video (it works as expected if the video is in base64 format).

I uploaded a file to azure storage blob (note, the link below has been edited so the video will not work). This video works if I use the <video> HTML tags, but it does not work in the SurveyJS image. What do I mean by "not working"? - it displays an "empty" space where the video should be & automatically downloads the video to my device, instead of playing the video.

What am I doing wrong? cheers.

JSON
{
  "questions": [
    {
      "type": "image",
      "name": "3e4dc8c6-5217-49a2-aac9-265ca031c7b8",
      "title": "Spread Happiness -Short Animation Clip.mp4",
      "description": "",
      "titleLocation": "default",
      "descriptionLocation": "default",
      "isRequired": true,
      "visible": true,
      "colCount": 1,
      "readOnly": false,
      "hideNumber": false,
      "visibleIf": "",
      "maxScore": 0,
      "startWithNewLine": false,
      "imageLink": "https://azurestorageacc.blob.core.windows.net/admin/50c2d08c-d5b3-496a-9ce3-583ea2982974.mp4?sv=2020-08-04&spr=https&se=2021-08-07T11%3A15%3A31Z&sr=b&sp=r&sig=JBEIMSly7vD58jtZ0wkJ2hWwBExEuDsMHr2h0q6V3Lg%3D",
      "imageFit": "cover",
      "imageHeight": 256,
      "imageWidth": 144,
      "contentMode": "video",
    },
  ]
}

Answers approved by surveyjs Support

Serge T

created 4 years ago

Hello,

I've just checked your JSON with another video link and it works ok for me:

JSON
{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "image",
     "name": "question4",
     "imageLink": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
     "contentMode": "video",
     "imageFit": "cover",
     "imageHeight": 256,
     "imageWidth": 144
    },
    {
     "type": "image",
     "name": "3e4dc8c6-5217-49a2-aac9-265ca031c7b8",
     "startWithNewLine": false,
     "title": "Spread Happiness -Short Animation Clip.mp4",
     "imageLink": "https://azurestorageacc.blob.core.windows.net/admin/50c2d08c-d5b3-496a-9ce3-583ea2982974.mp4?sv=2020-08-04&spr=https&se=2021-08-07T11%3A15%3A31Z&sr=b&sp=r&sig=JBEIMSly7vD58jtZ0wkJ2hWwBExEuDsMHr2h0q6V3Lg%3D",
     "contentMode": "video",
     "imageFit": "cover",
     "imageHeight": 256,
     "imageWidth": 144
    }
   ]
  }
 ]
}

In case of your video I've got the Failed to load resource: the server responded with a status of 403 (Server failed to authenticate the request. Make sure the value of Authorization header is formed correctly including the signature.) error in console. This can cause the issue.

Thanks, Serge
SurveyJS Team

SurveyJS "Image" - contentMode set to "video" doesn't appear to work

Answers approved by surveyjs Support

Other Answers

Recently viewed tickets