title: Serve local video files for vlc-plugin with python
body: <p>I have a web application focused around playing videos.  It uses a flask api to serve the metadata.  I want to be able to pass a local filepath for a video to the client and allow the client to play that video.  Since you can't just load a local file, how can I serve the file to the browser?  I know there is simplehttpserver but I have files all over the place.  </p>
  
  <p>How can I set it up so that I can use the vlc plugin like in this post <a href="https://stackoverflow.com/questions/8138244/open-video-stream-on-vlc-player-through-the-browser">Open video stream on VLC Player through the browser</a>?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is not a duplicate.  I am asking how can I serve a file from a client-supplied filepath.  This can be any location, not just one directory of static css/html/js files I want served.  Since the client is getting the filepath from the server, I can validate that file is allowed to be served.  </p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>Still do not believe this is a duplicate as it is for consumption by a specific plugin, <a href="https://wiki.videolan.org/Documentation:WebPlugin/" rel="nofollow noreferrer">vlc web plugin</a>.  I tried to use <code>send_from_directory</code> but it did not work.  Hopefully this makes it clearer.  If send_from_directory` is the right thing to use though, what is my error here?</p>
  
  <p>On python my endpoint is as follows (using flask-restful):</p>
  
  <pre><code>from flask import Blueprint, send_from_directory
  from flask_restful import Api, Resource
  
  class VideoServer(Resource):
  
      def get(self, filepath):
          path, file = os.path.split(filepath)
          return send_from_directory(path, file)
  
  base_blueprint.add_resource(VideoServer, '/video_server/&lt;string:filepath')   
  </code></pre>
  
  <p>On the js side:</p>
  
  <pre><code>let videourl = config.api_server + '/video_server/' + filepath
  let $video = $("&lt;object&gt;", {type: "application/x-vlc-plugin", data: videourl});
  let $param = $("&lt;param&gt;", {name: "movie", value: videourl});
  let $embed = $("&lt;embed&gt;", {type: "application/x-vlc-plugin", autoplay: "yes", loop: "no", target: videourl});
  $video.append($param);
  $video.append($embed);
  $("#mydiv").append($video);
  $("#mydiv").load();
  </code></pre>