Add muted media session sample

beaufortfrancois · Sep 25, 2017 · aada5cf · aada5cf
1 parent 76b1341
commit aada5cf
Showing 1 changed file with 49 additions and 0 deletions.
diff --git a/media-session/muted.html b/media-session/muted.html
@@ -0,0 +1,49 @@
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+body {
+    max-width: 616px;
+    margin: 0 auto;
+    padding: 8px;
+    background: #dadada;
+}
+div {
+    padding: 4px;
+    background: #fafafa;
+}
+video {
+    width: 100%;
+}
+p {
+    position: fixed;
+    bottom: 0;
+}
+.blue {
+    height: 32px;
+    padding-top: 342px;
+    background: #4387f4;
+}
+</style>
+<body>
+  <div>
+    <video id="video" muted controls playsinline loop src="//storage.googleapis.com/media-session/caminandes/short.mp4#t=113"></video>
+  </div>
+  <p id="credits">Credits: Media files are © copyright Blender Foundation | <a href="http://www.blender.org">www.blender.org </a>.</p>
+</body>
+<script>
+  if (location.search.includes('autoplay')) {
+    video.autoplay = true;
+  }
+  navigator.mediaSession.metadata = new MediaMetadata({
+    title: 'Never Gonna Give You Up',
+    artist: 'Rick Astley',
+    album: 'Whenever You Need Somebody',
+    artwork: [
+      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
+      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
+      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
+      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
+      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
+      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
+    ]
+  });
+</script>