I was learning some JavaScript, to select a file and use it to create an objectUrl which can be set as the src of an HTML5 video. I am trying this out 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 a video file using the input element and when I click on a 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 is

$(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 don't select any file and click on the playlink, the default video plays and console log says no file chosen - as expected.

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

Why does this happen? Can someone help me correct 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 

I was learning some JavaScript, to select a file and use it to create an objectUrl which can be set as the src of an HTML5 video. I am trying this out 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 a video file using the input element and when I click on a 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 is

$(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 don't select any file and click on the playlink, the default video plays and console log says no file chosen - as expected.

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

Why does this happen? Can someone help me correct 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 

• javascript
• html
• video

• 1 window.URL is Gecko-specific. Which browser are you using? – Frédéric Hamidi Commented May 10, 2012 at 7:54
• I am using ..chrome, is there a browser independent way to do this? – damon Commented May 10, 2012 at 8:13
• 1 To my knowledge, there isn't (IE and Opera do not seem to support this at all). Chrome, however, has an equivalent (window.webkitURL) according to MDN. – Frédéric Hamidi Commented May 10, 2012 at 8:15

3 Answers 3

Use window.webkitURL in Chrome.

This whould 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./#feat=bloburls
• https://developer.mozilla/en/DOM/window.URL.createObjectURL
• http://www.w3/TR/FileAPI/#url

Try this way:-

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

Below line works on Chrome and Firefox:-

window.URL.createObjectURL(file);

Make sure, you are testing on mentioned browsers.

Refer to this information

• window.URL.createObjectURL
• window.URL

Have you tried

 window.location.href = "URL";

instead of window.url? Seems url isn't supported feature.