Can't stream my videos beacause of cors

alaaNabawy

Hello, I tried to stream my videos from dropbox in my site with shared with javascript to create blob source link but there is an issue with cors,

the code

<video id="my-video" class="video-js" controls preload="metadata" width="640" height="264"
   data-setup="{}">
  </video>

<script type="text/javascript">
		var xhr = new XMLHttpRequest();
		xhr.responseType = 'blob';

		xhr.onload = function() {

		  var reader = new FileReader();

		  reader.onloadend = function() {

		    var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));

		    var byteNumbers = new Array(byteCharacters.length);

		    for (var i = 0; i < byteCharacters.length; i++) {

		      byteNumbers[i] = byteCharacters.charCodeAt(i);

		    }

		    var byteArray = new Uint8Array(byteNumbers);
		    var blob = new Blob([byteArray], {type: 'video/ogg'});
		    var url = URL.createObjectURL(blob);

		    document.getElementById('my-video').src=url;

		  }

		  reader.readAsDataURL(xhr.response);

		};

		xhr.open('GET', 'https://www.dropbox.com/s/0tztdjct8uuwgl5/flowers.mp4?dl=1');
		xhr.send();

	</script>

What can i do?

Greg-DB

The 'www.dropbox.com site' doesn't allow CORS like this. 

You can technically make this work using 'dl.dropboxusercontent.com' (e.g., "https://dl.dropboxusercontent.com/s/0tztdjct8uuwgl5/flowers.mp4"), but please note that isn't officially supported.