Javascript window.URL - undefined in function

Question

I studied some javascript to select a file and use it to create an objectUrl that can be set as src for html5 video . I try this in chrome version 18.0.1025.162 on ubuntu lucid and using a local html file with a javascript file and media files in the same folder.

I can select the video file using the input element, and when I click on the play link , the javascript function playVideo () is executed.

 <video id="vid" name='myvid' width="640" height="360" controls="controls"> <source src="test.webm" type="video/webm" /> </video> <br><a href="#" id="playlnk">Play </a> </li> <br><input type="file" name="fileselect" id="fselect"> </input> 

Javascript file

 $(document).ready(function(){ player=$('#vid').get(0); $('#playlink').click(function(){playVideo(player);}); }); function setVideoSrc(player,file){ console.log('winurl='+window.URL); var fileURL = window.URL.createObjectURL(file); player.src=fileURL; player.load(); return; } function playVideo(player) { var file=document.getElementById('fselect').files[0]; console.log('you chose:'+file); if (file==undefined){ console.log('no file chosen'); }else{ console.log('file='+file); setVideoSrc(player,file); } } 

When I do not select any files and click on playlink, the default video is played, and the console log says no file chosen - expected.

The error occurs when I select a video file and then select playlink . The playVideo() method playVideo() calls setVideoSrc() , in which the console log tells window.URL' is undefined `

Why is this happening? Can someone help me fix this? Here is the console log output

 you chose:[object File] //from playVideo() function file=[object File] //from playVideo() function winurl=undefined //setVideoSrc() function Uncaught TypeError: Cannot call method 'createObjectURL' of undefined 

Answer 1

Use window.webkitURL in Chrome.

This will work in both Chrome and FireFox.

 function setVideoSrc(player,file){ var myURL = window.URL || window.webkitURL console.log('winurl='+myURL); var fileURL = myURL.createObjectURL(file); player.src=fileURL; player.load(); return; } 

See also:

• http://caniuse.com/#feat=bloburls
• https://developer.mozilla.org/en/DOM/window.URL.createObjectURL
• http://www.w3.org/TR/FileAPI/#url

Answer 2

You tried

  window.location.href = "URL"; 

instead of window.url? It seems that url is not supported.

Answer 3

Try as follows: -

 var file = document.getElementById('fselect').files[0]; if(file){ setVideoSrc(player,file); } 

Below line works Chrome and Firefox: -

 window.URL.createObjectURL(file); 

Make sure you test the browsers mentioned.

Refer to this information.

• window.URL.createObjectURL
• window.URL