Question

好的，过去几天我一直试图在我的角度应用程序上实现视频。

以下是关于视频的一些事实：

所有视频都是MP4文件
使用节点js
使用谷歌浏览器设备模拟器测试此即时消息

现在到实际代码：

首先在我的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中的浏览器无法在经过身份验证的链接后播放视频的已知问题。请参阅下面的链接，了解苹果论坛上最新的视图，特别是其中一篇帖子摘录，这是最好的总结（恕我直言）：

在iOS 8中，Apple在Safari中引入了一个问题，即无法播放存储在HTTP基本身份验证背后的媒体文件。浏览器内媒体播放器似乎不共享浏览器的经过身份验证的会话。这对我来说是一个问题，因为我一直在我的iPhone上使用Safari来播放我的服务器上的音乐。由于Safari无法在iOS 8中运行，我尝试使用Chrome和Opera，但他们似乎分享了Safari网络视图和行为。 Atomic没有认证问题，但有一个单独的问题，当它播放媒体时，没有声音。我尝试过的唯一两款适用于我的浏览器是Mercury和Dolphin。现在，这些是我在服务器上播放音乐的最佳选择。“

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

HTML 5视频播放器使用仿真器工作但不在实际设备上工作

1 个答案: