<link media="all" rel="stylesheet" href="/assets/themes/default/css/mp4-video.css?cb=">
<div class="mp4-video mp4-video--with-description" data-module="video" data-autoplay="true" data-fullscreen="false">
<h2 class="mp4-video__title">Video title - Dash and HLS</h2>
<div class="mp4-video__video-container js-video-container">
<video data-module="video" class="video-player__video" playsinline preload="metadata" poster="https://via.placeholder.com/1600x900.png" loop controls autoplay muted data-dash-url="https://livesim.dashif.org/livesim/chunkdur_1/ato_7/testpic4_8s/Manifest.mpd" data-hls-url="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/93170002-e471-44c0-8612-027c8bb9b918/TI_Sharon_Horgan_120Sec_9x16_992.ism/manifest(format=m3u8-aapl).m3u8" data-poster-url="https://via.placeholder.com/1600x900.png">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm">
<source src="https://videos.pexels.com/video-files/33839224/14360680_1920_1080_30fps.mp4" type="video/mp4">
<source src="https://livesim.dashif.org/livesim/chunkdur_1/ato_7/testpic4_8s/Manifest.mpd" type="application/dash+xml">
<source src="https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/93170002-e471-44c0-8612-027c8bb9b918/TI_Sharon_Horgan_120Sec_9x16_992.ism/manifest(format=m3u8-aapl).m3u8" type="application/x-mpegURL">
</video>
</div>
<p class="mp4-video__description">Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.</p>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/mp4-video.css?cb={{cacheBuster}}">
{{/if}}
<div class="mp4-video{{#if description}} mp4-video--with-description{{/if}}" data-module="video" {{#if autoplay}}data-autoplay="true"{{/if}}
data-fullscreen="false">
{{#if title}}<h2 class="mp4-video__title">{{title}}</h2>{{/if}}
<div class="mp4-video__video-container js-video-container">
{{> @video video}}
</div>
{{#if description}}<p class="mp4-video__description">{{description}}</p>{{/if}}
</div>
{
"theme": "default",
"firstInstance": true,
"autoplay": true,
"showControls": false,
"loop": true,
"title": "Video title - Dash and HLS",
"description": "Credibly maintain process-centric mindshare without multidisciplinary niche markets. Interactively negotiate optimal total linkage after.",
"video": {
"autoplay": true,
"showControls": true,
"loop": true,
"posterUrl": "https://via.placeholder.com/1600x900.png",
"sources": [
{
"type": "video/webm",
"url": "http://techslides.com/demos/sample-videos/small.webm"
},
{
"type": "video/mp4",
"url": "https://videos.pexels.com/video-files/33839224/14360680_1920_1080_30fps.mp4"
}
],
"dashUrl": "https://livesim.dashif.org/livesim/chunkdur_1/ato_7/testpic4_8s/Manifest.mpd",
"hlsUrl": "https://tiprod20mediaep-tiprod20media-euno.streaming.media.azure.net/93170002-e471-44c0-8612-027c8bb9b918/TI_Sharon_Horgan_120Sec_9x16_992.ism/manifest(format=m3u8-aapl).m3u8"
}
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.mp4-video {
$this: &;
&--with-description {
#{$this}__video-container {
@extend %spacer-small;
}
}
&__title {
@extend %heading02;
@extend %spacer-small;
}
&__description {
@extend %p--body;
}
&__video-container {
position: relative;
}
}
No notes defined.