diff --git a/app/views/items/show.html.erb b/app/views/items/show.html.erb
index 30e050f..40c0347 100644
--- a/app/views/items/show.html.erb
+++ b/app/views/items/show.html.erb
@@ -1,3 +1,6 @@
+<link href="https://vjs.zencdn.net/7.8.4/video-js.css" rel="stylesheet" />
+<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
+
 <p id="notice"><%= notice %></p>
 
 <p>
@@ -10,5 +13,42 @@
   <%= @item.streams %>
 </p>
 
+<p>
+  <video
+    id="my-video"
+    class="video-js"
+    width="640"
+    height="480"
+    controls
+    preload="auto"
+  >
+    <% @item.streams.each do |stream| %>
+      <source src="<%= stream["url"] %>" type="application/x-mpegURL" label="<%= stream["label"] %>"/>
+    <% end %>
+  </video>
+</p>
+
 <%= link_to 'Edit', edit_item_path(@item) %> |
 <%= link_to 'Back', items_path %>
+
+
+<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
+<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>
+
+<script>
+  var options, player;
+
+  options = {
+    controlBar: {
+        children: [
+          'playToggle',
+          'progressControl',
+          'volumePanel',
+          'qualitySelector',
+          'fullscreenToggle',
+        ],
+    },
+  };
+
+  player = videojs('my-video', options);
+</script>
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index f190a1a..a37f9b3 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -17,3 +17,9 @@ services:
       - "3000:3000"
     depends_on:
       - db
+  streaming:
+    build: ./nginx
+    volumes:
+      - ./streams:/data
+    ports:
+      - "3333:80"