Skip to content

Instantly share code, notes, and snippets.

@illusionfield

illusionfield/bunny.smil

Last active August 11, 2021 11:33
Show Gist options
  • Save illusionfield/caf016d05b94a20da9ba93d1377d7d58 to your computer and use it in GitHub Desktop.
Save illusionfield/caf016d05b94a20da9ba93d1377d7d58 to your computer and use it in GitHub Desktop.
Download ZIP
smil bunny
Raw
bunny.smil
<smil>
<head>
<meta http-equiv="refresh" content="20"/>
<layout>
<!-- define the screen resolution -->
<root-layout width="1920" height="1080" backgroundColor="#18182c" />
<!-- define the screen layout, in this case single fullscreen zone -->
<region regionName="main" left="0" top="0" width="1920" height="1080" z-index="1" backgroundColor="#18182c"/>
</layout>
<style>
.bg-text {
background-color: rgba(0,0,0, 0.4);
color: white;
font-weight: bold;
border: 3px solid #000;
box-shadow: 5px 10px 18px #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
padding: 20px;
text-align: center;
animation: myfirst 5s linear 2s infinite alternate;
z-index: 1000;
}
@keyframes myfirst {
0% {top:10%;}
50% {top:70%;}
100% {top:10%;}
}
</style>
</head>
<body>
<par>
<!-- Downloading resources into the internal storage -->
<seq>
<prefetch src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_30MB.mp4" />
<prefetch src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/samples/assets/landscape2.mp4" />
<prefetch src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/samples/assets/landscape1.jpg" />
<prefetch src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/samples/assets/landscape2.jpg" />
<seq id="__prefetchEnd" dur="1s" />
</seq>
<!-- Wait for the prefetch of media files, once done, start the playback -->
<par begin="__prefetchEnd.endEvent" repeatCount="indefinite">
<seq repeatCount="indefinite">
<video src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_30MB.mp4" region="main" soundLevel="0%"></video>
<video src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/samples/assets/landscape2.mp4" region="main" soundLevel="0%"></video>
<img dur="3s" src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/samples/assets/landscape1.jpg" region="main" fit="fill"></img>
<img dur="5s" src="https://signageos-demo.s3.eu-central-1.amazonaws.com/smil/samples/assets/landscape2.jpg" region="main" fit="fill"></img>
</seq>
</par>
</par>
<div class="bg-text">
<h2>Blurred Background</h2>
<h1 style="font-size:50px">I am John Doe</h1>
<p>And I'm a Photographer</p>
</div>
</body>
</smil>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment