Use VIDEO element instead of EMBED

Are you requesting a feature, reporting a bug or asking a question?

Feature

What is the current behavior?

When an image question uses contentMode === 'video', SurveyJS uses an <embed> tag. In 2021 the video tag is well supported and the <embed> tag has been deprecated for a while.

I only noticed this behavior when looking into adding a feature for blocking the survey until a movie has finished playing.

What is the expected behavior?

I’d expect SurveyJS to use a video tag.

For illustration, this is the template for knockout:

<script type="text/html" id="survey-question-image">
  <div data-bind="css: question.koCss().root">
    <!-- ko if: question.contentMode === "image" -->
    <img data-bind="css: question.koCss().image, attr: { src: $data.imageLink, width: question.imageWidth ? question.imageWidth + 'px' : undefined, height: question.imageHeight ? question.imageHeight + 'px' : undefined, alt: question.text || question.title }, style: { objectFit: question.imageFit }"/>
    <!-- /ko -->
    <!-- ko if: question.contentMode === "video" -->
    <embed data-bind="css: question.koCss().image, attr: { src: $data.imageLink, width: question.imageWidth ? question.imageWidth + 'px' : undefined, height: question.imageHeight ? question.imageHeight + 'px' : undefined }, style: { objectFit: question.imageFit }"/>
    <!-- /ko -->
  </div>
</script>

[tsv2013]

@SamMousa In the new approach model will be shared, rendering should be implemented in a platform-specific way. Thus you can test a model for all the platforms, but markup should be tested separately for each platform

[tsv2013]

We are frequently asked to implement native framework approach - use native react/angular/vue components. Our current architecture is the following: fat core framework-agnostic code which is covered by unit tests and used as a view model for thin presentation layer inplemented in react/angular/vue as a “dummy” renderer (components implement markup only). This allows to quickly support another framework as we did recently with survey-creator-react. And this will allow as to support native survey-angular library as we plan in the nearest future.

As for custom widgets - right now we’re thinking to obsolete old framework-independent custom widgets approach in favor of native react/angular/vue components to be used for widgets customization.

As for the initial thread topic - “Use VIDEO element instead of EMBED” - I move this issue into the current sprint incoming board and we’ll implement it as soon as we’ll have time for it. For me to be honest this change looks like a minor one until browsers still support the EMBED tag.