Jump to content

Video playback tool on page doesn't work with MOV files on single PC


Recommended Posts

I'm using the code below to load and play MOV video files in a browser window. It's working with MP4 files, but not with MOV files - but only on this one laptop. The tool runs MOV files just fine on my desktop and a little netbook I have, but not on my laptop. Recently my hard drive failed on this laptop. I had to install a new hard drive then reinstall Windows 10 and other software. Now MOV files that used to play fine with the tool will not play. However, MP4 files will play just fine. The issue is not browser specific. The MOV files fail to play in Firefox, Chrome, IE, and Edge. They will not play whether I am loading the page from our web server or localhost (when running XAMPP). When I try to play the MOV files then the page returns the message: Cannot play video (type) ""

 

I have no idea what general PC setting could be causing this issue. Any help will be greatly appreciated.

 

Thanks in advance,

Andrew

// ----------  VIDEO LOADER ----------  
var vvid = document.getElementById("video"); 

(function localFileVideoPlayerInit(win) {
    var URL = win.URL || win.webkitURL,
        displayMessage = (function displayMessageInit() {
            var node = document.querySelector('#message');
            return function displayMessage(message, isError) {
                node.innerHTML = message;
                node.className = isError ? 'error' : 'info';
            };
        }()),
            playSelectedFile = function playSelectedFileInit(event) {
            var file = this.files[0];
            var type = file.type;
            var videoNode = document.querySelector('video');
            	muteUnmute();
            var canPlay = videoNode.canPlayType(type);
            canPlay = (canPlay === '' ? 'no' : canPlay);
            if (canPlay === "no") { var message = 'Cannot play video (type) "' + type + '"'; }
               else { var message = ""; }
            var isError = canPlay === 'no';
            displayMessage(message, isError);
            if (isError) {
                return;
            }
            var fileURL = URL.createObjectURL(file);
            videoNode.src = fileURL;
        },
        inputNode = document.querySelector('input');
    if (!URL) {
        displayMessage('Your browser is not ' + 
           '<a href="http://caniuse.com/bloburls">supported</a>!', true);
        return;
    }                
    inputNode.addEventListener('change', playSelectedFile, false);
}(window));

sizer(70); //sets initial display of video to 70%
Link to post
Share on other sites

According to this table MOV is not a supported video format except for in Safari.

https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

 

I'm not surprised since it's a proprietary format invented by Apple.

Link to post
Share on other sites

I've seen the table before. It looks to be several versions behind. All I can say is that the MOV files play in the tool just fine in every browser on every PC I've tried, except this one laptop.

 

You can try one of your files from this page, if you like.

 

Thanks,

Andrew

 

UPDATE: I also tried loading an MOV file using the file path in the address bar. It runs in Firefox just fine on the laptop. It just won't run within the tool - on this one laptop.

Edited by SerenityNetworks
Link to post
Share on other sites
var file = this.files[0];
var type = file.type;

It would seem the browser is not able to correctly guess the MIME type of the uploaded file. You could manually check for a ".mov" at the end of the filename and set "type" to be "video/quicktime" (I think that's the correct MIME type for mov files)

var type = file.type;
if(type == "" && (/\.mov$/i).test(file.name)) {
  type = "video/quicktime";
}
Link to post
Share on other sites

Well this is very odd. I added your code to force the type for MOV files to both my test page and my production page (that has other features and functions).

 

We now get:

On the web server, the production page works fine in Firefox, but not in Chrome (on this one laptop - it works fine on all other machines).

On localhost with XAMPP, the production page fails in both Firefox and Chome (on this one laptop - it works fine on all other machines).

On the web server, the test page now fails in both Firefox and Chrome (on this one laptop - it works fine on all other machines).

On localhost with XAMPP, the test page works fine in Firefox, but not in Chrome (on this one laptop - it works fine on all other machines).

 

With your added code, both pages still work perfectly on all other machines I have for using to test.

 

This is better, and workable, but it's still very odd that the configuration of this laptop causes problems. I wish we could figure out what's different about the laptop.

 

Thanks again,

Andrew

Link to post
Share on other sites

What shows up when it fails to work?

 

I suspect that quicktime videos may only play if quicktime is installed on the device, check to see if quicktime is installed and, if it isn't, install it. Are these devices running Windows, Mac or Linux?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...