HTML 5 video player works using emulater but not on actual device

Question

Okay so for the past days ive been trying to implement video on my angular application.

Here are some facts on the video it self:

• all videos are MP4 files
• Videos are being streamed using node js
• to test this im using google chrome device emulator

Now to the actual code:

First in my node.js application i have the following code for fetching the video:

router.route('/resource/:encodedString')
    .all(function (req, res) {
        var decoded = jwt.decode(req.params.encodedString, require('../secret')());
        var mediaObject = decoded.mediaObject;

        if (mediaObject.file.extension == 'pdf') {
            res.set('Content-Type', 'application/pdf');
        } else {
            res.set('Content-Type', 'application/octet-stream');
        }
        res.header('mimetype', mediaObject.file.mimetype);
        res.header('content-disposition', 'filename=' + mediaObject.file.originalname);


        // res.header('content-disposition', 'filename=' + mediaObject.file.originalname);
        var stream = fs.createReadStream(mediaObject.targetDir + mediaObject.file.originalname);
        stream.pipe(res);
        stream.on('end', function () {
            console.log("Reading operation completed.");
            res.end();
        });
    });

Basicly the encodedString variable contains an object that has all the file information

Then in my HTML i have the following:

    <video width="459" height="320" controls>
    <source src="{{LRM.getResourceUrl(resourceToken,null) | trustUrl}}" type="video/mp4">
    Your browser does not support the video tag.
</video>

The LRM.getResourceUrl looks like this:

    app.factory('LRM', function () {
    var LRM = {};
    $.getJSON("config.json", function (json) {
        LRM.env = json.app_url; // this will show the info it in firebug console
    });

    LRM.getResourceUrl = function (resourceString, type) {
        if (resourceString.indexOf('/') >= 0) {
            //Legacy method
            return resourceString;
        }
        else {
            if(type == null){
                return LRM.env + '/resource/' + resourceString;
            }
            else
            {
                return LRM.env+'/resource/'+resourceString+'/'+type;
            }
        }
    };

    LRM.getDeviceResource = function (resourceString, os) {
        if (resourceString.indexOf('/') >= 0) {
            //Legacy method
            return resourceString;
        }
        else {
            if(os == null){
                return LRM.env + '/deviceResource/' + resourceString;
            }
            else
            {
                return LRM.env+'/deviceResource/'+resourceString+'/'+os;
            }
        }
    };

    LRM.getUploadUrl = function (method) {
        if(LRM.env){
            return LRM.env + method;
        }
    };

    return LRM;

});

Now when i run this on my desktop i get the movie and there is no issue.

Then when i run this using the emulator and emulate either an iphone 5 or an ipad it works fine aswell

However when i use my phone (the actual device) the video wont play and it only display me the video play button.

Can anyone tell me what could cause this?

Answer 1

I think you are only seeing this issue on iOS devices? If so, this may be a known issue with browsers in iOS not playing back video behind an authenticated link. See the link below for the most up to date view on the apple forums and, in particular, this extract from one of the posts which is the best summary (IMHO):

In iOS 8, Apple introduced an issue in Safari where media files stored behind HTTP basic authentication cannot be played. The in-browser media player does not seem to share the browser's authenticated session. This is a problem for me because I have always used Safari on my iPhone to play music off a server of mine. With Safari not working in iOS 8, I tried Chrome and Opera but they seem to share the Safari web view and behavior. Atomic did not have the authentication issue, but there was a separate issue where when it played the media there was no sound. The only two browsers I tried that worked for me were Mercury and Dolphin. These are now my go-to alternatives for playing music off my server."

• https://discussions.apple.com/thread/6553020