@amplience/dynamic-content-accelerators/src/cardsPreview/templates/acc-card-template-video.html

Amplience DC Frontend modules, using HTML Service

{{#if video}}
<div class='amp-dc-video-wrap'>
    <video class="amp-dc-video" poster="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}?protocol=https"
           muted="true" src="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}/mp4_720p">
        <source src="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}/mp4_720p"
                data-res="High" data-bitrate="2119" label="High"
                type="video/mpeg4" codecs="h264">

        <source src="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}/mp4_480p"
                data-res="Medium" data-bitrate="689" label="Medium"
                type="video/mpeg4" codecs="h264">

        <source src="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}/mp4_240p"
                data-res="Low" data-bitrate="325" label="Low"
                type="video/mpeg4" codecs="h264">

        <source src="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}/webm_720p"
                data-res="High" data-bitrate="2000" label="High"
                type="video/webm" codecs="vp8">

        <source src="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}/webm_480p"
                data-res="Medium" data-bitrate="624" label="Medium"
                type="video/webm" codecs="vp8">

        <source src="//{{video.defaultHost}}/v/{{video.endpoint}}/{{video.name}}/webm_240p"
                data-res="Low" data-bitrate="325" label="Low"
                type="video/webm" codecs="vp8">
    </video>
</div>
<script type="text/javascript">
  var videos = document.getElementsByClassName("amp-dc-video");

  if (videos.length) {
    setTimeout(function () {
      videos[0].play();
    }, 2000);

    function settime() {
      setTimeout(function () {
        videos[0].pause();
        videos[0].load();
      }, 12000)
    }

    settime();
  }

</script>
{{/if}}