diff --git a/demo/demo.css b/demo/demo.css
index 6e2ee3d4..7bf7fab0 100644
--- a/demo/demo.css
+++ b/demo/demo.css
@@ -97,6 +97,7 @@
 .url-input button {
     flex: initial;
     margin-left: 8px;
+    margin-right: 8px;
 }
 
 .options {
diff --git a/demo/index.html b/demo/index.html
index 2f485720..819d237d 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -16,6 +16,8 @@
                     <label for="sURL">Stream URL:</label>
                     <input id="sURL" type="text" value="http://127.0.0.1/flv/7182741-1.flv" />
                     <button onclick="switch_mds()">Switch to MediaDataSource</button>
+                    <label for="file">FLV File:</label>
+                    <input type="file" id="file" accept=".flv" onchange="flv_file_load()" />
                 </div>
                 <div class="options">
                     <input type="checkbox" id="isLive" onchange="saveSettings()" checked />
@@ -107,6 +109,31 @@
             player.load();
         }
 
+        function flv_file_load() {
+            var fileEl = document.getElementById('file');
+            var file = fileEl.files[0];
+
+            if (!file) {
+                return;
+            }
+
+            console.log('FLV File:', file);
+
+            var i;
+            var mediaDataSource = {
+                type: 'flv'
+            };
+            for (i = 0; i < checkBoxFields.length; i++) {
+                var field = checkBoxFields[i];
+                /** @type {HTMLInputElement} */
+                var checkbox = document.getElementById(field);
+                mediaDataSource[field] = checkbox.checked;
+            }
+            mediaDataSource['url'] = URL.createObjectURL(file);
+            console.log('MediaDataSource:', mediaDataSource);
+            player_load_mds(mediaDataSource);
+        }
+
         function player_start() {
             player.play();
         }