javascript - HTML 5 视频播放器可以在模拟器中运行，但不能在实际设备上运行

Question

好吧，过去几天我一直在尝试在我的 Angular 应用程序上实现视频。

以下是有关视频本身的一些事实:

• 所有视频均为 MP4 文件
• 视频正在使用 Node js 进行流式传输
• 使用 Google Chrome 设备模拟器测试此即时消息

现在看实际代码:

首先在我的 node.js 应用程序中，我有以下用于获取视频的代码:

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();
        });
    });

基本上，encodedString变量包含一个具有所有文件信息的对象

然后在我的 HTML 中我有以下内容:

    <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>

LRM.getResourceUrl 如下所示:

    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;

});

现在，当我在桌面上运行此程序时，我可以观看电影，并且没有任何问题。

然后，当我使用模拟器运行它并模拟 iphone 5 或 ipad 时，它也可以正常工作

但是，当我使用手机(实际设备)时，视频不会播放，它只显示视频播放按钮。

谁能告诉我这是什么原因造成的？

Answer 1

我认为您只在 iOS 设备上看到此问题？如果是这样，这可能是 iOS 中的浏览器无法播放经过身份验证的链接后面的视频的已知问题。请参阅下面的链接，了解苹果论坛上的最新 View ，特别是其中一篇文章的摘录，这是最好的总结(恕我直言):

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